[jQuery.Cycle] multiple slideshows - begginer questions
Hello,
I know that similar questions about this issue have been already asked. Know that I've used the 'search' button at first, read everything I found and tried to understand it. However, I failed to do so, mostly because I'm rather begginer to jQuery, while descriptions were usually advanced, without detailed explainations. And this is what I seek for.
So, let's start. What I want is to have several cycle slideshows at 1 website, among which at least 2 slideshows would be at the same page.
Here's the example HTML of the page:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="pl">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="Stylesheet" type="text/css" href="_style.css">
<title>jQuery.Cycle - test</title>
<!-- 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>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('#pause').click(function() { $('.slideshow').cycle('pause'); return false; });
$('#play').click(function() { $('.slideshow').cycle('resume'); return false; });
$('#banner').hover(
function() { $('#controls').fadeIn(); },
function() { $('#controls').fadeOut(); }
);
$('#banner').hover(
function() { $('#controls2').fadeIn(); },
function() { $('#controls2').fadeOut(); }
);
$('#banner').hover(
function() { $('#controls3').fadeIn(); },
function() { $('#controls3').fadeOut(); }
);
$('.slideshow').cycle({
fx: 'scrollDown',
speed: 1000,
timeout: 6000,
pager: '#nav',
next: '#next',
prev: '#prev',
after: function() {
$('#caption').html(this.alt);
},
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"></a></li>';
}
});
});
/* ]]> */
</script>
</head>
<body>
<div id="banner">
<div id="controls">
<span><a href="" id="prev">Prev</a></span>
</div>
<div id="controls2">
<span><a href="" id="next">Next</a></span>
</div>
<div id="controls3">
<a href="" id="pause">Pause</a>
<a href="" id="play">Play</a>
</div>
<table>
<tr>
<td colspan="3">
<div class="slideshow">
<img src="images/1.jpg" width="500" height="375" alt="Jakiś opis rysunku pierwszego, który będzie baaardzo długi tak, aby zajmować co najmniej 2 linijki." />
<img src="images/2.jpg" width="500" height="375" alt="Kolejny opis gór" />
<img src="images/3.jpg" width="500" height="375" alt="Jakiś opis rysunku pierwszego, który będzie baaardzo długi tak, aby zajmować co najmniej 2 linijki. A najlepiej jeśli sporo więcej." />
<img src="images/4.jpg" width="500" height="375" />
<img src="images/5.jpg" width="500" height="375" alt="Kolejny opis gór" />
<img src="images/6.jpg" width="500" height="375" />
<img src="images/7.jpg" width="500" height="375" alt="Kolejny opis gór"/>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<p id="caption"></p>
</td>
</tr>
<tr>
<td>
</td>
<td class="bar">
<div id="nav" class="nav"></div>
</td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
A simple slideshow with controls and caption. Now, let's say I want to add another slideshow at this page, operating independly. So, I need to add HTML code, creating another slideshow
<table>
<tr>
<td colspan="3">
<div class="slideshow">
<img src="images/1.jpg" width="500" height="375" alt="Jakiś opis rysunku pierwszego, który będzie baaardzo długi tak, aby zajmować co najmniej 2 linijki." />
<img src="images/2.jpg" width="500" height="375" alt="Kolejny opis gór" />
<img src="images/3.jpg" width="500" height="375" alt="Jakiś opis rysunku pierwszego, który będzie baaardzo długi tak, aby zajmować co najmniej 2 linijki. A najlepiej jeśli sporo więcej." />
<img src="images/4.jpg" width="500" height="375" />
<img src="images/5.jpg" width="500" height="375" alt="Kolejny opis gór" />
<img src="images/6.jpg" width="500" height="375" />
<img src="images/7.jpg" width="500" height="375" alt="Kolejny opis gór"/>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
</td>
<td class="bar">
<div id="nav_2" class="nav"></div>
</td>
<td>
</td>
</tr>
</table>
</div>
Let's presume it's without controls and caption. Now, we come to the center of the problem. How should I modify js code in order second slideshow to work properly? I read several topics, there was something about 'each' function, however I didn't understand much.
Is there anyone who could explain me this step-by-step? Would be very grateful.
Regards,
vorcan