- This topic is empty.
-
AuthorPosts
-
February 8, 2013 at 2:33 pm #42575kbphotoMember
Greetings
I have a slide show on our website that was built by a friend who hit a stumbling block on this bug. I was hoping someone may recognize the issue.
The website is http://www.KarenImages.com. Each page has a slide show. When a page is open and running in a browser and you open a new tab and browse that tab & then come back a minute or so later the slide show quickly does a catch up pattern rapidly playing all the images missed while on the other tab in order to catch up to where it is supposed to be. Codepen did not have a php option so I did not create one for this (newbie). The code for the home page slide show is pasted her – each page has a unique image directory and php file that is behaving the same way. this php code is from the file “home-fading.php”
Second issue is the slide show is warping the images slightly in the horizontal dimension…I am thinking this is an image size issue???
Any ideas greatly appreciated!
============================================================
sacred heart slide /***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
$folder = opendir(“../ss_home_images/”); // Use ‘opendir(“.”)’ if the PHP file is in the same folder as your images. Or set a relative path ‘opendir(“../path/to/folder”)’.$pic_types = array(“jpg”, “jpeg”, “gif”, “png”);
$index = array();
while ($file = readdir ($folder)) {
if(in_array(substr(strtolower($file), strrpos($file,”.”) + 1),$pic_types))
{
array_push($index,$file);
}
}closedir($folder);
//print_r($index);
$active=’class=”active”‘;shuffle($index);
foreach($index as $img)
{
if($active!=””)
{
?>
-->
February 8, 2013 at 6:21 pm #123840CrocoDillonParticipantFirst issue is a JavaScript issue. I think the `setInterval()` function calls build up when tabbed. You can try changing:
$(function() {
setInterval( “slideSwitch()”, 5000 );
});into
$(function() {
var id = setInterval(slideSwitch, 5000);
$(window).blur(function(){
clearInterval(id);
});
$(window).focus(function(){
id = setInterval(slideSwitch, 5000);
});
});to cancel the interval when the window loses focus and resume when it gains focus. (I haven’t tested this but it could work)
-
AuthorPosts
- The forum ‘Back End’ is closed to new topics and replies.