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>
Use clearInterval() to cancel the ongoing Interval
see this link for reference
It sounds to me that you're running this as a single-page site? If that is true, and if your AJAX requests are returning both HTML and JavaScript as you've shown, you're going to keep compounding your JavaScript each time you go back to the home page. Basically each time you return to the home, page, another instance of your slideshow is being started.
The CraftySlide plugin doesn't assign it's setInterval() to a variable, so you can't use clearInterval() to stop it. It also doesn't offer a way to stop a slideshow once it has been started through it's API. So instead what I would consider doing is using a global variable to track whether CraftySlide has been started on not.
<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(){
if(typeof(window.slideshowEnabled) == 'undefined' || window.slideshowEnabled == false){
window.slideshowEnabled = true;
// Load slideshow
$("#slideshow").craftyslide({
'width': "100%",
'height': 400,
'pagination': false,
'fadetime': 500,
'delay': 3500
});
}
});
</script>