none
Create slideshow RRS feed

  • Question

  • I want to have the homepage of my website automatically show photographs that continue to cycle through 25 pictures. I am assuming this is called a slideshow, but when I search on this forum I am only finding threads that are pretty old. Is there another name for what I am looking for? or can someone give some direction how to do this, or point me to a tutorial?

    Thanks

    Sunday, December 26, 2010 8:02 PM

All replies

  • I know that the experts here have their own ideas of good slide show scripts but I have used this one:

    http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

     

     

    Sunday, December 26, 2010 8:25 PM
  • A google search will return any number of possibilities for adding a slide show I found this one that takes advantage of Flash video .swf file format.  EW 4 has a media drop down list in the tool box with Flash , Deep Zoom, Silverlight and Widnows Media apps that can work with 3rd pary add-ins.  The choice is pretty much yours.  Do some investigating and see what YOU like.

    HTH,

    MIKE E


    "It's like déjà vu all over again." — Yogi Berra
    Sunday, December 26, 2010 9:51 PM
  • There are a whole bunch listed in this thread - all free: http://expressionwebforum.com/index.php/topic,23.msg28.html#msg28 
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Sunday, December 26, 2010 10:38 PM
  • Cheryl,

    You know I looked at the features and easy to use points of the add-in I suggested and did not think to look at (free trial)what it cost $50!  I do not mind spending$ if a app/software is worth it to but with all the free stuff out there I would be inclined to check out the free stuff before I made a purchase. And usually if I buy the mac daddy free version of something making my paid product obsolete the next day it seems like.

    MIKE E


    "It's like déjà vu all over again." — Yogi Berra
    Monday, December 27, 2010 2:29 AM
  • Mike,

    I prefer to use javascript slideshows instead of Flash ones. The list I posted a link to was compiled by various people on my old forum. I condensed it to a single list before the old forum was replaced by the new one.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, December 27, 2010 3:09 AM
  • Cheryl,

    Unless I am misunderstanding, your link seems to show photo galleries of the type that have thumbnails that are either clicked or moused over and then the image is displayed. What I am looking for is a slideshow that does not show any thumbnails, and automatically advances though images, one at a time. The link that Tree Tops Ranch provided above seems like what I am looking for (the demo there called "Straightforward, auto playing slideshow").

    Are there any others like that, perhaps a bit easier to implement?

    Thanks

    Tuesday, December 28, 2010 3:35 PM
  • Well, for what you're after, to my mind they don't come much easier than the jQuery Innerfade plugin. If you want a simple image rotator such as you are describing, this one fits the bill. Here's an example of it in production use. The product image rotators on the home, industrial, and commercial pages all use this plugin.

    To implement it, you will need to add two script references to the <head> section, like so

    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.innerfade.js"></script>

    As shown, the scripts will need to be located in a "scripts" folder in the root of the site. Then you add the function call that does the work

    <!-- #BeginEditable "pageLocalScripts" -->
    <script type="text/javascript">
     $(document).ready(
      function(){
       $('#testList').innerfade({
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '220px'
       });
      }
     );
    </script>
    <!-- #EndEditable -->

    The target (testList in this case) is simply the ID of the list you use to contain the rotator images and, if used, captions (see markup below). The purpose of the params is pretty clear. Note that the timeout (image dwell time) is given in milliseconds; just multiply the # seconds times 1000.

    Setting up the individual images themselves is simple. They're just ordinary HTML list items. Here's the code for two of them from the home page in the example:

      <ul id="testList">
       <li>
        <div>
         <img src="images/rotator/VTS_series_200w_trans.gif" alt="VTS Series Chamber" title="VTS Series Chamber" />
         <p>CSZ VTS Series Thermal Shock Chamber</p>
        </div>
       </li>
       <li>
        <div>
         <img src="images/rotator/Bryant-Legacy-Line-Central-Air-Conditioner.gif" alt="Bryant Legacy Line Central A/C" title="Bryant Legacy Line Central A/C" />
         <p>Bryant Legacy Line Central Air Conditioner</p>
        </div>
       </li>
    ... and so forth
       </ul>

    As you can see, just straightforward HTML. Note that anything displayable can go in the divs. In this case, I wanted a product name caption for each image, so I just added a paragraph element following each img element. Also, since this is just HTML, you can use plain ol' garden variety CSS to style the display, add borders, background colors, change fonts, etc.

    I found that the easiest way to add new images was simply to copy the preceding list item, paste it in, then change the src URL to point to the desired image (HINT: highlight everything in the src URL back to and including the equals sign, then type "=". EW will then give you the Intellisense prompt to browse for the new image.) Change the caption text in the paragraph element and you're done. There's no need to change a counter or anything; the plugin walks the contents of the list, regardless of the number of list items.

    See the page source code for the full list implementation. As I said, there may be easier to use rotators out there, but if so, I haven't found them. Recommended.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Tuesday, December 28, 2010 4:44 PM
  • Yo,

    They are several different types of slide shows in that list and at least 3 of them have the option to display as a simple rotating set of slides but I agree with Scott that if that's all you want then the jQuery plugin is probably the way to go.

    Flash like the one Mike suggested can be very simple and easy to use but do require the visitor be on a device that supports Flash. So if anyone in your target market will be using an iPad or other Apple device (besides a Mac) they won't be able to see it since Jobs has blocked Flash from the iPxxx devices.

    If you don't care about those users then Flash can be a good choice.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Tuesday, December 28, 2010 4:50 PM
  • OK, good.

    Thanks to all for the links and for the insight. I am working through these now.

    Vince

    Wednesday, January 5, 2011 3:32 PM
  • Scott-

    Thanks for the great information about Innerfade. I am pleased with the results, with one small problem. How do I get the ul to not display bullets?

    I have tried:
    changing the style for #testList ul li to display none,
    changing the style for my container div ul ul to display none (thinking that I could get the nested testList ul to change)

    Neither of these worked.

    I hope that makes sense. The page I'm working on is located at: http://spencerlawlamar.com/social-security-disability-SSDI-SSI2.htm

    Wednesday, July 27, 2011 6:14 PM
  • I figured out the problem with the bullets.
    Wednesday, July 27, 2011 6:20 PM
  • Glad it worked out for you. I have found InnerFade to be a nice, lighweight, and easily configured solution for element rotation effects (I''ve also used it to create a rotating "quotes" section), since it will work with whatever content is within the <ul>, not just images.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Wednesday, July 27, 2011 7:03 PM