slideshow methods/suggestions

Discussion in 'Web Design and Development' started by torndownunit, Jun 20, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    I was just curious what you guys think is the best method for a simple image slide show on a site. I don't need buttons or anything. Just an automated slideshow with some type of fade transition between photos.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Personally I would (have) make my own from scratch, but I like coding. I know you don't. There's a number of free JavaScript ones with varying features. Here's one I've seen shown off a few times. One piece of criteria you should consider is whether or not the script degrades gracefully, as in if the visitor doesn't have JavaScript enabled. It may not look as nice for them, but at least they'll still be able to see and access the images in question.

    There's also the infamous Lightbox script, which is mostly an image viewer rather than slide show, but does have a manual slide show function. There's also the numerous Lightbox clones to choose from that have varying functionality.

    You can also find some scripts that work with PHP as well. These scripts can dynamically access a folder of images and create the slide show from that, which makes the effort on your part smaller generally speaking.
     
  3. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #3
    So would you use a javascript solution over a Flash solution?

    I know there are a few options, I was just curious what others do. And curious about what the most compatible solution across browsers would be. I have used Flash for this in the past, but I generally try to avoid using Flash when possible.
     
  4. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    Exactly what I am looking for. Firstly I created a slideshow in flash, but the webpage was taking 150 seconds to download. So now I am trying to program Google Ajax Feed code into dreamweaver, from taking pictures from "Picasa" (google free account) to create the 'slideshow'.
    I am pulling my hair out lol :confused: but it is interesting. I am looking at www.w3schools.com to try to teach myself code. Let me know if you find an easy way of doing it.
    It is tricky, but the way I'm looking at it is that the majority of sites do not have this sexy slideshow for a reason (it must be a bit tricky)
    http://forums.macrumors.com/showthread.php?t=724892
    http://forums.macrumors.com/showthread.php?t=708527
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Personally, yes! I would go JavaScript over Flash. I find it more accessible and when you have a larger number of images it can cause the Flash to load really slow while a visitor gets stuck looking at a loading bar and often just leaves. Though, in fairness, a JavaScript solution, when done incorrectly, will cause a slow load too.
     
  6. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Did you manage to get your slideshow to work?

    I'm not having much success with my slideshow. I do not understand how to get my pictures into it? Here is the code, it can't be that hard surely just need to upload my album from picasa and it will do the rest. Here is the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Google AJAX Feed API - AJAX Slide Show Sample</title>
      <script src="http://www.google.com/jsapi"
        type="text/javascript"></script>
      <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
        type="text/javascript"></script>
    
      <style type="text/css">
        .gss a img {border : none;}
        .gss {
          width: 288px;
          height: 216px;
          color: #dddddd;
          background-color: #000000;
          padding: 8px;
        }
    
      </style>
      <script type="text/javascript">
        function load() {
          var samples = "http://dlc0421.googlepages.com/gfss.rss";
          var options = {
            displayTime: 2000,
            transistionTime: 600,
            linkTarget : google.feeds.LINK_TARGET_BLANK
          };
          new GFslideShow(samples, "slideshow", options);
    
        }
        google.load("feeds", "1");
        google.setOnLoadCallback(load);
      </script>
    </head>
    
    <body>
      <div id="body">
        <div id="slideshow" class="gss">Loading...</div>
      </div>
    </body>
    </html>
    
    I have tried pasting in from var samples but no joy. I would have thought this was it. I tried looking up the var samples link and it does not work. However the slideshow works fine?:eek:
     

Share This Page