CODEWITHSUNDEEP
jquerycycle
Michael
Michael

Reputation: 21

jQuery Cycle plugin: One pager to control multiple slideshow on a page

I have a cycle plugin set up on a page (images) with a pager to control the horizontal slide. My issue is that there is a transparent overlay that needs to sit over part of the images for some text relating to each image but would rather have that with a different transition effect for this so it doesn't slide in from the left. Am I able to set up to slideshows, each with 3 pieces of related content, that I can position correctly and have them controlled with the one pager?

My script currently looks like this:

$(function() {
$('.s4').before('<div id="nav" class="nav">').cycle({
    fx:     'scrollHorz',
    speed:  'slow',
    speedIn: 'slow',  // speed of the 'in' transition 
    speedOut: 'slow',
    timeout: 6000,
    pager:  '#nav'
});

});

I hope this makes sense,

Thanks

Upvotes: 2

Views: 4317

Answers (1)

Michael Bishop
Michael Bishop

Reputation: 11

@Awestruck - You can use the metadata plugin: http://jquery.malsup.com/cycle/meta2.html Specify options for each slideshow container by including the options in the class attribute like this: <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> I've included a hacked up example from the cycle plugin website. The only file dependance for this example is jquery.metadata.js.

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - One Pager, Two Slideshows - Different Options for each class</title> 
<style type="text/css"> 
body { padding: 30px }
.slideshow { height: 232px; width: 232px; margin: 30px; float: left }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#nav { text-align: center }
#nav a { padding: 5px; margin: 5px; background: #eee; border: 1px solid #ccc; text-decoration: none }
#nav a.activeSlide { background: #ddd; color: #800 }
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript" src="jquery.metadata.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.slideshow').each(function(index) {
        $(this).cycle({
            pager:  '#nav',
            pagerAnchorBuilder: function(i) {
                if (index == 0)
                    // for first slideshow, return a new anchro
                    return '<a href="#">'+(i+1)+'</a>';
                // for 2nd slideshow, select the anchor created previously
                return '#nav a:eq('+i+')';
            }
        });
    });
});
</script> 
</head> 
<body> 
    <div id="nav"></div> 
    <div class="slideshow { fx: 'scrollLeft', delay: -2000 }"> 
        <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> 
    <div class="slideshow { fx: 'turnDown' }"> 
        <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" /> 
        <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" /> 
    </div> 
</body> 
</html>

Upvotes: 1

Related Questions