1 2 Previous Next 52 Replies Latest reply: Oct 1, 2014 5:44 AM by Helimuppets RSS

    HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????

    le_mac_man Community Member

      I would like to have a slow fading slideshow of a few images relating to the web page that the user is on.

       

      I have a seperate div tag, with the space 235 x 440 pixels allowed for the images. All I want is the slideshow to fade in and out of one another using 3 or 4 photos, no text, no control panel or thumbnails or any other frills, just basic good quality photos fading in a looped slideshow.

       

      I just want that when the page loads up that the slideshow starts automatically and slowly loops continuously until the user changes page.

       

      I have seen animated gifs from photoshop, which are no good because the image quality is awful, and in fireworks, where it comes with either thumbnails or a control panel for the user to navigate manually the images. I don't want that. Can it be done easily in flash? or does dreamweaver have an answer?

       

      Surely there must be a simple and basic way in dreamweaver alone to just swap/fade an image with another image a few times and thats that? no?

       

      If it can't be done in dreamweaver, PLEASE tell me which program it can be done in and how.

       

       

      Many many many thanks in advance for anyone with an easily explained solution.

       

      Ian.

        • 1. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
          osgood_ MVP

          Do this with jquery:

           

          http://jquery.malsup.com/cycle/basic.html

           

          Look at the pages source code below to see how it was achieved.

           

          Basically you need to insert the below section of the code into the <head></head> section of your pages code and change '.slideshow' to the class name or id name of the <div> your images are in.

           

          <!-- include jQuery library -->
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
          <!-- include Cycle plugin -->
          <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
          <script type="text/javascript">
          $(document).ready(function() {
              $('.slideshow').cycle({
                    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
               });
          });
          </script>

           

           

           

           

           

           

          Pages Source Code

           

           

          <!DOCTYPE html>
          <html>
          <head>
          <title>JQuery Cycle Plugin - Basic Demo</title>
          <style type="text/css">
          .slideshow { height: 232px; width: 232px; margin: auto }
          .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
          </style>
          <!-- include jQuery library -->
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
          <!-- include Cycle plugin -->
          <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
          <script type="text/javascript">
          $(document).ready(function() {
              $('.slideshow').cycle({
                    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
               });
          });
          </script>
          </head>
          <body>
               <div class="slideshow">
                    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
                    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
                    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
                    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
                    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
               </div>
          </body>
          </html>
          • 2. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
            osgood_ MVP

            Although this will work you're accessing the jquery scripts from another server so I would get the scripts by browsing out to their location using the url address in the page code. Copy and paste them in a new Javascript file (which Dreamweaver will let you select when you create a new page) and save them to your site folder. Re-link the scripts in your page to the files in your site folder. You will now have the scripts under your control.

            • 3. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
              le_mac_man Community Member

              Thank you for your time in sending me your solution, but I'm quite new to all this and come from a design background rather than a coding background, and so I am struggling to understand any of this... sorry. I know it's probably a great way of doing and showing off the scripting knowledge, but I don't understand a thing of it.

               

              Your way seems awfully complicated to me.

               

              Is there not a simple way of doing this in Flash or something?

               

               

              Thanks again though.

               

              Ian.

              • 4. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                osgood_ MVP

                le_mac_man wrote:

                 

                Thank you for your time in sending me your solution, but I'm quite new to all this and come from a design background rather than a coding background, and so I am struggling to understand any of this... sorry. I know it's probably a great way of doing and showing off the scripting knowledge, but I don't understand a thing of it.

                 

                Your way seems awfully complicated to me.

                 

                Is there not a simple way of doing this in Flash or something?

                 

                 

                Thanks again though.

                 

                Ian.

                 

                Sure you can do it in Flash. Do you know Flash?

                 

                Probably one of the more simpler of things to do in Flash. Just put the images on different 'frames' and have them fade in and out.

                 

                Which ever solution you choose you need to be able to manipulate the code a bit to achieve the desired results.

                 

                Jquery is much easier than Flash as all it requires is you hook up the two scripts to the page. Literally all you need do is select the piece of code in my previous post and paste it between the <head></head> section of your pages code and change the '.slideshow' to the name of the <div> that your images are inserted in.

                • 5. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                  osgood_ MVP

                  If you upload your page somewhere I'll have a look at what it is you want and do it for you. (provided your existing code isn't a train wreck)

                  • 6. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                    MagicToolbox Community Member

                    Dreamweaver does not have a built-in feature for this. You will need a JavaScript to do this. You could write one from scratch or use an existing one. This is an example using Magic Slideshow...

                     

                    Place your images in a <div> with a class of MagicSlideshow.

                     

                    For example:

                     

                     

                    Upload the Magic Slideshow JavaScript and CSS files to your website and reference them in the <head>.

                     

                    For example:

                     

                     

                    Try the examples here:

                     

                    http://www.magictoolbox.com/magicslideshow/

                    • 7. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                      StudentsofShiloh Community Member

                      OSGood, thx for the info.  I tried it and it was very easy to install, and you are correct, it's better to have the javascript files on your own server because they could always get deleted or moved on their server and your slideshows would then stop working.

                       

                      Thanks!

                      • 8. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                        bngimages Community Member

                        Hello,

                        My first post. Osgoods code about cycling fading slideshows was really useful for my website.

                        My question

                        ------------------

                        - How do I control the time at which the slideshow remains on 1 image?

                        - How do I add controls to the slideshow for the user to control it if they want to, (preferably ones that appear from a link)?

                        - How do I stop the show when the user rolls the mouse over the image and then starts it up again when it rolls off?

                         

                        Any help really appreciated. As i say Osgoods stuff so far has been brilliant!

                        all the best

                        bngimages

                        --

                        http://www.bngimages.com

                         

                         

                        Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????

                        >> Although this will work you're accessing the jquery scripts from another server so I would get the scripts by browsing out to their location using the url address in the page code. Copy and paste them in a new Javascript file (which Dreamweaver will let you select when you create a new page) and save them to your site folder. Re-link the scripts in your page to the files in your site folder. You will now have the scripts under your control.

                        • 9. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                          Ben Pleysier MVP

                          There is an Adobe solution that can be used with any editor, but is particulaly useful when combined with DW CS5 http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2141 543

                           

                          exchange-preview2.gif

                          • 10. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                            salliyahg Community Member

                            Hi Osgood, sorry for being so slow with dreamweaver--but I am still not able to use your slideshow! I'm not quite sure what class, ID or <div> means but i did save the code into a new javascript file and i changed the source to the name of that new file. i also changed "Slideshow" to "websiteslideshow" because that is the name of the file my images are saved under, and I assumed that's what <div> meant.  ANy help for me?

                            Thanks!

                            • 11. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                              MagicToolbox Community Member

                              Try watching this video tutorial on YouTube.

                               

                              How to setup Magic Slideshow in Dreamweaver: http://www.youtube.com/watch?v=ADxWD7KIVQQ

                               

                              Does that help?

                              • 12. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                salliyahg Community Member

                                Sort of, I was mainly hoping to be able to use the one that osgood posted--I will have to re-watch it later since I am at work, and can't turn the volume up.

                                 

                                Thanks!

                                • 13. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                  osgood_ MVP

                                  salliyahg wrote:

                                   

                                  Sort of, I was mainly hoping to be able to use the one that osgood posted--I will have to re-watch it later since I am at work, and can't turn the volume up.

                                   

                                  Thanks!

                                   

                                  Hi salliy

                                   

                                  Copy the code below from <!DOCTYPE html> - </html> and save it to a new Dreamweaver document and then view it in the browser.

                                   

                                  All you need to do is change the img src link in the 'slideshow' <div> to that of your own. So if your images are in a folder named 'websiteslideshow' you would change the lines that look like below:

                                   

                                   

                                  <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

                                   

                                  to:

                                   

                                  <img src="websiteslideshow/beach1.jpg" width="300" height="300" />

                                   

                                  (obviously replace beach.jpg with the name of your image and enter the correct size in width and height).

                                   

                                   

                                   

                                  <!DOCTYPE html>

                                  <html>

                                  <head>

                                  <title>JQuery Cycle Plugin - Basic Demo</title>

                                  <style type="text/css">

                                  .slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }

                                  .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

                                  </style>

                                  <!-- include jQuery library -->

                                  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

                                  <!-- include Cycle plugin -->

                                  <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

                                  <script type="text/javascript">

                                  $(document).ready(function() {

                                      $('.slideshow').cycle({

                                            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

                                       });

                                  });

                                  </script>

                                  </head>

                                   

                                   

                                  <body>

                                  <div class="slideshow">

                                            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

                                            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />

                                            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

                                            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />

                                            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />

                                       </div>

                                  </body>

                                  </html>

                                   

                                   

                                   

                                  Then change the height and width values in the slideshow css selector to match that of your image size.

                                   

                                  .slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }

                                  • 14. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                    salliyahg Community Member

                                    should i also change this:

                                    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest .js"></ to my location of the jquery page?

                                     

                                    Thanks!

                                    • 15. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                      salliyahg Community Member

                                      Here is the code in my header:

                                       

                                      <!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() {    $('.slideshow').cycle({          fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...     });});</script>

                                       

                                       

                                      Here is the code in the body part of my page:

                                       

                                      <div class="slideshow"><img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" /><img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" /><img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" /><img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" /></div>

                                       

                                       

                                      Here is the code in the jquery site:

                                       


                                      <!DOCTYPE html>

                                      <html>

                                      <head>

                                      <title>JQuery Cycle Plugin - Basic Demo</title>

                                      <style type="text/css">

                                      .slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }

                                      .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

                                      </style>

                                      <!-- include jQuery library -->

                                      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

                                      <!-- include Cycle plugin -->

                                      <script type="text/javascript" src="http://aap.org/international/jquery.cycle.all.latest.js"></script>

                                      <script type="text/javascript">

                                      $(document).ready(function() {

                                          $('.slideshow').cycle({

                                                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

                                           });

                                      });

                                      </script>

                                      </head>



                                      <body>

                                      <div class="slideshow">

                                                <img src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" />

                                                <img src="<img src="img/WebsiteSlideshow/DSCN2051.JPG"  width="592" height="509" />

                                                <img src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" />

                                                <img src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" />

                                                <img src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" />
                                         
                                          <img src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" />
                                         
                                          <img src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" />
                                         
                                          <img src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" />
                                         
                                           <img src="img/WebsiteSlideshow/DSCN2052.JPG" width="592" height="509" />
                                          
                                        </div>

                                      </body>

                                      </html>


                                      // process the args that were passed to the plugin fn
                                      function handleArguments(cont, 1, fade) {
                                      if (cont.cycleStop == undefined)
                                        cont.cycleStop = 0;
                                      if (options === undefined || options === null)
                                        options = {};
                                      if (options.constructor == String) {
                                        switch(options) {
                                        case 'destroy':
                                        case 'stop':
                                         var opts = $(cont).data('cycle.opts');
                                         if (!opts)
                                          return false;
                                         cont.cycleStop++; // callbacks look for change
                                         if (cont.cycleTimeout)
                                          clearTimeout(cont.cycleTimeout);
                                         cont.cycleTimeout = 0;
                                         $(cont).removeData('cycle.opts');
                                         if (options == 'destroy')
                                          destroy(opts);
                                         return false;
                                        case 'toggle':
                                         cont.cyclePause = (cont.cyclePause === 1) ? 0 : 1;
                                         checkInstantResume(cont.cyclePause, arg2, cont);
                                         return false;
                                        case 'pause':
                                         cont.cyclePause = 1;
                                         return false;
                                        case 'resume':
                                         cont.cyclePause = 0;
                                         checkInstantResume(false, arg2, cont);
                                         return false;
                                        case 'prev':
                                        case 'next':
                                         var opts = $(cont).data('cycle.opts');
                                         if (!opts) {
                                          log('options not found, "prev/next" ignored');
                                          return false;
                                         }
                                         $.fn.cycle[options](opts);
                                         return false;
                                        default:
                                         options = { fx: options };
                                        };
                                        return options;
                                      }
                                      else if (options.constructor == Number) {
                                        // go to the requested slide
                                        var num = options;
                                        options = $(cont).data('cycle.opts');
                                        if (!options) {
                                         log('options not found, can not advance slide');
                                         return false;
                                        }
                                        if (num < 0 || num >= options.elements.length) {
                                         log('invalid slide index: ' + num);
                                         return false;
                                        }
                                        options.nextSlide = num;
                                        if (cont.cycleTimeout) {
                                         clearTimeout(cont.cycleTimeout);
                                         cont.cycleTimeout = 0;
                                        }
                                        if (typeof arg2 == 'string')
                                         options.oneTimeFx = arg2;
                                        go(options.elements, options, 1, num >= options.currSlide);
                                        return false;
                                      }
                                      return options;

                                      function checkInstantResume(isPaused, arg2, cont) {
                                        if (!isPaused && arg2 === true) { // resume now!
                                         var options = $(cont).data('cycle.opts');
                                         if (!options) {
                                          log('options not found, can not resume');
                                          return false;
                                         }
                                         if (cont.cycleTimeout) {
                                          clearTimeout(cont.cycleTimeout);
                                          cont.cycleTimeout = 0;
                                         }
                                         go(options.elements, options, 1, (!opts.rev && !opts.backwards));
                                        }
                                      }
                                      };

                                      function removeFilter(el, opts) {
                                      if (!$.support.opacity && opts.cleartype && el.style.filter) {
                                        try { el.style.removeAttribute('filter'); }
                                        catch(smother) {} // handle old opera versions
                                      }
                                      };

                                      // unbind event handlers
                                      function destroy(opts) {
                                      if (opts.next)
                                        $(opts.next).unbind(opts.prevNextEvent);
                                      if (opts.prev)
                                        $(opts.prev).unbind(opts.prevNextEvent);

                                      if (opts.pager || opts.pagerAnchorBuilder)
                                        $.each(opts.pagerAnchors || [], function() {
                                         this.unbind().remove();
                                        });
                                      opts.pagerAnchors = null;
                                      if (opts.destroy) // callback
                                        opts.destroy(opts);
                                      };

                                      // one-time initialization
                                      function buildOptions($cont, $slides, els, options, o) {
                                      // support metadata plugin (v1.0 and v2.0)
                                      var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
                                      if (opts.autostop)
                                        opts.countdown = opts.autostopCount || els.length;

                                      var cont = $cont[0];
                                      $cont.data('cycle.opts', opts);
                                      opts.$cont = $cont;
                                      opts.stopCount = cont.cycleStop;
                                      opts.elements = els;
                                      opts.before = opts.before ? [opts.before] : [];
                                      opts.after = opts.after ? [opts.after] : [];
                                      opts.after.unshift(function(){ opts.busy=0; });

                                      // push some after callbacks
                                      if (!$.support.opacity && opts.cleartype)
                                        opts.after.push(function() { removeFilter(this, opts); });
                                      if (opts.continuous)
                                        opts.after.push(function() { go(els,opts,0,(!opts.rev && !opts.backwards)); });

                                      saveOriginalOpts(opts);

                                      // clearType corrections
                                      if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
                                        clearTypeFix($slides);

                                      // container requires non-static position so that slides can be position within
                                      if ($cont.css('position') == 'static')
                                        $cont.css('position', 'relative');
                                      if (opts.width)
                                        $cont.width(opts.width);
                                      if (opts.height && opts.height != 'auto')
                                        $cont.height(opts.height);

                                      if (opts.startingSlide)
                                        opts.startingSlide = parseInt(opts.startingSlide);
                                      else if (opts.backwards)
                                        opts.startingSlide = els.length - 1;

                                      // if random, mix up the slide array
                                      if (opts.random) {
                                        opts.randomMap = [];
                                        for (var i = 0; i < els.length; i++)
                                         opts.randomMap.push(i);
                                        opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;});
                                        opts.randomIndex = 1;
                                        opts.startingSlide = opts.randomMap[1];
                                      }
                                      else if (opts.startingSlide >= els.length)
                                        opts.startingSlide = 0; // catch bogus input
                                      opts.currSlide = opts.startingSlide || 0;
                                      var first = opts.startingSlide;

                                      // set position and zIndex on all the slides
                                      $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
                                        var z;
                                        if (opts.backwards)
                                         z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
                                        else
                                         z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
                                        $(this).css('z-index', z)
                                      });

                                      // make sure first slide is visible
                                      $(els[first]).css('opacity',1).show(); // opacity bit needed to handle restart use case
                                      removeFilter(els[first], opts);

                                      // stretch slides
                                      if (opts.fit && opts.width)
                                        $slides.width(opts.width);
                                      if (opts.fit && opts.height && opts.height != 'auto')
                                        $slides.height(opts.height);

                                      // stretch container
                                      var reshape = opts.containerResize && !$cont.innerHeight();
                                      if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
                                        var maxw = 0, maxh = 0;
                                        for(var j=0; j < els.length; j++) {
                                         var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
                                         if (!w) w = e.offsetWidth || e.width || $e.attr('width')
                                         if (!h) h = e.offsetHeight || e.height || $e.attr('height');
                                         maxw = w > maxw ? w : maxw;
                                         maxh = h > maxh ? h : maxh;
                                        }
                                        if (maxw > 0 && maxh > 0)
                                         $cont.css({width:maxw+'px',height:maxh+'px'});
                                      }

                                      if (opts.pause)
                                        $cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});

                                      if (supportMultiTransitions(opts) === false)
                                        return false;

                                      // apparently a lot of people use image slideshows without height/width attributes on the images.
                                      // Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
                                      var requeue = false;
                                      options.requeueAttempts = options.requeueAttempts || 0;
                                      $slides.each(function() {
                                        // try to get height/width of each slide
                                        var $el = $(this);
                                        this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0);
                                        this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0);

                                        if ( $el.is('img') ) {
                                         // sigh..  sniffing, hacking, shrugging...  this crappy hack tries to account for what browsers do when
                                         // an image is being downloaded and the markup did not include sizing info (height/width attributes);
                                         // there seems to be some "default" sizes used in this situation
                                         var loadingIE = ($.browser.msie  && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
                                         var loadingFF = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
                                         var loadingOp = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);
                                         var loadingOther = (this.cycleH == 0 && this.cycleW == 0 && !this.complete);
                                         // don't requeue for images that are still loading but have a valid size
                                         if (loadingIE || loadingFF || loadingOp || loadingOther) {
                                          if (o.s && opts.requeueOnImageNotLoaded && ++options.requeueAttempts < 100) { // track retry count so we don't loop forever
                                           log(options.requeueAttempts,' - img slide not loaded, requeuing slideshow: ', this.src, this.cycleW, this.cycleH);
                                           setTimeout(function() {$(o.s,o.c).cycle(options)}, opts.requeueTimeout);
                                           requeue = true;
                                           return false; // break each loop
                                          }
                                          else {
                                           log('could not determine size of image: '+this.src, this.cycleW, this.cycleH);
                                          }
                                         }
                                        }
                                        return true;
                                      });

                                      if (requeue)
                                        return false;

                                      opts.cssBefore = opts.cssBefore || {};
                                      opts.animIn = opts.animIn || {};
                                      opts.animOut = opts.animOut || {};

                                      $slides.not(':eq('+first+')').css(opts.cssBefore);
                                      if (opts.cssFirst)
                                        $($slides[first]).css(opts.cssFirst);

                                      if (opts.timeout) {
                                        opts.timeout = parseInt(opts.timeout);
                                        // ensure that timeout and speed settings are sane
                                        if (opts.speed.constructor == String)
                                         opts.speed = $.fx.speeds[opts.speed] || parseInt(opts.speed);
                                        if (!opts.sync)
                                         opts.speed = opts.speed / 2;
                                       
                                        var buffer = opts.fx == 'shuffle' ? 500 : 250;
                                        while((opts.timeout - opts.speed) < buffer) // sanitize timeout
                                         opts.timeout += opts.speed;
                                      }
                                      if (opts.easing)
                                        opts.easeIn = opts.easeOut = opts.easing;
                                      if (!opts.speedIn)
                                        opts.speedIn = opts.speed;
                                      if (!opts.speedOut)
                                        opts.speedOut = opts.speed;

                                      opts.slideCount = els.length;
                                      opts.currSlide = opts.lastSlide = first;
                                      if (opts.random) {
                                        if (++opts.randomIndex == els.length)
                                         opts.randomIndex = 0;
                                        opts.nextSlide = opts.randomMap[opts.randomIndex];
                                      }
                                      else if (opts.backwards)
                                        opts.nextSlide = opts.startingSlide == 0 ? (els.length-1) : opts.startingSlide-1;
                                      else
                                        opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1;

                                      // run transition init fn
                                      if (!opts.multiFx) {
                                        var init = $.fn.cycle.transitions[opts.fx];
                                        if ($.isFunction(init))
                                         init($cont, $slides, opts);
                                        else if (opts.fx != 'custom' && !opts.multiFx) {
                                         log('unknown transition: ' + opts.fx,'; slideshow terminating');
                                         return false;
                                        }
                                      }

                                      // fire artificial events
                                      var e0 = $slides[first];
                                      if (opts.before.length)
                                        opts.before[0].apply(e0, [e0, e0, opts, true]);
                                      if (opts.after.length > 1)
                                        opts.after[1].apply(e0, [e0, e0, opts, true]);

                                      if (opts.next)
                                        $(opts.next).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?-1:1)});
                                      if (opts.prev)
                                        $(opts.prev).bind(opts.prevNextEvent,function(){return advance(opts,opts.rev?1:-1)});
                                      if (opts.pager || opts.pagerAnchorBuilder)
                                        buildPager(els,opts);

                                      exposeAddSlide(opts, els);

                                      return opts;
                                      };

                                      // save off original opts so we can restore after clearing state
                                      function saveOriginalOpts(opts) {
                                      opts.original = { before: [], after: [] };
                                      opts.original.cssBefore = $.extend({}, opts.cssBefore);
                                      opts.original.cssAfter  = $.extend({}, opts.cssAfter);
                                      opts.original.animIn = $.extend({}, opts.animIn);
                                      opts.original.animOut   = $.extend({}, opts.animOut);
                                      $.each(opts.before, function() { opts.original.before.push(this); });
                                      $.each(opts.after,  function() { opts.original.after.push(this); });
                                      };

                                      function supportMultiTransitions(opts) {
                                      var i, tx, txs = $.fn.cycle.transitions;
                                      // look for multiple effects
                                      if (opts.fx.indexOf(',') > 0) {
                                        opts.multiFx = true;
                                        opts.fxs = opts.fx.replace(/\s*/g,'').split(',');
                                        // discard any bogus effect names
                                        for (i=0; i < opts.fxs.length; i++) {
                                         var fx = opts.fxs[i];
                                         tx = txs[fx];
                                         if (!tx || !txs.hasOwnProperty(fx) || !$.isFunction(tx)) {
                                          log('discarding unknown transition: ',fx);
                                          opts.fxs.splice(i,1);
                                          i--;
                                         }
                                        }
                                        // if we have an empty list then we threw everything away!
                                        if (!opts.fxs.length) {
                                         log('No valid transitions named; slideshow terminating.');
                                         return false;
                                        }
                                      }
                                      else if (opts.fx == 'all') {  // auto-gen the list of transitions
                                        opts.multiFx = true;
                                        opts.fxs = [];
                                        for (p in txs) {
                                         tx = txs[p];
                                         if (txs.hasOwnProperty(p) && $.isFunction(tx))
                                          opts.fxs.push(p);
                                        }
                                      }
                                      if (opts.multiFx && opts.randomizeEffects) {
                                        // munge the fxs array to make effect selection random
                                        var r1 = Math.floor(Math.random() * 20) + 30;
                                        for (i = 0; i < r1; i++) {
                                         var r2 = Math.floor(Math.random() * opts.fxs.length);
                                         opts.fxs.push(opts.fxs.splice(r2,1)[0]);
                                        }
                                        debug('randomized fx sequence: ',opts.fxs);
                                      }
                                      return true;
                                      };

                                      // provide a mechanism for adding slides after the slideshow has started
                                      function exposeAddSlide(opts, els) {
                                      opts.addSlide = function(newSlide, prepend) {
                                        var $s = $(newSlide), s = $s[0];
                                        if (!opts.autostopCount)
                                         opts.countdown++;
                                        els[prepend?'unshift':'push'](s);
                                        if (opts.els)
                                         opts.els[prepend?'unshift':'push'](s); // shuffle needs this
                                        opts.slideCount = els.length;

                                        $s.css('position','absolute');
                                        $s[prepend?'prependTo':'appendTo'](opts.$cont);

                                        if (prepend) {
                                         opts.currSlide++;
                                         opts.nextSlide++;
                                        }

                                        if (!$.support.opacity && opts.cleartype && !opts.cleartypeNoBg)
                                         clearTypeFix($s);

                                        if (opts.fit && opts.width)
                                         $s.width(opts.width);
                                        if (opts.fit && opts.height && opts.height != 'auto')
                                         $slides.height(opts.height);
                                        s.cycleH = (opts.fit && opts.height) ? opts.height : $s.height();
                                        s.cycleW = (opts.fit && opts.width) ? opts.width : $s.width();

                                        $s.css(opts.cssBefore);

                                        if (opts.pager || opts.pagerAnchorBuilder)
                                         $.fn.cycle.createPagerAnchor(els.length-1, s, $(opts.pager), els, opts);

                                        if ($.isFunction(opts.onAddSlide))
                                         opts.onAddSlide($s);
                                        else
                                         $s.hide(); // default behavior
                                      };
                                      }

                                      // reset internal state; we do this on every pass in order to support multiple effects
                                      $.fn.cycle.resetState = function(opts, fx) {
                                      fx = fx || opts.fx;
                                      opts.before = []; opts.after = [];
                                      opts.cssBefore = $.extend({}, opts.original.cssBefore);
                                      opts.cssAfter  = $.extend({}, opts.original.cssAfter);
                                      opts.animIn = $.extend({}, opts.original.animIn);
                                      opts.animOut   = $.extend({}, opts.original.animOut);
                                      opts.fxFn = null;
                                      $.each(opts.original.before, function() { opts.before.push(this); });
                                      $.each(opts.original.after,  function() { opts.after.push(this); });

                                      // re-init
                                      var init = $.fn.cycle.transitions[fx];
                                      if ($.isFunction(init))
                                        init(opts.$cont, $(opts.elements), opts);
                                      };

                                      // this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt
                                      function go(els, opts, manual, fwd) {
                                      // opts.busy is true if we're in the middle of an animation
                                      if (manual && opts.busy && opts.manualTrump) {
                                        // let manual transitions requests trump active ones
                                        debug('manualTrump in go(), stopping active transition');
                                        $(els).stop(true,true);
                                        opts.busy = false;
                                      }
                                      // don't begin another timeout-based transition if there is one active
                                      if (opts.busy) {
                                        debug('transition active, ignoring new tx request');
                                        return;
                                      }

                                      var p = opts.$cont[0], curr = els[opts.currSlide], next = els[opts.nextSlide];

                                      // stop cycling if we have an outstanding stop request
                                      if (p.cycleStop != opts.stopCount || p.cycleTimeout === 0 && !manual)
                                        return;

                                      // check to see if we should stop cycling based on autostop options
                                      if (!manual && !p.cyclePause && !opts.bounce &&
                                        ((opts.autostop && (--opts.countdown <= 0)) ||
                                        (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) {
                                        if (opts.end)
                                         opts.end(opts);
                                        return;
                                      }

                                      // if slideshow is paused, only transition on a manual trigger
                                      var changed = false;
                                      if ((manual || !p.cyclePause) && (opts.nextSlide != opts.currSlide)) {
                                        changed = true;
                                        var fx = opts.fx;
                                        // keep trying to get the slide size if we don't have it yet
                                        curr.cycleH = curr.cycleH || $(curr).height();
                                        curr.cycleW = curr.cycleW || $(curr).width();
                                        next.cycleH = next.cycleH || $(next).height();
                                        next.cycleW = next.cycleW || $(next).width();

                                        // support multiple transition types
                                        if (opts.multiFx) {
                                         if (opts.lastFx == undefined || ++opts.lastFx >= opts.fxs.length)
                                          opts.lastFx = 0;
                                         fx = opts.fxs[opts.lastFx];
                                         opts.currFx = fx;
                                        }

                                        // one-time fx overrides apply to:  $('div').cycle(3,'zoom');
                                        if (opts.oneTimeFx) {
                                         fx = opts.oneTimeFx;
                                         opts.oneTimeFx = null;
                                        }

                                        $.fn.cycle.resetState(opts, fx);

                                        // run the before callbacks
                                        if (opts.before.length)
                                         $.each(opts.before, function(i,o) {
                                          if (p.cycleStop != opts.stopCount) return;
                                          o.apply(next, [curr, next, opts, fwd]);
                                         });

                                        // stage the after callacks
                                        var after = function() {
                                         $.each(opts.after, function(i,o) {
                                          if (p.cycleStop != opts.stopCount) return;
                                          o.apply(next, [curr, next, opts, fwd]);
                                         });
                                        };

                                        debug('tx firing; currSlide: ' + opts.currSlide + '; nextSlide: ' + opts.nextSlide);
                                       
                                        // get ready to perform the transition
                                        opts.busy = 1;
                                        if (opts.fxFn) // fx function provided?
                                         opts.fxFn(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
                                        else if ($.isFunction($.fn.cycle[opts.fx])) // fx plugin ?
                                         $.fn.cycle[opts.fx](curr, next, opts, after, fwd, manual && opts.fastOnEvent);
                                        else
                                         $.fn.cycle.custom(curr, next, opts, after, fwd, manual && opts.fastOnEvent);
                                      }

                                      if (changed || opts.nextSlide == opts.currSlide) {
                                        // calculate the next slide
                                        opts.lastSlide = opts.currSlide;
                                        if (opts.random) {
                                         opts.currSlide = opts.nextSlide;
                                         if (++opts.randomIndex == els.length)
                                          opts.randomIndex = 0;
                                         opts.nextSlide = opts.randomMap[opts.randomIndex];
                                         if (opts.nextSlide == opts.currSlide)
                                          opts.nextSlide = (opts.currSlide == opts.slideCount - 1) ? 0 : opts.currSlide + 1;
                                        }
                                        else if (opts.backwards) {
                                         var roll = (opts.nextSlide - 1) < 0;
                                         if (roll && opts.bounce) {
                                          opts.backwards = !opts.backwards;
                                          opts.nextSlide = 1;
                                          opts.currSlide = 0;
                                         }
                                         else {
                                          opts.nextSlide = roll ? (els.length-1) : opts.nextSlide-1;
                                          opts.currSlide = roll ? 0 : opts.nextSlide+1;
                                         }
                                        }
                                        else { // sequence
                                         var roll = (opts.nextSlide + 1) == els.length;
                                         if (roll && opts.bounce) {
                                          opts.backwards = !opts.backwards;
                                          opts.nextSlide = els.length-2;
                                          opts.currSlide = els.length-1;
                                         }
                                         else {
                                          opts.nextSlide = roll ? 0 : opts.nextSlide+1;
                                          opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
                                         }
                                        }
                                      }
                                      if (changed && opts.pager)
                                        opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);

                                      // stage the next transition
                                      var ms = 0;
                                      if (opts.timeout && !opts.continuous)
                                        ms = getTimeout(els[opts.currSlide], els[opts.nextSlide], opts, fwd);
                                      else if (opts.continuous && p.cyclePause) // continuous shows work off an after callback, not this timer logic
                                        ms = 10;
                                      if (ms > 0)
                                        p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, (!opts.rev && !opts.backwards)) }, ms);
                                      };

                                      // invoked after transition
                                      $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
                                         $(pager).each(function() {
                                             $(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
                                         });
                                      };

                                      // calculate timeout value for current transition
                                      function getTimeout(curr, next, opts, fwd) {
                                      if (opts.timeoutFn) {
                                        // call user provided calc fn
                                        var t = opts.timeoutFn.call(curr,curr,next,opts,fwd);
                                        while ((t - opts.speed) < 250) // sanitize timeout
                                         t += opts.speed;
                                        debug('calculated timeout: ' + t + '; speed: ' + opts.speed);
                                        if (t !== false)
                                         return t;
                                      }
                                      return opts.timeout;
                                      };

                                      // expose next/prev function, caller must pass in state
                                      $.fn.cycle.next = function(opts) { advance(opts, opts.rev?-1:1); };
                                      $.fn.cycle.prev = function(opts) { advance(opts, opts.rev?1:-1);};

                                      // advance slide forward or back
                                      function advance(opts, val) {
                                      var els = opts.elements;
                                      var p = opts.$cont[0], timeout = p.cycleTimeout;
                                      if (timeout) {
                                        clearTimeout(timeout);
                                        p.cycleTimeout = 0;
                                      }
                                      if (opts.random && val < 0) {
                                        // move back to the previously display slide
                                        opts.randomIndex--;
                                        if (--opts.randomIndex == -2)
                                         opts.randomIndex = els.length-2;
                                        else if (opts.randomIndex == -1)
                                         opts.randomIndex = els.length-1;
                                        opts.nextSlide = opts.randomMap[opts.randomIndex];
                                      }
                                      else if (opts.random) {
                                        opts.nextSlide = opts.randomMap[opts.randomIndex];
                                      }
                                      else {
                                        opts.nextSlide = opts.currSlide + val;
                                        if (opts.nextSlide < 0) {
                                         if (opts.nowrap) return false;
                                         opts.nextSlide = els.length - 1;
                                        }
                                        else if (opts.nextSlide >= els.length) {
                                         if (opts.nowrap) return false;
                                         opts.nextSlide = 0;
                                        }
                                      }

                                      var cb = opts.onPrevNextEvent || opts.prevNextClick; // prevNextClick is deprecated
                                      if ($.isFunction(cb))
                                        cb(val > 0, opts.nextSlide, els[opts.nextSlide]);
                                      go(els, opts, 1, val>=0);
                                      return false;
                                      };

                                      function buildPager(els, opts) {
                                      var $p = $(opts.pager);
                                      $.each(els, function(i,o) {
                                        $.fn.cycle.createPagerAnchor(i,o,$p,els,opts);
                                      });
                                      opts.updateActivePagerLink(opts.pager, opts.startingSlide, opts.activePagerClass);
                                      };

                                      $.fn.cycle.createPagerAnchor = function(i, el, $p, els, opts) {
                                      var a;
                                      if ($.isFunction(opts.pagerAnchorBuilder)) {
                                        a = opts.pagerAnchorBuilder(i,el);
                                        debug('pagerAnchorBuilder('+i+', el) returned: ' + a);
                                      }
                                      else
                                        a = '<a href="#">'+(i+1)+'</a>';
                                       
                                      if (!a)
                                        return;
                                      var $a = $(a);
                                      // don't reparent if anchor is in the dom
                                      if ($a.parents('body').length === 0) {
                                        var arr = [];
                                        if ($p.length > 1) {
                                         $p.each(function() {
                                          var $clone = $a.clone(true);
                                          $(this).append($clone);
                                          arr.push($clone[0]);
                                         });
                                         $a = $(arr);
                                        }
                                        else {
                                         $a.appendTo($p);
                                        }
                                      }

                                      opts.pagerAnchors =  opts.pagerAnchors || [];
                                      opts.pagerAnchors.push($a);
                                      $a.bind(opts.pagerEvent, function(e) {
                                        e.preventDefault();
                                        opts.nextSlide = i;
                                        var p = opts.$cont[0], timeout = p.cycleTimeout;
                                        if (timeout) {
                                         clearTimeout(timeout);
                                         p.cycleTimeout = 0;
                                        }
                                        var cb = opts.onPagerEvent || opts.pagerClick; // pagerClick is deprecated
                                        if ($.isFunction(cb))
                                         cb(opts.nextSlide, els[opts.nextSlide]);
                                        go(els,opts,1,opts.currSlide < i); // trigger the trans
                                      //  return false; // <== allow bubble
                                      });

                                      if ( ! /^click/.test(opts.pagerEvent) && !opts.allowPagerClickBubble)
                                        $a.bind('click.cycle', function(){return false;}); // suppress click

                                      if (opts.pauseOnPagerHover)
                                        $a.hover(function() { opts.$cont[0].cyclePause++; }, function() { opts.$cont[0].cyclePause--; } );
                                      };

                                      // helper fn to calculate the number of slides between the current and the next
                                      $.fn.cycle.hopsFromLast = function(opts, fwd) {
                                      var hops, l = opts.lastSlide, c = opts.currSlide;
                                      if (fwd)
                                        hops = c > l ? c - l : opts.slideCount - l;
                                      else
                                        hops = c < l ? l - c : l + opts.slideCount - c;
                                      return hops;
                                      };

                                      // fix clearType problems in ie6 by setting an explicit bg color
                                      // (otherwise text slides look horrible during a fade transition)
                                      function clearTypeFix($slides) {
                                      debug('applying clearType background-color hack');
                                      function hex(s) {
                                        s = parseInt(s).toString(16);
                                        return s.length < 2 ? '0'+s : s;
                                      };
                                      function getBg(e) {
                                        for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) {
                                         var v = $.css(e,'background-color');
                                         if (v.indexOf('rgb') >= 0 ) {
                                          var rgb = v.match(/\d+/g);
                                          return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
                                         }
                                         if (v && v != 'transparent')
                                          return v;
                                        }
                                        return '#ffffff';
                                      };
                                      $slides.each(function() { $(this).css('background-color', getBg(this)); });
                                      };

                                      // reset common props before the next transition
                                      $.fn.cycle.commonReset = function(curr,next,opts,w,h,rev) {
                                      $(opts.elements).not(curr).hide();
                                      opts.cssBefore.opacity = 1;
                                      opts.cssBefore.display = 'block';
                                      if (w !== false && next.cycleW > 0)
                                        opts.cssBefore.width = next.cycleW;
                                      if (h !== false && next.cycleH > 0)
                                        opts.cssBefore.height = next.cycleH;
                                      opts.cssAfter = opts.cssAfter || {};
                                      opts.cssAfter.display = 'none';
                                      $(curr).css('zIndex',opts.slideCount + (rev === true ? 1 : 0));
                                      $(next).css('zIndex',opts.slideCount + (rev === true ? 0 : 1));
                                      };

                                      // the actual fn for effecting a transition
                                      $.fn.cycle.custom = function(curr, next, opts, cb, fwd, speedOverride) {
                                      var $l = $(curr), $n = $(next);
                                      var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut;
                                      $n.css(opts.cssBefore);
                                      if (speedOverride) {
                                        if (typeof speedOverride == 'number')
                                         speedIn = speedOut = speedOverride;
                                        else
                                         speedIn = speedOut = 1;
                                        easeIn = easeOut = null;
                                      }
                                      var fn = function() {$n.animate(opts.animIn, speedIn, easeIn, cb)};
                                      $l.animate(opts.animOut, speedOut, easeOut, function() {
                                        if (opts.cssAfter) $l.css(opts.cssAfter);
                                        if (!opts.sync) fn();
                                      });
                                      if (opts.sync) fn();
                                      };

                                      // transition definitions - only fade is defined here, transition pack defines the rest
                                      $.fn.cycle.transitions = {
                                      fade: function($cont, $slides, opts) {
                                        $slides.not(':eq('+opts.currSlide+')').css('opacity',0);
                                        opts.before.push(function(curr,next,opts) {
                                         $.fn.cycle.commonReset(curr,next,opts);
                                         opts.cssBefore.opacity = 0;
                                        });
                                        opts.animIn    = { opacity: 1 };
                                        opts.animOut   = { opacity: 0 };
                                        opts.cssBefore = { top: 0, left: 0 };
                                      }
                                      };

                                      $.fn.cycle.ver = function() { return ver; };

                                      // override these globally if you like (they are all optional)
                                      $.fn.cycle.defaults = {
                                      fx:     'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
                                      timeout:    4000,  // milliseconds between slide transitions (0 to disable auto advance)
                                      timeoutFn:     null,  // callback for determining per-slide timeout value:  function(currSlideElement, nextSlideElement, options, forwardFlag)
                                      continuous:    0,   // true to start next transition immediately after current one completes
                                      speed:     1000,  // speed of the transition (any valid fx speed value)
                                      speedIn:    null,  // speed of the 'in' transition
                                      speedOut:    null,  // speed of the 'out' transition
                                      next:     null,  // selector for element to use as event trigger for next slide
                                      prev:     null,  // selector for element to use as event trigger for previous slide
                                      // prevNextClick: null,  // @deprecated; please use onPrevNextEvent instead
                                      onPrevNextEvent: null,  // callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
                                      prevNextEvent:'click.cycle',// event which drives the manual transition to the previous or next slide
                                      pager:     null,  // selector for element to use as pager container
                                      //pagerClick   null,  // @deprecated; please use onPagerEvent instead
                                      onPagerEvent:  null,  // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
                                      pagerEvent:   'click.cycle', // name of event which drives the pager navigation
                                      allowPagerClickBubble: false, // allows or prevents click event on pager anchors from bubbling
                                      pagerAnchorBuilder: null, // callback fn for building anchor links:  function(index, DOMelement)
                                      before:     null,  // transition callback (scope set to element to be shown):  function(currSlideElement, nextSlideElement, options, forwardFlag)
                                      after:     null,  // transition callback (scope set to element that was shown):  function(currSlideElement, nextSlideElement, options, forwardFlag)
                                      end:     null,  // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
                                      easing:     null,  // easing method for both in and out transitions
                                      easeIn:     null,  // easing for "in" transition
                                      easeOut:    null,  // easing for "out" transition
                                      shuffle:    null,  // coords for shuffle animation, ex: { top:15, left: 200 }
                                      animIn:     null,  // properties that define how the slide animates in
                                      animOut:    null,  // properties that define how the slide animates out
                                      cssBefore:    null,  // properties that define the initial state of the slide before transitioning in
                                      cssAfter:    null,  // properties that defined the state of the slide after transitioning out
                                      fxFn:     null,  // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
                                      height:    'auto', // container height
                                      startingSlide: 0,   // zero-based index of the first slide to be displayed
                                      sync:     1,   // true if in/out transitions should occur simultaneously
                                      random:     0,   // true for random, false for sequence (not applicable to shuffle fx)
                                      fit:     0,   // force slides to fit container
                                      containerResize: 1,   // resize container to fit largest slide
                                      pause:     0,   // true to enable "pause on hover"
                                      pauseOnPagerHover: 0, // true to pause when hovering over pager link
                                      autostop:    0,   // true to end slideshow after X transitions (where X == slide count)
                                      autostopCount: 0,   // number of transitions (optionally used with autostop to define X)
                                      delay:     0,   // additional delay (in ms) for first transition (hint: can be negative)
                                      slideExpr:    null,  // expression for selecting slides (if something other than all children is required)
                                      cleartype:    !$.support.opacity,  // true if clearType corrections should be applied (for IE)
                                      cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
                                      nowrap:     0,   // true to prevent slideshow from wrapping
                                      fastOnEvent:   0,   // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
                                      randomizeEffects: 1,  // valid when multiple effects are used; true to make the effect sequence random
                                      rev:     0,  // causes animations to transition in reverse
                                      manualTrump:   true,  // causes manual transition to stop an active transition instead of being ignored
                                      requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
                                      requeueTimeout: 250,  // ms delay for requeue
                                      activePagerClass: 'activeSlide', // class name used for the active pager link
                                      updateActivePagerLink: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
                                      backwards:     false  // true to start slideshow at last slide and move backwards through the stack
                                      };

                                      })(jQuery);


                                      /*!
                                      * jQuery Cycle Plugin Transition Definitions
                                      * This script is a plugin for the jQuery Cycle Plugin
                                      * Examples and documentation at: http://malsup.com/jquery/cycle/
                                      * Copyright (c) 2007-2010 M. Alsup
                                      * Version:  2.72
                                      * Dual licensed under the MIT and GPL licenses:
                                      * http://www.opensource.org/licenses/mit-license.php
                                      * http://www.gnu.org/licenses/gpl.html
                                      */
                                      (function($) {

                                      //
                                      // These functions define one-time slide initialization for the named
                                      // transitions. To save file size feel free to remove any of these that you
                                      // don't need.
                                      //
                                      $.fn.cycle.transitions.none = function($cont, $slides, opts) {
                                      opts.fxFn = function(curr,next,opts,after){
                                        $(next).show();
                                        $(curr).hide();
                                        after();
                                      };
                                      }

                                      // scrollUp/Down/Left/Right
                                      $.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) {
                                      $cont.css('overflow','hidden');
                                      opts.before.push($.fn.cycle.commonReset);
                                      var h = $cont.height();
                                      opts.cssBefore ={ top: h, left: 0 };
                                      opts.cssFirst = { top: 0 };
                                      opts.animIn   = { top: 0 };
                                      opts.animOut  = { top: -h };
                                      };
                                      $.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) {
                                      $cont.css('overflow','hidden');
                                      opts.before.push($.fn.cycle.commonReset);
                                      var h = $cont.height();
                                      opts.cssFirst = { top: 0 };
                                      opts.cssBefore= { top: -h, left: 0 };
                                      opts.animIn   = { top: 0 };
                                      opts.animOut  = { top: h };
                                      };
                                      $.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) {
                                      $cont.css('overflow','hidden');
                                      opts.before.push($.fn.cycle.commonReset);
                                      var w = $cont.width();
                                      opts.cssFirst = { left: 0 };
                                      opts.cssBefore= { left: w, top: 0 };
                                      opts.animIn   = { left: 0 };
                                      opts.animOut  = { left: 0-w };
                                      };
                                      $.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) {
                                      $cont.css('overflow','hidden');
                                      opts.before.push($.fn.cycle.commonReset);
                                      var w = $cont.width();
                                      opts.cssFirst = { left: 0 };
                                      opts.cssBefore= { left: -w, top: 0 };
                                      opts.animIn   = { left: 0 };
                                      opts.animOut  = { left: w };
                                      };
                                      $.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {
                                      $cont.css('overflow','hidden').width();
                                      opts.before.push(function(curr, next, opts, fwd) {
                                        $.fn.cycle.commonReset(curr,next,opts);
                                        opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
                                        opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
                                      });
                                      opts.cssFirst = { left: 0 };
                                      opts.cssBefore= { top: 0 };
                                      opts.animIn   = { left: 0 };
                                      opts.animOut  = { top: 0 };
                                      };
                                      $.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) {
                                      $cont.css('overflow','hidden');
                                      opts.before.push(function(curr, next, opts, fwd) {
                                        $.fn.cycle.commonReset(curr,next,opts);
                                        opts.cssBefore.top = fwd ? (1-next.cycleH) : (next.cycleH-1);
                                        opts.animOut.top = fwd ? curr.cycleH : -curr.cycleH;
                                      });
                                      opts.cssFirst = { top: 0 };
                                      opts.cssBefore= { left: 0 };
                                      opts.animIn   = { top: 0 };
                                      opts.animOut  = { left: 0 };
                                      };

                                      // slideX/slideY
                                      $.fn.cycle.transitions.slideX = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $(opts.elements).not(curr).hide();
                                        $.fn.cycle.commonReset(curr,next,opts,false,true);
                                        opts.animIn.width = next.cycleW;
                                      });
                                      opts.cssBefore = { left: 0, top: 0, width: 0 };
                                      opts.animIn  = { width: 'show' };
                                      opts.animOut = { width: 0 };
                                      };
                                      $.fn.cycle.transitions.slideY = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $(opts.elements).not(curr).hide();
                                        $.fn.cycle.commonReset(curr,next,opts,true,false);
                                        opts.animIn.height = next.cycleH;
                                      });
                                      opts.cssBefore = { left: 0, top: 0, height: 0 };
                                      opts.animIn  = { height: 'show' };
                                      opts.animOut = { height: 0 };
                                      };

                                      // shuffle
                                      $.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
                                      var i, w = $cont.css('overflow', 'visible').width();
                                      $slides.css({left: 0, top: 0});
                                      opts.before.push(function(curr,next,opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
                                      });
                                      // only adjust speed once!
                                      if (!opts.speedAdjusted) {
                                        opts.speed = opts.speed / 2; // shuffle has 2 transitions
                                        opts.speedAdjusted = true;
                                      }
                                      opts.random = 0;
                                      opts.shuffle = opts.shuffle || {left:-w, top:15};
                                      opts.els = [];
                                      for (i=0; i < $slides.length; i++)
                                        opts.els.push($slides[i]);

                                      for (i=0; i < opts.currSlide; i++)
                                        opts.els.push(opts.els.shift());

                                      // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
                                      opts.fxFn = function(curr, next, opts, cb, fwd) {
                                        var $el = fwd ? $(curr) : $(next);
                                        $(next).css(opts.cssBefore);
                                        var count = opts.slideCount;
                                        $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
                                         var hops = $.fn.cycle.hopsFromLast(opts, fwd);
                                         for (var k=0; k < hops; k++)
                                          fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
                                         if (fwd) {
                                          for (var i=0, len=opts.els.length; i < len; i++)
                                           $(opts.els[i]).css('z-index', len-i+count);
                                         }
                                         else {
                                          var z = $(curr).css('z-index');
                                          $el.css('z-index', parseInt(z)+1+count);
                                         }
                                         $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
                                          $(fwd ? this : curr).hide();
                                          if (cb) cb();
                                         });
                                        });
                                      };
                                      opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
                                      };

                                      // turnUp/Down/Left/Right
                                      $.fn.cycle.transitions.turnUp = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,false);
                                        opts.cssBefore.top = next.cycleH;
                                        opts.animIn.height = next.cycleH;
                                      });
                                      opts.cssFirst  = { top: 0 };
                                      opts.cssBefore = { left: 0, height: 0 };
                                      opts.animIn    = { top: 0 };
                                      opts.animOut   = { height: 0 };
                                      };
                                      $.fn.cycle.transitions.turnDown = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,false);
                                        opts.animIn.height = next.cycleH;
                                        opts.animOut.top   = curr.cycleH;
                                      });
                                      opts.cssFirst  = { top: 0 };
                                      opts.cssBefore = { left: 0, top: 0, height: 0 };
                                      opts.animOut   = { height: 0 };
                                      };
                                      $.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,false,true);
                                        opts.cssBefore.left = next.cycleW;
                                        opts.animIn.width = next.cycleW;
                                      });
                                      opts.cssBefore = { top: 0, width: 0  };
                                      opts.animIn    = { left: 0 };
                                      opts.animOut   = { width: 0 };
                                      };
                                      $.fn.cycle.transitions.turnRight = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,false,true);
                                        opts.animIn.width = next.cycleW;
                                        opts.animOut.left = curr.cycleW;
                                      });
                                      opts.cssBefore = { top: 0, left: 0, width: 0 };
                                      opts.animIn    = { left: 0 };
                                      opts.animOut   = { width: 0 };
                                      };

                                      // zoom
                                      $.fn.cycle.transitions.zoom = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,false,false,true);
                                        opts.cssBefore.top = next.cycleH/2;
                                        opts.cssBefore.left = next.cycleW/2;
                                        opts.animIn    = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
                                        opts.animOut   = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 };
                                      });
                                      opts.cssFirst = { top:0, left: 0 };
                                      opts.cssBefore = { width: 0, height: 0 };
                                      };

                                      // fadeZoom
                                      $.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,false,false);
                                        opts.cssBefore.left = next.cycleW/2;
                                        opts.cssBefore.top = next.cycleH/2;
                                        opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH };
                                      });
                                      opts.cssBefore = { width: 0, height: 0 };
                                      opts.animOut  = { opacity: 0 };
                                      };

                                      // blindX
                                      $.fn.cycle.transitions.blindX = function($cont, $slides, opts) {
                                      var w = $cont.css('overflow','hidden').width();
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts);
                                        opts.animIn.width = next.cycleW;
                                        opts.animOut.left   = curr.cycleW;
                                      });
                                      opts.cssBefore = { left: w, top: 0 };
                                      opts.animIn = { left: 0 };
                                      opts.animOut  = { left: w };
                                      };
                                      // blindY
                                      $.fn.cycle.transitions.blindY = function($cont, $slides, opts) {
                                      var h = $cont.css('overflow','hidden').height();
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts);
                                        opts.animIn.height = next.cycleH;
                                        opts.animOut.top   = curr.cycleH;
                                      });
                                      opts.cssBefore = { top: h, left: 0 };
                                      opts.animIn = { top: 0 };
                                      opts.animOut  = { top: h };
                                      };
                                      // blindZ
                                      $.fn.cycle.transitions.blindZ = function($cont, $slides, opts) {
                                      var h = $cont.css('overflow','hidden').height();
                                      var w = $cont.width();
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts);
                                        opts.animIn.height = next.cycleH;
                                        opts.animOut.top   = curr.cycleH;
                                      });
                                      opts.cssBefore = { top: h, left: w };
                                      opts.animIn = { top: 0, left: 0 };
                                      opts.animOut  = { top: h, left: w };
                                      };

                                      // growX - grow horizontally from centered 0 width
                                      $.fn.cycle.transitions.growX = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,false,true);
                                        opts.cssBefore.left = this.cycleW/2;
                                        opts.animIn = { left: 0, width: this.cycleW };
                                        opts.animOut = { left: 0 };
                                      });
                                      opts.cssBefore = { width: 0, top: 0 };
                                      };
                                      // growY - grow vertically from centered 0 height
                                      $.fn.cycle.transitions.growY = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,false);
                                        opts.cssBefore.top = this.cycleH/2;
                                        opts.animIn = { top: 0, height: this.cycleH };
                                        opts.animOut = { top: 0 };
                                      });
                                      opts.cssBefore = { height: 0, left: 0 };
                                      };

                                      // curtainX - squeeze in both edges horizontally
                                      $.fn.cycle.transitions.curtainX = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,false,true,true);
                                        opts.cssBefore.left = next.cycleW/2;
                                        opts.animIn = { left: 0, width: this.cycleW };
                                        opts.animOut = { left: curr.cycleW/2, width: 0 };
                                      });
                                      opts.cssBefore = { top: 0, width: 0 };
                                      };
                                      // curtainY - squeeze in both edges vertically
                                      $.fn.cycle.transitions.curtainY = function($cont, $slides, opts) {
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,false,true);
                                        opts.cssBefore.top = next.cycleH/2;
                                        opts.animIn = { top: 0, height: next.cycleH };
                                        opts.animOut = { top: curr.cycleH/2, height: 0 };
                                      });
                                      opts.cssBefore = { left: 0, height: 0 };
                                      };

                                      // cover - curr slide covered by next slide
                                      $.fn.cycle.transitions.cover = function($cont, $slides, opts) {
                                      var d = opts.direction || 'left';
                                      var w = $cont.css('overflow','hidden').width();
                                      var h = $cont.height();
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts);
                                        if (d == 'right')
                                         opts.cssBefore.left = -w;
                                        else if (d == 'up')
                                         opts.cssBefore.top = h;
                                        else if (d == 'down')
                                         opts.cssBefore.top = -h;
                                        else
                                         opts.cssBefore.left = w;
                                      });
                                      opts.animIn = { left: 0, top: 0};
                                      opts.animOut = { opacity: 1 };
                                      opts.cssBefore = { top: 0, left: 0 };
                                      };

                                      // uncover - curr slide moves off next slide
                                      $.fn.cycle.transitions.uncover = function($cont, $slides, opts) {
                                      var d = opts.direction || 'left';
                                      var w = $cont.css('overflow','hidden').width();
                                      var h = $cont.height();
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
                                        if (d == 'right')
                                         opts.animOut.left = w;
                                        else if (d == 'up')
                                         opts.animOut.top = -h;
                                        else if (d == 'down')
                                         opts.animOut.top = h;
                                        else
                                         opts.animOut.left = -w;
                                      });
                                      opts.animIn = { left: 0, top: 0 };
                                      opts.animOut = { opacity: 1 };
                                      opts.cssBefore = { top: 0, left: 0 };
                                      };

                                      // toss - move top slide and fade away
                                      $.fn.cycle.transitions.toss = function($cont, $slides, opts) {
                                      var w = $cont.css('overflow','visible').width();
                                      var h = $cont.height();
                                      opts.before.push(function(curr, next, opts) {
                                        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
                                        // provide default toss settings if animOut not provided
                                        if (!opts.animOut.left && !opts.animOut.top)
                                         opts.animOut = { left: w*2, top: -h/2, opacity: 0 };
                                        else
                                         opts.animOut.opacity = 0;
                                      });
                                      opts.cssBefore = { left: 0, top: 0 };
                                      opts.animIn = { left: 0 };
                                      };

                                      // wipe - clip animation
                                      $.fn.cycle.transitions.wipe = function($cont, $slides, opts) {
                                      var w = $cont.css('overflow','hidden').width();
                                      var h = $cont.height();
                                      opts.cssBefore = opts.cssBefore || {};
                                      var clip;
                                      if (opts.clip) {
                                        if (/l2r/.test(opts.clip))
                                         clip = 'rect(0px 0px '+h+'px 0px)';
                                        else if (/r2l/.test(opts.clip))
                                         clip = 'rect(0px '+w+'px '+h+'px '+w+'px)';
                                        else if (/t2b/.test(opts.clip))
                                         clip = 'rect(0px '+w+'px 0px 0px)';
                                        else if (/b2t/.test(opts.clip))
                                         clip = 'rect('+h+'px '+w+'px '+h+'px 0px)';
                                        else if (/zoom/.test(opts.clip)) {
                                         var top = parseInt(h/2);
                                         var left = parseInt(w/2);
                                         clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)';
                                        }
                                      }

                                      opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)';

                                      var d = opts.cssBefore.clip.match(/(\d+)/g);
                                      var t = parseInt(d[0]), r = parseInt(d[1]), b = parseInt(d[2]), l = parseInt(d[3]);

                                      opts.before.push(function(curr, next, opts) {
                                        if (curr == next) return;
                                        var $curr = $(curr), $next = $(next);
                                        $.fn.cycle.commonReset(curr,next,opts,true,true,false);
                                        opts.cssAfter.display = 'block';

                                        var step = 1, count = parseInt((opts.speedIn / 13)) - 1;
                                        (function f() {
                                         var tt = t ? t - parseInt(step * (t/count)) : 0;
                                         var ll = l ? l - parseInt(step * (l/count)) : 0;
                                         var bb = b < h ? b + parseInt(step * ((h-b)/count || 1)) : h;
                                         var rr = r < w ? r + parseInt(step * ((w-r)/count || 1)) : w;
                                         $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' });
                                         (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none');
                                        })();
                                      });
                                      opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
                                      opts.animIn    = { left: 0 };
                                      opts.animOut   = { left: 0 };
                                      };

                                      })(jQuery);

                                       

                                      I still cannot get it to work

                                      • 16. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                        Nancy O. MVP

                                        Download the Cycle plug-in script and save it to your local site folder.  I prefer to keep scripts in my Scripts folder but that's up to you.

                                        http://jquery.malsup.com/cycle/download.html

                                         

                                        jQuery has 3 basic parts to it:

                                        • the core code library which you ref in your <head>
                                        • the plug-in script & css (if any) which you ref in your <head>
                                        • the function code inside <script> tags -- I prefer to put this above closing </body> tag.

                                         

                                        <head>

                                         

                                        <!-- jQuery latest core library -->

                                        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

                                        </script>

                                         

                                        <!-- Cycle plugin -->

                                        <script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>

                                         

                                        </head>

                                         

                                         

                                        <body>

                                         

                                        <div class="slideshow">

                                             <img src="image1.jpg" width="200" height="200" alt="description" />

                                             <img src="image2.jpg" width="200" height="200" alt="description" />

                                             <img src="image3.jpg" width="200" height="200" alt="description" />

                                             <img src="image4.jpg" width="200" height="200" alt="description" />

                                        </div>

                                         

                                        <!--Cycle function code-->

                                        <script type="text/javascript">

                                        $(document).ready(function() {
                                            $('.slideshow').cycle({
                                        fx: 'fade'
                                        });
                                        });
                                        </script>

                                         

                                        </body>

                                         

                                        That's all there is to it.  If you want anything fancier, look at Cycle's More Demos & Examples near the bottom of their home page.

                                         

                                        Be sure to upload page, images and scripts to your web site.

                                         

                                        Nancy O.

                                        Alt-Web Design & Publishing

                                        Web | Graphics | Print | Media  Specialists 

                                        http://alt-web.com/

                                        • 17. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                          iodress Community Member

                                          thanks for the nice information.it help me a lot

                                          <a href="http://www.vicyc.com/discount-mother-of-the-bride-dresses-c-84.html">discount Mother of The Bride Dresses</a>|<a href="http://www.vicyc.com/special-occasion-dresses-c-37.html">Special Occasion Dresses</a>

                                          • 18. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                            osgood_ MVP

                                            salliyahg wrote:

                                             

                                            should i also change this:

                                            <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest .js"></ to my location of the jquery page?

                                             

                                            Thanks!

                                             

                                            As Nancy pointed out in a later reply its best to grab the js scripts from the urls and then save them to your local folder just in case they get taken down at any stage by the person who provided the demo. My code is for demonstration purposes only........you need to get the js scripts, save them and change the link to them.

                                            • 19. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                              salliyahg Community Member

                                              Sorry, I still cannot get it to work.

                                               

                                              I copied everything the same except I put this in the header:

                                               

                                              <!-- jQuery latest core library -->

                                               

                                              <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js">

                                               

                                              </script>

                                               

                                               

                                               

                                              <!-- Cycle plugin -->

                                               

                                              <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js"></script>

                                               

                                               

                                               

                                              I changed the name of my pictures for the body section.

                                               

                                               

                                              I also saved this as my java script site:

                                               

                                              http://malsup.github.com/jquery.cycle.lite.js

                                              • 20. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                Nancy O. MVP

                                                Please post the URL to your Test page. 

                                                 

                                                 

                                                Nancy O.

                                                • 21. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                  salliyahg Community Member

                                                  Do you mean for the main website? it's http://www2.aap.org/international/globalimmunizations1.html.  However, the site is not yet live so you will not be able to see it.

                                                  • 22. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                    osgood_ MVP

                                                    salliyahg wrote:

                                                     

                                                    Sorry, I still cannot get it to work.

                                                     

                                                    I copied everything the same except I put this in the header:

                                                     

                                                    <!-- jQuery latest core library -->

                                                     

                                                    <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js">

                                                     

                                                    </script>

                                                     

                                                     

                                                    <!-- Cycle plugin -->

                                                     

                                                    <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js"></script>

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    I don't know what jquery.cycle.lite.js is (that wasn't in the code I gave you) Where did you get that from?

                                                    salliyahg wrote:

                                                     

                                                     

                                                     

                                                    I also saved this as my java script site:

                                                     

                                                    http://malsup.github.com/jquery.cycle.lite.js

                                                     

                                                    I'm also not sure what you mean by 'you saved this as my javascriot site'?

                                                    • 23. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                      salliyahg Community Member

                                                      I did get it from your post: I downloaded the code from http://jquery.malsup.com/cycle/download.html (I just used cycle lite instad of the regular cycle)

                                                      • 24. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                        osgood_ MVP

                                                        Do a simple test (copy the code below from <!DOCTYPE html> onwards and paste it into a new Dreamweaver document) save it and view it in a browser.

                                                         

                                                        IMPORTANT: I think the reason it most lilkely was not working first time around is due to the forum creating a space between the .js extention in the script link below. Hopefully its not there now but if it is close it up.

                                                        http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest .js

                                                         

                                                         

                                                        <!DOCTYPE html>

                                                        <html>

                                                        <head>

                                                        <title>JQuery Cycle Plugin - Basic Demo</title>

                                                        <style type="text/css">

                                                        .slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; }

                                                        .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

                                                        </style>

                                                        <!-- include jQuery library -->

                                                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

                                                        <!-- include Cycle plugin -->

                                                        <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

                                                        <script type="text/javascript">

                                                        $(document).ready(function() {

                                                            $('.slideshow').cycle({

                                                                  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

                                                             });

                                                        });

                                                        </script>

                                                        </head>

                                                         

                                                         

                                                        <body>

                                                        <div class="slideshow">

                                                                  <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

                                                                  <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />

                                                                  <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

                                                                  <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />

                                                                  <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />

                                                             </div>

                                                        </body>

                                                        </html>

                                                        • 25. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                          osgood_ MVP

                                                          The space IS still there  make sure its closed - latest.js

                                                           

                                                          http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest .js

                                                           

                                                          Once you have established that is working you can then add you own images

                                                          • 26. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                            salliyahg Community Member

                                                            tried that and it not only didnt work but made a lot of the other code on the page disappear as i loaded it in IE.

                                                            • 27. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                              osgood_ MVP

                                                              Can you paste your pages code along with any css it uses here or upload it somewhere so we can see what you are trying to do.

                                                              • 28. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                salliyahg Community Member

                                                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                                <html xmlns="http://www.w3.org/1999/xhtml">
                                                                <head>
                                                                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                                                <title>Untitled Document</title>
                                                                <style type="text/css">
                                                                <!--
                                                                .style42 {
                                                                color:#663333;
                                                                }
                                                                .style43 {
                                                                color:#663300;
                                                                }
                                                                .style38 {
                                                                font-size:small;
                                                                }
                                                                .style44 {
                                                                font-family:Arial, Helvetica, sans-serif;
                                                                }
                                                                .style41 {
                                                                color:#336699;
                                                                }
                                                                .style49 {
                                                                color:#000000;
                                                                font-family:Arial, Helvetica, sans-serif;
                                                                }
                                                                .style48 {
                                                                color:#336699;
                                                                font-family:Arial, Helvetica, sans-serif;
                                                                }
                                                                .style45 {
                                                                font-size:small;
                                                                font-family:Arial, Helvetica, sans-serif;
                                                                }
                                                                .style37 {
                                                                font-size:x-large;
                                                                }
                                                                .style47 {
                                                                font:bold medium Arial;
                                                                font-size:small;
                                                                }
                                                                .style50 {
                                                                font-size:x-large;
                                                                font-family:Arial, Helvetica, sans-serif;
                                                                }
                                                                .style16 {
                                                                font-family:Georgia, "Times New Roman", Times, serif;
                                                                }
                                                                -->
                                                                </style>

                                                                <!-- jQuery latest core library -->

                                                                <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js">

                                                                </script>

                                                                 

                                                                <!-- Cycle plugin -->

                                                                <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js"></script>

                                                                </head>

                                                                <body>
                                                                <ul id="breadcrumbs">
                                                                  <li><a href="Homefile:///C|/Users/sglass/Documents/globalpartnershipsnew/index.html">Home</a> &raquo; </li>
                                                                  <li><a href="http://www.aap.org/international/initiatives.html" target="_blank">Initiatives</a> &raquo; </li>
                                                                  <li>Global Immunizations </li>
                                                                </ul>
                                                                <div id="left_sidebar"><img alt="2" src="img/initiatives.jpg" width="222" height="400" />&gt;</div>
                                                                <!-- end sidebar -->
                                                                <div id="content">
                                                                  <h1 class="style42">Global <span class="style43">Immunizations </span></h1>
                                                                  <p class="style38"><span class="style44"><a class="style41" href="#currentissues">Current Issues</a> || <a class="style41" href="#AAPsGoals">AAP's Goals</a> || <a class="style41" href="#GetInvolved">Get   Involved</a> </span><span class="style49 ">|| <a class="style41" href="#News">News</a> || <a class="style41" href="http://www2.aap.org/international/globalresources.html" target="_blank">Resources</a> || </span><a class="style48" href="Contact" _mce_href="mailto:globalvaccines@aap.org">Contact">mailto:globalvaccines@aap.org">Contact Us</a></p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"><a id="CurrentIssues" name="CurrentIssues"></a><span class="style37">Current Issues in Global Immunizations </span></p>
                                                                  <p class="style45"> </p>
                                                                  <div>
                                                                    <div align="left">
                                                                      <p><span class="style47">Global Causes of Child Mortality</span></p>
                                                                    </div>
                                                                  </div>
                                                                  <p class="style45"><img alt="chartandcapt" align="left" src="img/Small_cause_of_VPDs_deaths.jpg" width="430" height="239" />Immunization prevents about 2.5 million deaths a year   globally.  It is one of the most successful and cost-effective life saving   interventions of the past century.  Without immunizations, hundreds of thousands   of children and adults would die needless deaths or suffer lifelong effects from   diseases such as diphtheria, polio, measles, mumps, and smallpox. </p>
                                                                  <p class="style45">As seen in the chart to the left, WHO estimates that 1.5 million deaths among children under five years of age were due to vaccine preventable diseases, with rotavirus and pneumoccocal disease being the top killers---this represents 17% of global total mortality for children under five. </p>
                                                                </div>
                                                                <p class="style45">In the United States, we have a successful immunization program   with coverage rates over 90% for all childhood vaccines.  Many state governments   operate programs to provide access to low-cost or free vaccines for those   children and adults who cannot afford them, while the federal government sets   aside funding for immunization programs in the US and also for immunization   research and safety programs.</p>
                                                                <p class="style45">Many other countries around the world are not able to maintain   the level of immunization that the US has. The American Academy of Pediatrics   (AAP) advocates for the health of all children, including those outside of   America.  With this in mind, the AAP recently has begun to expand its efforts to   inform and advocate for global immunization issues.  There are many actions   pediatricians can take locally while thinking globally.</p>
                                                                <p class="style45">As healthcare professionals know, infectious diseases have no   boundaries.  With our world increasingly becoming smaller and smaller, we must   be aware of what is happening globally, specifically in terms of disease   outbreaks.  One of the best ways to eliminate disease outbreaks or   reintroduction of diseases in the US is to make sure all children in the world   have access to immunizations.  The first decade of the 21st century has been the   most productive in the history of vaccine development. Unfortunately, one in 5   children globally do not have access to the important benefits that vaccines   provide. <a class="style41" href="Learn" _mce_href="http://www2.aap.org/international/initiatives/currentneeds">Learn">http://www2 .aap.org/international/initiatives/currentneeds">Learn more</a> about the curent impact that vaccines have had globally along with the   challenges we still face. </p>
                                                                <p class="style45">It is important to understand that keeping children healthy   across the world reduces health care costs associated with treatment of vaccine   preventable illness to not only the family and individual but to the country.    Additionally, by keeping children healthy, immunization helps extend life   expectancy and the time spent on productive activity, thereby contributing to   poverty reduction, which also is a priority for the health of children and   families, particularly in developing countries.<strong> </strong><a class="style41" title="read more" href="http://www2.aap.org/international/globalimportance.html" target="_blank">Read more</a> about the importance of international   immunizations.</p>
                                                                <p class="style45"> </p>
                                                                <p class="style45"> </p>
                                                                <p class="style45"><a id="AAPsGoals" name="AAPsGoals"></a><span class="style37">AAP's   Goals </span></p>
                                                                <p class="style45">The AAP understands the importance of global immunizations and   is dedicated to health of all children, no matter where they are born.  With   this in mind, we recently proposed and were <a class="style41" title="Grant" href="http://aapnews.aappublications.org/content/33/2/7.1.full" target="_blank">awarded a grant</a> from the Bill and Melinda Gates Foundation to   focus efforts on increasing global immunization awareness and advocacy.</p>
                                                                <p class="style45">The Academy&rsquo;s role will center on fostering partnerships to   support global immunization initiatives and programs.  The AAP intends to   provide you as pediatricians with tools and materials to be advocates locally   for these issues.  The AAP intends to promote strategies among pediatric leaders   in both developed and developing countries for advocacy</p>
                                                                <p class="style45">The AAP also will be working closely with its Chapter   International Immunization Champions and other FAAP Advocates to accomplish its   goals. </p>
                                                                <p class="style45">Additionally, the AAP is a partner in many global vaccine   campaigns.  Learn more about our involvement with <a class="style41" title="shotatlifeaap" href="http://www2.aap.org/immunization/about/globalshotatlife.html" target="_blank">Shot@Life</a> and <a class="style41" title="ONEaap" href="http://www2.aap.org/immunization/about/globalONE.html" target="_blank">ONE</a>. </p>
                                                                <p class="style45"> </p>
                                                                <p class="style45"> </p>
                                                                <p class="style45"> </p>
                                                                <p class="style50"><a id="News" name="News"></a>News</p>
                                                                <p class="style45">The AAP President-Elect attends the US Government Call to   Action for Child Survival in June 2012, <a class="style41" href="full" _mce_href="http://5thbday.usaid.gov/pages/ResponseSub/Event.aspx">full">http://5thbday.us aid.gov/pages/ResponseSub/Event.aspx">full story... </a>. </p>
                                                                <p class="style45">AAP endorses WHO recommendation to retain use of thimerosal ( <a class="style41" title="AAPThimerosal" href="http://aapnews.aappublications.org/content/early/2012/06/01/aapnews.20120601-1" target="_blank">full story...</a> ) and Thiomersal Vaccines debate ( <a href="http://www.thelancet.com/journals/lancet/article/PIIS0140-6736(12)61002-2/fulltext?rss=yes" target="_blank" class="style41">full story... </a>)</p>
                                                                <p class="style45">65th World Health Assembly and the Decade of Global Vaccines   Plan <a title="65th world health assembly" href="http://www.gavialliance.org/library/news/gavi-features/2012/194-countries-endorse-landmark -global-vaccine-action-plan/" target="_blank"><span class="style41">full story..</span>.</a> </p>
                                                                <p class="style45">Global Polio Eradication Initiative <a class="style41" title="Polio Eradication" href="http://www.polioeradication.org/tabid/461/iid/219/Default.aspx" target="_blank">full story...</a> </p>
                                                                <p class="style16"><span class="style45">AAP among newest partners of the Measles   &amp; Rubella Initiative <a class="style41" title="Measles and Rubella Initiative" href="http://us2.campaign-archive2.com/?u=4d894438a86d1a64376ab0629&amp;id=9045940b09&amp;e=e5cc cc5797" target="_blank">full story..</a></span></p>
                                                                <p class="style45"> </p>
                                                                <p class="style45"> </p>
                                                                <p class="style45"><a id="GetInvolved" name="GetInvolved"></a><span class="style37">Get   Involved!</span></p>

                                                                <div class="slideshow">
                                                                <img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" /><img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" /><img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" /><img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" /><span class="slideshow"><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2052.JPG" width="592
                                                                " height="509" />
                                                                </div>

                                                                <!--Cycle function code-->

                                                                <script type="text/javascript">

                                                                $(document).ready(function() {
                                                                    $('.slideshow').cycle({
                                                                fx: 'fade'
                                                                });
                                                                });
                                                                </script>

                                                                </span>
                                                                <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>
                                                                <p class="style45"><em>&ldquo;Pediatricians should support global immunization to reduce   the risk of disease, disability, and death from vaccine-preventable diseases in   children living in other countries as well as reducing the risk that these   infectious agents will be imported back to the United States and cause   outbreaks.&rdquo; Dr. Walter Orenstein, MD, FAAP</em></p>
                                                                <ul class="style45">
                                                                  <li>
                                                                    <p>Become an AAP Global Immunization Champion.  Email <a class="style41" href="globalvaccines@aap.orgmailto:globalvaccines@aap.org">globalvaccines@aap.org</a> to sign up and   learn more.</p>
                                                                  </li>
                                                                  <li>
                                                                    <p>Educate patients on global immunization issues by making sure patients who   travel are up to date on their immunizations and get any additional vaccines   recommended for traveling abroad.</p>
                                                                  </li>
                                                                  <li>
                                                                    <p>Become involved in local <a class="style41" title="campaigns or organizations" href="http://www2.aap.org/international/globalresources.html" target="_blank">campaigns or organizations</a> that are fighting for global   immunization issues.  As a pediatrician, you are a useful resource of technical   medical information. </p>
                                                                  </li>
                                                                  <li>
                                                                    <p>Contact AAP about becoming involved in advocacy <em>(link to document) </em>about global immunization issues to the federal government or your state   government.</p>
                                                                  </li>
                                                                  <li>
                                                                    <p>Write letters to the editor <em>(link to document) </em>or submit Op/Ed   articles to your local media outlets.</p>
                                                                  </li>
                                                                  <li>Continue to look back at this page for up-to-date resources and news<br />
                                                                    . </li>
                                                                </ul>
                                                                <p class="style45">Contact your AAP Chapter Global Immunization Champion <em>(link   coming soon)</em> or the AAP <a class="style41" href="Manager" _mce_href="mailto:globalvaccines@aap.org">Manager">mailto:globalvaccines@aap.org">Manager of Global Immunization Programs</a> for more information.</p>
                                                                <p class="style45"> </p>
                                                                <p class="style50"> </p>
                                                                <p> </p>
                                                                <p class="style45">For more information, see our <a class="style41" href="resourceshttp://www2.aap.org/international/globalresources.html">resources</a> page</p>
                                                                </body>
                                                                </html>

                                                                • 29. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                  salliyahg Community Member

                                                                  Here's the JS:

                                                                   

                                                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                                  <html xmlns="http://www.w3.org/1999/xhtml">
                                                                  <head>
                                                                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                                                  <title>Untitled Document</title>
                                                                  <style type="text/css">
                                                                  <!--
                                                                  .style42 {
                                                                  color:#663333;
                                                                  }
                                                                  .style43 {
                                                                  color:#663300;
                                                                  }
                                                                  .style38 {
                                                                  font-size:small;
                                                                  }
                                                                  .style44 {
                                                                  font-family:Arial, Helvetica, sans-serif;
                                                                  }
                                                                  .style41 {
                                                                  color:#336699;
                                                                  }
                                                                  .style49 {
                                                                  color:#000000;
                                                                  font-family:Arial, Helvetica, sans-serif;
                                                                  }
                                                                  .style48 {
                                                                  color:#336699;
                                                                  font-family:Arial, Helvetica, sans-serif;
                                                                  }
                                                                  .style45 {
                                                                  font-size:small;
                                                                  font-family:Arial, Helvetica, sans-serif;
                                                                  }
                                                                  .style37 {
                                                                  font-size:x-large;
                                                                  }
                                                                  .style47 {
                                                                  font:bold medium Arial;
                                                                  font-size:small;
                                                                  }
                                                                  .style50 {
                                                                  font-size:x-large;
                                                                  font-family:Arial, Helvetica, sans-serif;
                                                                  }
                                                                  .style16 {
                                                                  font-family:Georgia, "Times New Roman", Times, serif;
                                                                  }
                                                                  -->
                                                                  </style>

                                                                  <!-- jQuery latest core library -->

                                                                  <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js">

                                                                  </script>

                                                                   

                                                                  <!-- Cycle plugin -->

                                                                  <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js"></script>

                                                                  </head>

                                                                  <body>
                                                                  <ul id="breadcrumbs">
                                                                    <li><a href="Homefile:///C|/Users/sglass/Documents/globalpartnershipsnew/index.html">Home</a> &raquo; </li>
                                                                    <li><a href="http://www.aap.org/international/initiatives.html" target="_blank">Initiatives</a> &raquo; </li>
                                                                    <li>Global Immunizations </li>
                                                                  </ul>
                                                                  <div id="left_sidebar"><img alt="2" src="img/initiatives.jpg" width="222" height="400" />&gt;</div>
                                                                  <!-- end sidebar -->
                                                                  <div id="content">
                                                                    <h1 class="style42">Global <span class="style43">Immunizations </span></h1>
                                                                    <p class="style38"><span class="style44"><a class="style41" href="#currentissues">Current Issues</a> || <a class="style41" href="#AAPsGoals">AAP's Goals</a> || <a class="style41" href="#GetInvolved">Get   Involved</a> </span><span class="style49 ">|| <a class="style41" href="#News">News</a> || <a class="style41" href="http://www2.aap.org/international/globalresources.html" target="_blank">Resources</a> || </span><a class="style48" href="Contact" _mce_href="mailto:globalvaccines@aap.org">Contact">mailto:globalvaccines@aap.org">Contact Us</a></p>
                                                                    <p class="style45"> </p>
                                                                    <p class="style45"> </p>
                                                                    <p class="style45"><a id="CurrentIssues" name="CurrentIssues"></a><span class="style37">Current Issues in Global Immunizations </span></p>
                                                                    <p class="style45"> </p>
                                                                    <div>
                                                                      <div align="left">
                                                                        <p><span class="style47">Global Causes of Child Mortality</span></p>
                                                                      </div>
                                                                    </div>
                                                                    <p class="style45"><img alt="chartandcapt" align="left" src="img/Small_cause_of_VPDs_deaths.jpg" width="430" height="239" />Immunization prevents about 2.5 million deaths a year   globally.  It is one of the most successful and cost-effective life saving   interventions of the past century.  Without immunizations, hundreds of thousands   of children and adults would die needless deaths or suffer lifelong effects from   diseases such as diphtheria, polio, measles, mumps, and smallpox. </p>
                                                                    <p class="style45">As seen in the chart to the left, WHO estimates that 1.5 million deaths among children under five years of age were due to vaccine preventable diseases, with rotavirus and pneumoccocal disease being the top killers---this represents 17% of global total mortality for children under five. </p>
                                                                  </div>
                                                                  <p class="style45">In the United States, we have a successful immunization program   with coverage rates over 90% for all childhood vaccines.  Many state governments   operate programs to provide access to low-cost or free vaccines for those   children and adults who cannot afford them, while the federal government sets   aside funding for immunization programs in the US and also for immunization   research and safety programs.</p>
                                                                  <p class="style45">Many other countries around the world are not able to maintain   the level of immunization that the US has. The American Academy of Pediatrics   (AAP) advocates for the health of all children, including those outside of   America.  With this in mind, the AAP recently has begun to expand its efforts to   inform and advocate for global immunization issues.  There are many actions   pediatricians can take locally while thinking globally.</p>
                                                                  <p class="style45">As healthcare professionals know, infectious diseases have no   boundaries.  With our world increasingly becoming smaller and smaller, we must   be aware of what is happening globally, specifically in terms of disease   outbreaks.  One of the best ways to eliminate disease outbreaks or   reintroduction of diseases in the US is to make sure all children in the world   have access to immunizations.  The first decade of the 21st century has been the   most productive in the history of vaccine development. Unfortunately, one in 5   children globally do not have access to the important benefits that vaccines   provide. <a class="style41" href="Learn" _mce_href="http://www2.aap.org/international/initiatives/currentneeds">Learn">http://www2 .aap.org/international/initiatives/currentneeds">Learn more</a> about the curent impact that vaccines have had globally along with the   challenges we still face. </p>
                                                                  <p class="style45">It is important to understand that keeping children healthy   across the world reduces health care costs associated with treatment of vaccine   preventable illness to not only the family and individual but to the country.    Additionally, by keeping children healthy, immunization helps extend life   expectancy and the time spent on productive activity, thereby contributing to   poverty reduction, which also is a priority for the health of children and   families, particularly in developing countries.<strong> </strong><a class="style41" title="read more" href="http://www2.aap.org/international/globalimportance.html" target="_blank">Read more</a> about the importance of international   immunizations.</p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"><a id="AAPsGoals" name="AAPsGoals"></a><span class="style37">AAP's   Goals </span></p>
                                                                  <p class="style45">The AAP understands the importance of global immunizations and   is dedicated to health of all children, no matter where they are born.  With   this in mind, we recently proposed and were <a class="style41" title="Grant" href="http://aapnews.aappublications.org/content/33/2/7.1.full" target="_blank">awarded a grant</a> from the Bill and Melinda Gates Foundation to   focus efforts on increasing global immunization awareness and advocacy.</p>
                                                                  <p class="style45">The Academy&rsquo;s role will center on fostering partnerships to   support global immunization initiatives and programs.  The AAP intends to   provide you as pediatricians with tools and materials to be advocates locally   for these issues.  The AAP intends to promote strategies among pediatric leaders   in both developed and developing countries for advocacy</p>
                                                                  <p class="style45">The AAP also will be working closely with its Chapter   International Immunization Champions and other FAAP Advocates to accomplish its   goals. </p>
                                                                  <p class="style45">Additionally, the AAP is a partner in many global vaccine   campaigns.  Learn more about our involvement with <a class="style41" title="shotatlifeaap" href="http://www2.aap.org/immunization/about/globalshotatlife.html" target="_blank">Shot@Life</a> and <a class="style41" title="ONEaap" href="http://www2.aap.org/immunization/about/globalONE.html" target="_blank">ONE</a>. </p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style50"><a id="News" name="News"></a>News</p>
                                                                  <p class="style45">The AAP President-Elect attends the US Government Call to   Action for Child Survival in June 2012, <a class="style41" href="full" _mce_href="http://5thbday.usaid.gov/pages/ResponseSub/Event.aspx">full">http://5thbday.us aid.gov/pages/ResponseSub/Event.aspx">full story... </a>. </p>
                                                                  <p class="style45">AAP endorses WHO recommendation to retain use of thimerosal ( <a class="style41" title="AAPThimerosal" href="http://aapnews.aappublications.org/content/early/2012/06/01/aapnews.20120601-1" target="_blank">full story...</a> ) and Thiomersal Vaccines debate ( <a href="http://www.thelancet.com/journals/lancet/article/PIIS0140-6736(12)61002-2/fulltext?rss=yes" target="_blank" class="style41">full story... </a>)</p>
                                                                  <p class="style45">65th World Health Assembly and the Decade of Global Vaccines   Plan <a title="65th world health assembly" href="http://www.gavialliance.org/library/news/gavi-features/2012/194-countries-endorse-landmark -global-vaccine-action-plan/" target="_blank"><span class="style41">full story..</span>.</a> </p>
                                                                  <p class="style45">Global Polio Eradication Initiative <a class="style41" title="Polio Eradication" href="http://www.polioeradication.org/tabid/461/iid/219/Default.aspx" target="_blank">full story...</a> </p>
                                                                  <p class="style16"><span class="style45">AAP among newest partners of the Measles   &amp; Rubella Initiative <a class="style41" title="Measles and Rubella Initiative" href="http://us2.campaign-archive2.com/?u=4d894438a86d1a64376ab0629&amp;id=9045940b09&amp;e=e5cc cc5797" target="_blank">full story..</a></span></p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style45"><a id="GetInvolved" name="GetInvolved"></a><span class="style37">Get   Involved!</span></p>

                                                                  <div class="slideshow">
                                                                  <img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" /><img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" /><img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" /><img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" /><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" /><span class="slideshow"><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2052.JPG" width="592
                                                                  " height="509" />
                                                                  </div>

                                                                  <!--Cycle function code-->

                                                                  <script type="text/javascript">

                                                                  $(document).ready(function() {
                                                                      $('.slideshow').cycle({
                                                                  fx: 'fade'
                                                                  });
                                                                  });
                                                                  </script>

                                                                  </span>
                                                                  <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>
                                                                  <p class="style45"><em>&ldquo;Pediatricians should support global immunization to reduce   the risk of disease, disability, and death from vaccine-preventable diseases in   children living in other countries as well as reducing the risk that these   infectious agents will be imported back to the United States and cause   outbreaks.&rdquo; Dr. Walter Orenstein, MD, FAAP</em></p>
                                                                  <ul class="style45">
                                                                    <li>
                                                                      <p>Become an AAP Global Immunization Champion.  Email <a class="style41" href="globalvaccines@aap.orgmailto:globalvaccines@aap.org">globalvaccines@aap.org</a> to sign up and   learn more.</p>
                                                                    </li>
                                                                    <li>
                                                                      <p>Educate patients on global immunization issues by making sure patients who   travel are up to date on their immunizations and get any additional vaccines   recommended for traveling abroad.</p>
                                                                    </li>
                                                                    <li>
                                                                      <p>Become involved in local <a class="style41" title="campaigns or organizations" href="http://www2.aap.org/international/globalresources.html" target="_blank">campaigns or organizations</a> that are fighting for global   immunization issues.  As a pediatrician, you are a useful resource of technical   medical information. </p>
                                                                    </li>
                                                                    <li>
                                                                      <p>Contact AAP about becoming involved in advocacy <em>(link to document) </em>about global immunization issues to the federal government or your state   government.</p>
                                                                    </li>
                                                                    <li>
                                                                      <p>Write letters to the editor <em>(link to document) </em>or submit Op/Ed   articles to your local media outlets.</p>
                                                                    </li>
                                                                    <li>Continue to look back at this page for up-to-date resources and news<br />
                                                                      . </li>
                                                                  </ul>
                                                                  <p class="style45">Contact your AAP Chapter Global Immunization Champion <em>(link   coming soon)</em> or the AAP <a class="style41" href="Manager" _mce_href="mailto:globalvaccines@aap.org">Manager">mailto:globalvaccines@aap.org">Manager of Global Immunization Programs</a> for more information.</p>
                                                                  <p class="style45"> </p>
                                                                  <p class="style50"> </p>
                                                                  <p> </p>
                                                                  <p class="style45">For more information, see our <a class="style41" href="resourceshttp://www2.aap.org/international/globalresources.html">resources</a> page</p>
                                                                  </body>
                                                                  </html>

                                                                  • 30. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                    osgood_ MVP

                                                                    I'm not sure why youre refering to the last post as 'Here's the JS' - that's just plain ole html and css, NOT javascript.

                                                                     

                                                                     

                                                                    The page won't work unless you upload the jquery scripts......the script is not where the link is trying to find it:

                                                                     

                                                                    http://aap.org/international/jquery.cycle.lite.js

                                                                     

                                                                    Also I see no link to the jquery.min.js file in your pages code, why not?

                                                                     

                                                                    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

                                                                     

                                                                     

                                                                    All you have is two links to the .lite.js file which is why it does not stand a chance of working.

                                                                     

                                                                    However once I introduce the code I asked you to insert into your page the image cycle through works perfectly.

                                                                    • 31. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                      salliyahg Community Member

                                                                      hmm then i am not sure how to creat the js page....what is the min.js file? I just downloaded the lite page code and copied it exactly so im not sure why it didnt work...i will try and re-do with your code again

                                                                      • 32. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                        salliyahg Community Member

                                                                        i copied your code and got it to work a lot better--now the only problem is the images are cut off and it doesnt fade from one image to the next. looks like this:

                                                                         

                                                                        Untitled.png

                                                                        thanks!

                                                                        • 33. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                          osgood_ MVP

                                                                          Replace the below in your pages code

                                                                           

                                                                          <!-- jQuery latest core library -->

                                                                          <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js">

                                                                          </script>

                                                                           

                                                                          <!-- Cycle plugin -->

                                                                          <script type="text/javascript" src="http://aap.org/international/jquery.cycle.lite.js"></script>

                                                                           

                                                                           

                                                                           

                                                                          With this

                                                                           

                                                                           

                                                                           

                                                                          <!-- include jQuery library -->

                                                                           

                                                                          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

                                                                           

                                                                          <!-- include Cycle plugin -->

                                                                           

                                                                          <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

                                                                           

                                                                          <script type="text/javascript">

                                                                           

                                                                          $(document).ready(function() {

                                                                           

                                                                              $('.slideshow').cycle({

                                                                           

                                                                                    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

                                                                           

                                                                               });

                                                                           

                                                                          });

                                                                           

                                                                          </script>

                                                                          <style type="text/css">

                                                                           

                                                                          .slideshow {

                                                                          height: 509px;

                                                                          width: 529px;

                                                                          margin: auto;

                                                                          position: relative;

                                                                          }

                                                                          .slideshow img {

                                                                          position: absolute;

                                                                          top: 0;

                                                                          left: 0;

                                                                          }

                                                                          </style>

                                                                           

                                                                           

                                                                           

                                                                          Delete the below in your pages code:

                                                                           

                                                                           

                                                                           

                                                                          <!--Cycle function code-->

                                                                          <script type="text/javascript">

                                                                          $(document).ready(function() {
                                                                              $('.slideshow').cycle({
                                                                          fx: 'fade'
                                                                          });
                                                                          });
                                                                          </script>

                                                                           

                                                                           

                                                                           

                                                                           

                                                                          delete the redundant <span class="slideshow"> before your last image entry (see below)

                                                                           

                                                                           

                                                                          <div class="slideshow">

                                                                          <img alt="one" src="img/WebsiteSlideshow/_Terrell_IL SnJessieJackson.jpg" width="592" height="509" />

                                                                          <img alt="dcsn" src="img/WebsiteSlideshow/ONEorg 1.JPEG" width="592" height="509" />

                                                                          <img alt="one2" src="img/WebsiteSlideshow/ONEorg.JPG" width="592" height="509" />

                                                                          <img alt="saltlakecity" src="img/WebsiteSlideshow/ShotatLifeSaltLakeCity.JPG" width="592" height="509" />

                                                                          <img alt="saltlakecity" src="img/WebsiteSlideshow/Dr Sato, Ohio ONE vols and Portman.jpg" width="592" height="502" />

                                                                          <img alt="saltlakecity" src="img/WebsiteSlideshow/photo_4.jpg" width="592" height="509" />

                                                                          <img alt="saltlakecity" src="img/WebsiteSlideshow/UNEP4 Mtg.jpeg" width="592" height="509" />

                                                                          <img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2035.jpg" width="592" height="509" />

                                                                          <span class="slideshow"><img alt="saltlakecity" src="img/WebsiteSlideshow/DSCN2052.JPG" width="592

                                                                          " height="509" />

                                                                          </div>

                                                                           

                                                                           

                                                                          Delete the redundant closing </span> tag from the code below: (just before the paragraph after your slideshow <div>)

                                                                           

                                                                          </span>

                                                                          <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>

                                                                          </span>

                                                                          <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>

                                                                           

                                                                           

                                                                          Your cycle through image gallery should then work. IF you follow the steps above carefully.

                                                                          • 34. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                            osgood_ MVP

                                                                            IMPORTANT!!!!!!!!!! BECAUSE THIS F*CKING TRASH FORUM BUGGERS EVERYTHING UP:

                                                                             

                                                                            Close the space between 'latest' and '.js' in the script link below

                                                                             

                                                                             

                                                                             

                                                                            <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest .js"></script>

                                                                            • 35. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                              salliyahg Community Member

                                                                              okay so significant progress!!! it now works except the images are still cut off.  also, in regards to the redundat coding, it just looks like this:

                                                                               

                                                                               

                                                                              </span>

                                                                              <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>

                                                                               

                                                                              to me, so I didn't delete anything

                                                                              • 36. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                                osgood_ MVP

                                                                                salliyahg wrote:

                                                                                 

                                                                                okay so significant progress!!! it now works except the images are still cut off.  also, in regards to the redundat coding, it just looks like this:

                                                                                 

                                                                                 

                                                                                 

                                                                                Do you have any css other than the below which is controlling the width/height of the 'slideshow' <div>?

                                                                                 

                                                                                If your images are 509px in height and 529px wide they should sit correctly in the 'slideshow' <div>

                                                                                 

                                                                                 

                                                                                .slideshow {

                                                                                height: 509px;

                                                                                width: 529px;

                                                                                margin: auto;

                                                                                position: relative;

                                                                                }

                                                                                 

                                                                                 

                                                                                 

                                                                                 

                                                                                salliyahg wrote:

                                                                                 

                                                                                 

                                                                                 

                                                                                </span>

                                                                                <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>

                                                                                 

                                                                                to me, so I didn't delete anything

                                                                                 

                                                                                 

                                                                                You don't need the two </span> tags in the code below:

                                                                                 

                                                                                </span>

                                                                                <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>

                                                                                </span>

                                                                                <p class="style45">As a pediatrician, you can play an important role in issues   around global immunizations.</p>

                                                                                • 37. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                                  salliyahg Community Member

                                                                                  yeah, i fixed the height and width to reflect those of my images, i think its a problem with the border---it can be seen on the left, top and bottom of each picture, but not on the right hand side

                                                                                  • 38. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                                    osgood_ MVP

                                                                                    salliyahg wrote:

                                                                                     

                                                                                    yeah, i fixed the height and width to reflect those of my images, i think its a problem with the border---it can be seen on the left, top and bottom of each picture, but not on the right hand side

                                                                                     

                                                                                    If the slideshow <div> or images have a border then you must have some more related css. I can't see it in what you have posted. If you can't link me into the live page so I can identify where problem is ocurring all I can suggest is you play around with the width and height set on the 'slideshow' css.

                                                                                    • 39. Re: HOW do I create a SIMPLE fading slideshow in dreamweaver CS5?????
                                                                                      osgood_ MVP

                                                                                      Have you still got the below set somewhere by any chance?

                                                                                       

                                                                                      .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

                                                                                       

                                                                                      if so you need to change the dimensions of the slideshow <div> to 541px for height and 561px for width (as below)

                                                                                       

                                                                                      .slideshow {

                                                                                      height: 541px;

                                                                                      width: 561px;

                                                                                      margin: auto;

                                                                                      position: relative;

                                                                                      }

                                                                                      1 2 Previous Next