Forums

kbphoto

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 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!

============================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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 ); });

/*** set the width and height to match your images **/

slideshow {

  position:relative;



width:791px;



  height:449px;

float:left;

}

slideshow IMG {

  position:absolute;



  top:0;



  left:0;



  z-index:8;



  opacity:0.0;

}

slideshow IMG.active {

  z-index:10;



  opacity:1.0;

}

slideshow IMG.last-active {

  z-index:9;

}

body {

background:#FFFFFF;

margin-left: 0px;



margin-top: 0px;



margin-right: 0px;



margin-bottom: 0px;

}

<?php $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!="") { ?>

" alt="Karen Burns Photography" class="active" width="780" height="439" /> <?php $active=""; } else { ?>

" alt="Karen Burns Photography" width="780" height="439" /> <?php } } ?>

CrocoDillon

First 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)

treehouse : what would you like to learn today?

Forums

PHP Slide Show Bug

slideshow {

slideshow IMG {

slideshow IMG.active {

slideshow IMG.last-active {