dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: slideshow different intervals

  1. #1
    Join Date
    Jul 2007
    Posts
    76

    slideshow different intervals

    Hi,

    Is it possible to code a slideshow where the slides can change at a different intervals? Which can be set by me??

    The slideshow will hold text and links but will need to be dynamic in size.

    i.e. there maybe 5 or 6 lines of text anything more can be viewed by a view more link and then i'll need the box to stretch to fit rest of text.

    Thanks

  2. #2
    Join Date
    Feb 2010
    Location
    Amsterdam
    Posts
    174
    sure you can use as many setIntervals as you want.

    var interval1 = setInterval(function(){ alert('this runs every sec'); }, 1000);
    var interval2 = setInterval(function(){ alert('this runs every 2 sec'); }, 2000);
    var interval3 = setInterval(function(){ alert('this runs every 3 sec'); }, 3000);

    etc

  3. #3
    Join Date
    Jul 2007
    Posts
    76
    hi Gozzy

    could you expand on your code what else would need to go around it??

    how would i get it to stretch?? example code would be good?

  4. #4
    Join Date
    Jul 2007
    Posts
    76
    found this code works brilliant but can i slide divs with text in instead of images?? Code Below

    Thanks

    <!doctype html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Example Slideshow</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.4.1/jquery.min.js"></script>

    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

    <!-- initialize the slideshow when the DOM is ready -->
    <script type="text/javascript">
    $(function() {
    $('#slideshow').cycle({
    delay: -2000,
    fx: 'fade',
    speed: 'fast',
    timeoutFn: calculateTimeout
    });
    });

    // timeouts per slide (in seconds)
    var timeouts = [10,40,2,8,5];
    function calculateTimeout(currElement, nextElement, opts, isForward) {
    var index = opts.currSlide;
    return timeouts[index] * 1000;
    }
    </script>
    </head>
    <body>
    <div id="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles