Grow your CSS skills. Land your dream job.

PHP Slide Show Bug

  • # February 8, 2013 at 2:33 pm

    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!

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

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

    < ?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” width=”780″ height=”439″ />

    < ?php
    }
    }

    ?>


    # February 8, 2013 at 6:21 pm

    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)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".