JQuery cycle, how can I set intervals for different images so I can let some images to apear together

Question

I am using jquery cycle, and here is my code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
pre { display:none }
#main h2 { text-align: center }
#right { cursor: pointer }
#twitter-widget { width: 300px; float: right; margin-left: 20px; height: 200px; }
.twitterSearchTitle { font-family: 'trebuchet ms' }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">

$(function() {
// run the code in the markup!
$('#demos pre code').each(function() {
    eval($(this).text());
});

});
</script>
</head>
<body>

<div id="main">

<div id="demos">
    <div id="two" class="pics">
        <img id="letter-i" src="02.jpg" width="300" height="330" />
        <img id="veggi2" src="05.jpg" width="300" height="330" />
    </div>

    <pre><code class="mix">$('#two').cycle({ 
                    fx:     'fade', 
                    speed:   300, 
                    timeout: 3000, 
                    pause:   1 
                    });
    </code></pre>
    </td><td>
</body>
</html>

The think I want to do is a bit hard to explain, in a very simple way I want my images to fadein and fadeout in different intervals. To be more precise for example in my code consider the div with id="two" I want the first image changes to the second faster and second image changes to the first image slower.

With my code the images are fading in and out with the same pace. I need to know how to have a different interval for each image.

The main idea is that certain groups of images appear together, So I want to synch the intervals some how that I have the following pattern 1-2-3 -> 1-4-3 -> 5-4-6 -> 1-4-3 -> 1-2-3 ->... (imagine that I have images 1,2,3,4,5,6, for example 1-2-3 shows that images 1 and 2 and 3 apear together, and -> shows the transition)

mahsa.teimourikia · Accepted Answer · 2012-06-01T09:04:33.797

I figured it out, instead of setting different intervals for each image I defined the groups of picture that I wanted to show together, then I set my cycles between these groups:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
pre { display:none }
#main h2 { text-align: center }
#right { cursor: pointer }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">

$(function() {
// run the code in the markup!
$('#demos pre code').each(function() {
    eval($(this).text());
});

});
</script>
</head>
<body>

<div id="main">

<div id="demos">
 <div id="slider">

    <div id="bxo" class="pics">
        <img id="letter-b" src="01.jpg" width="300" height="330" />
        <img id="veggi1" src="02.jpg" width="300" height="330" />
        <img id="letter-o" src="03.jpg" width="300" height="330" />

    </div>
    <div id="bio" class="pics">
        <img id="letter-b" src="01.jpg" width="300" height="330" />
        <img id="letter-i" src="05.jpg" width="300" height="330" />
        <img id="letter-o" src="03.jpg" width="300" height="330" />
    </div>
    <div id="xix" class="pics">
        <img  id="veggi2" src="04.jpg" width="300" height="330" />
        <img id="letter-i" src="05.jpg" width="300" height="330" />
        <img  id="veggi3" src="06.jpg" width="300" height="330" />
    </div>
    <div id="bio" class="pics">
        <img id="letter-b" src="01.jpg" width="300" height="330" />
        <img id="letter-i" src="05.jpg" width="300" height="330" />
        <img id="letter-o" src="03.jpg" width="300" height="330" />
    </div>



       </div>
       <pre><code class="mix">$('#slider').cycle(
    { 
                    fx:     'fade', 
                    speed:   500, 
                    timeout: 3000, 
                    pause:   1 
                    });
                    </code></pre>
 </body>
 </html>

JQuery cycle, how can I set intervals for different images so I can let some images to apear together

1 Answers1