Simple image slideshow --- How??

How is it possible to make a simple, non-interactive slideshow of images - with NO LINKS, NO BUTTONS - nothing, except the pictures as a non-interactive slideshow.
I did find some jQuery scripts but I'm unable to make it work. Check the links below:
Here is the website that I used as a help reference: http://www.geckodesigns.com/tutorial-dreamweaver-javascript-slideshow. php
Here's my website's subpage: http://rockworksstudio.fi/rantatylli/pages/palvelut.html where I have tried putting up this slideshow.
So I have done everything as guided on the first website but as you can see, it doesn't "play" the slideshow. Any help from you guys?
Please mail me to: [email protected] or answer on this forum. The help would be greatly appreciated.

I had the darndest time getting my first slideshow to work. I kept making really stupid errors, but stupid errors are only stupid in retrospect.
First: You must have the jQuery library in your website and your page must correctly point to it. Gecko Designs is using jQuery 1.7.2, so you should not use any other version, as later versions may "break" the code. Also, if you don't create the JavaScript instructions for Gecko's Cycle plugin in your <head> area (if you put it into the <body> of your webpage), it won't work.
One mistake I made is when I put in the instructions, I forgot my head. The full code for their instructions ought to be:
<script language="javascript" type="text/javascript">
jQuery(document).ready(function($) {
$('#slideshow').cycle({ fx: 'fade'});
</script>
I generally put these things just before the closing head tag: </head> But I put the calls to jQuery and the specific plugin before I put in the instructions. It's calling something that is supposed to be loaded before it calls it, so I put it above.
So, do this:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function($) {
$('#slideshow').cycle({ fx: 'fade'});
</script>
</head>
Also, make darned sure that jQuery is in your /js folder. I generally will select the path and filename and right-click, choose Code Hint Tools> URL browser and then click on Browse… then select the file within your defined site to make sure that I have the correct path.

Similar Messages

  • Spry Image Slideshow- how to make a clickable link for images

    I have the slideshow on my site and it works fine but I need to allow a user to click on the larger images and for that to open up an external site in a new window. How is this possible given that currently when you click on an image you just get the Pause and Start events?
    Thank you.

    Yes.... You can put other things besides strings into JOptionPanes. Such as you can put a JEditorPane that displays some HTML, which can in turn have links in it. Or buttons that look like links.
    But I've also had problems in modal dialogs in some cases where clicking the links in HTML doesn't work correctly (the HyperTextEvent doesn't get fired).
    As for same effect... Well, it's usually more complicated than that. Applets are simple (Applet.showDocument(), or AppletContext, whatever it is). Otherwise you need to do something different. Search the forums for posts on launching URLs from applications, there's plenty o' info.

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

    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.

    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

  • How to create an image slideshow?

    Hello,
    I am a beginner in web design and I need your help somewhere.
    Please look at the follwoing website: www.safaribig5.com
    Considering the image slideshow at the top of the home page, how do I add it to a webpage that I'm currently desiging in Dreamweaver?
    I also want to know how to add links to images in the slideshow.
    Your help in this matter would really be appreciated.
    Thanks.

    I personally like Nivo and Wowslider.
    I've never used the one I posted above. As far as I can tell, that's the one that was used in the example given by the OP.

  • Customizing Slideshows - how do I add an image in the text box that only shows up for a specific ima

    Customizing Slideshows - how do I add an image in the text box that only shows up for a specific image and not in every text box?

    Can you maybe provide a screen shot to further explain your question?
    Julia

  • How to insert Jquery image slideshows & other content into muse websites?

    I am aware that there is no easy way to put Jquery into adobe muse at this time.
    Will you be able to do this in 1.0?
    Can it be done now. If so how?
    Thanks for any help on the subject

    I have WOWslider jquery image slideshow software which produces an HTLM file for its slider. Taking the code that it produces is it possible to put that into an arbitrary HTML box and edit it to work.
    I see some references to it in other software as needing some work to get it to run in much the same way as would appear to be the case here.
    The pitch around the software makes it appear a case of simply copy and paste. I see above where you say future versions will make it easier to use JS with Muse, but for the moment is there a workaround or hints how to go about it?

  • How do i create a linked image slideshow?

    I'd like to have asimilar linked image slideshow to the one at the top of this page...
    http://www.jdwetherspoon.co.uk/
    Any tips would be greatly appreciated thank you!!

    jQuery Sliders:
    http://basic-slider.com/
    http://nivo.dev7studios.com/
    http://wowslider.com/
    Google will reveal countless others.
    Nancy O.

  • How do I link web pages in a Spry Image Slideshow using Dreamweaver CS5?

    I have used the Widget Browser to create the spry image slideshow and would like to link the large image displayed to a webpage? Is there any code or easy way to link the slideshow images to webpages?
    Thanks in advance for any help!

    Hans-G; thanks for the code. I am not sure where to place the code. When I insert the widget spry image slideshow, I get the following below. Where shall I place the code, thanks again:
    <ul id="ImageSlideShow_3" title="Donald Booth Photography">
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" title="White Orchids"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="Sand"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
    </ul>

  • Simple image rotation

    Hi all,
    Have a couple of pages on a site i'm building where i need a simple image rotation / image swap.
    It doesn't have to be anything flash, it's purely for a 200px square image to automatically swap every 5 seconds or so. It doesn't need any user buttons to go to next / previous, or enlarge when clicked.
    I've tried a couple of free jquery ones, but these won't load the starting image until all the images have been loaded into the browser, so you end up with a blank spot, then after say 10 seconds the images appear.
    Looking through the programs forums, it seems that the jquery i'm downloading isn't configurable to preload the images, so maybe i'm going down the wrong route completely!
    Whats the best / simplest way to do this and can you recommend anywhere to read up on how to implement it?
    Thanks
    Dan

    Dan, download the cycle plugin pack first: http://jquery.malsup.com/cycle/download.html. You can copy/ paste in a new .js file and store it locally on your site folder. Or, you could also use the cloud link as I've given below. Both will work.
    Then, include the jQuery library to before closing your </head> tag:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    Now, include the jQuery cycle plugin library before your </head> tag:
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    Define the DIV that will animate with cycle plugin before your </head> tag:
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
    fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    </script>
    In the above code, Div with class slideshow will keep cycling with a fade effect. Note that for some effects to work, you may require the jquery easing plugin. But, fade will do just fine for your original question.
    Then, structure your image container:
    Based on your original code:
    <p class="pagetext">    <img src="images/hgsindeximg1.png" alt="School pupils" width="300" height="233" class="fltrt">Welcome  to our school website, we hope that you enjoy looking around the site. <br>
        </p>
    You have to restructure it this way:
    <p class="pagetext">
    <div class="slideshow">
    <img src="images/hgsindeximg1.png" alt="School pupils" width="300" height="233" class="fltrt">
    <img src="images/hgsindeximg2.png" alt="School pupils" width="300" height"233" class="fltrt">
    <img src="images/hgsindeximg3.png" alt="School pupils" width="300" height"233" class="fltrt">
    </div>
    Welcome  to our school website, we hope that you enjoy looking around the site. <br>
        </p>
    In the above code, I've added 2 more images that will rotate on your page. Change the filenames to whatever you desire. Also, ensure you retain the image dimensions same across all 3 images for best results.
    If you notice, I've just moved the images into a DIV called 'Slideshow'. As defined previously, all 3 images with <img..> within the div with class slideshow will keep rotating.
    On a sidenote, please please please please change the background color from red to something 'non-distractive'! Seriously, I went searching for moisturizing drops for my eyes once I opened up the test page you had posted!
    Trust this helps.

  • Flash Image slideshow help

    Hello,
    I am trying to make a image slideshow for my companies new website.
    I used the Flash Image Viewer plugin from Dreamweaver, but it doesn't contain the transitional effect desired.
    Every tutorial I find talks about advancing the images through an interactive control, I just want the images to change by themselves and do a fade transitional effect between images.
    Can anyone please point me to a tutorial that has this w/o the intractive buttons?  I have been looking on the internet for hours and can only find tutorials / example w/ the intractve controls.
    Thank You for any positive direction in this.

    Hmm... no luck so far.  Thank You though for your suggestion.
    I am really "green" to flash and was only confused by the template provided by Flash.
    All I need to do is have images fade in and out of each other and then repeat over and over.
    I know this isn't too hard.  I found a tutorial that showed how, but my Firefox decided to close and I lost the page and haven't been able to find it since.  Tried the history log, but no luck.
    I will keep searchin...I know it's out there.

  • Spry Image Slideshow does not work in Explorer

    My spry image slideshow works fine in Safari and Firefox, but does not work in Explorer.
    A small box shows up in IE 8, and absolutely nothing shows up in IE 7.
    www.epaaudio.com
    Any Suggestions?

    How did you get your slideshow to play in Internet Explorer? I'm using the same slideshow on my new website and it plays fine in everything but IE versions. Here's a test page I'm working on... http://4034.sandbox.i3dthemes.net/oceankayakbanzai.html
    I looked at the code for your page and didn't notice anything different on mine. But yours works... Let me know if you have any suggestions. Thanks!

  • SPRY Image Slideshow, compatibility problems with IE

    Hello, i recently used the Spry image slideshow in my website. All works great in every browser except IE. I could actually get it to work when i changed the DOCTYPE from: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> TO: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    BUT,
    that totally skrewed the rest of my content. also i added the meta tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >  and that fixed the slideshow, but again skrewed my content.
    Has anyone found a solution? i looked through past discussions but couldnt find one.

    mdr4win wrote:
    i dont think you understood my question, wasnt about body background, but abut the spry image slideshow to work properly in IE
    I was not talking about body background, but about having markup that screws up your document when using a browser. Body background just happened to be there. Perhaps you would do well to have a look here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flittletreats.org%2F.
    I have noticed that you ignored my solution; your document still shows two bodies.
    Perhaps I should have mentioned that I tested in IE6 through to IE9 using IETester and the above was the only thing stopping IE from performing properly.
    How did you determine that the slideshow was not working correctly in IE and which versions of IE?
    Grumps

  • Center Spry Basic Image Slideshow on the webpage in Dreamweaver Cs6   ?

    Hi, I'm working on a Website for a client in Dreamweaver CS6: northstarconservancy.org. How do I center the Spry Basic Image Slideshow on the pages? I've tried a few options and nothing has been effective, anyone? Thanks, Amanda

    It would be easier to give you exact instructions if we could see your page. Do you have a link you could share?
    In general, place a div on your page and give it the basic css for centering...
    #divid {
         width:800px; (you can change the 800 to whatever width your slideshow uses)
         margin:auto;
    Then place your slideshow within that div in your html...
    <div id="divid"> all your spry slideshow info </div>
    As long as you haven't used APDivs, or position:absolute on your site, which you should never do unless absolutely necessary (pun kindof intended), the div that the slideshow resides in will be centered within it's container.

  • Single Thumbnail activate multiple page(image) slideshow?

    I want to be able to have a single thumbnail from a lightbox slideshow visible on a webpage. That when clicked activates a slideshow with multiple images...not mulitple images on a single page like in the tutorial where the social network icons pop up, but rather that triggers an independent multipage slideshow.
    Whenever I add an image it adds a thumbnail. I want one thumbnail to be seen for a 7 image slideshow. I can't figure out how to do this with the triggers. The tutorial also doesn't seem to address this.
    Right now what I'm doing is creating a lightbox slideshow, turning all the thumbnails in all states transparent, then hiding the collection of thumbnails behind an image (the image being the single thumbnail I want displayed) but this is getting cumbersome with some many transparent lightboxes next to each other.
    Is there a easier way. Its for a portfolio site, and each thumbnail should trigger a new project slideshow.

    I am having the exact same issue as englishm87. I would like to have a portfolio page with a grid of theumbnails. Each thumbnail will then trigger the multipage slideshow. There is an example on the Adobe Muse website here:
    http://www.adobe.com/products/muse/eliana-t-stein.html
    I don't quite understand how you can nest the composition widget with the slideshow widget...
    Could you provide more of a step by step answer?
    Thanks!

  • Simple Image Gallery for iWeb

    Hi there,
    Hoping someone can help. I've been searching high and low for an incredibly simple image web gallery generator. It simply has to have a larger image to the left and 3/4 smaller thumbnails to the right which, when clicked on, will appear in the bigger window. That's it! I don't want any text on it at all - just on a white background. The intention is to then upload the individual galleries of my work and use iFrames within my iWeb created website to point towards the galleries.
    Please can anyone help and point me in the direction of a good bit of software that will allow me to do this. I have no HTML experience to speak of.
    Thanks
    Sam

    Sam ~ This +"HTML Picture Viewer"+ would be easiest to implement using iWeb '08's +HTML Snippet+ window:
    http://web.mac.com/catucker/InsideOutside/PictureViewer.html
    ...it has the larger image to the right, but I suppose someone here could tell you how to reverse that. And the image changes not on a click of a thumbnail, but on mouseover.

Maybe you are looking for

  • How to get photos off my Apple TV

    There are family vacation photos on our Apple TV that we can't seem to locate anywhere else. How do I get them off my Apple TV to save them on my computer or to a flash drive??

  • Web AS Java 6.40 sp11

    Hi All, any help you can give would be greatly appreciated, or indeed point me to the right place if this is not the correct forum, Thanks! I was installing sp11 from sp0 on an XI 6.40 system, following the sp11 install pdf documentation. I patched t

  • Migration from Access 97

    During the "Create Oracle Model" the process stops right after "Field level validations" and never finishes and never gives any kind of error. I did get some warnings during the capture that some tables didn't have primary keys. Other than that

  • My sendForm function keeps opening a blank page

    My sendForm function works properly, but whenever a webuser presses the submit button, the browser opens a new blank window, even though the tutorial from which I learned the actionscripting doesn't seem to be afflicted in the same way at all. functi

  • Best piece of advice for "New to COLOR"...

    Sort of like a position statement: I have been monitoring this forum since it started, having used FT for a bit more than a year now... and having been a dedicated daVinci/telecine colorist for 13 years...and an on-line editor for nearly 20 years bef