I'm using the craftyslide jquery plugin http://projects.craftedpixelz.co.uk/craftyslide/. This plugin is used for building slideshows. My web is using ajax to load the content. In my /#home I have two slides/pictures.
The problem that I'm getting is that this plugin is using a setInterval() function.
// Auto mode
function auto() {
setInterval(function () {
$slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");
$slides.each(function () {
if ($slides.is(":visible")) {
$(".caption").css("bottom", "-37px");
$(this).find(".caption").delay(300).animate({
bottom: 0
}, 300);
}
});
}, options.delay);
}
When I load the content in my /#home everything is working fine. But if I load another page by means of an ajax call like /#offers and after that I come back to the /#home page, the transition starts failing. I get instead of the two images, it seems that it detects 4. If I do the same process once again, it will display 6.
As I said, I think that it is because of the setInterval function. It is still executing the setInterval from the previous called + the new ones. Is there any way to remove that setInterval() when I load another page?
Thanks in advance!
Additional info: As the content is loaded with Ajax, Im using a template for loading the header, footer, etc. before loading the content. That template is loading the library like this inside the HEAD:
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="fragment" content="!"/>
<script type="text/javascript" src="/js/ext.js"></script>
<script type="text/javascript" src="/js/craftyslide.js"></script>
</head>
When I do the ajax call to load the #home, I'm retrieving an HTML document with some javascript. That javascript is located at the end of the HTML code.
<div id="slideshow">
<ul>
<li style="width:100%;">
<img src="bg.jpg" height="400"/>
</li >
<li style="width:100%;">
<img src="kk2_bg_optimized.jpg" height="400"/>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Load slide
$("#slideshow").craftyslide({
'width': "100%",
'height': 400,
'pagination': false,
'fadetime': 500,
'delay': 3500
});
});
</script>
