Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Web slide show

  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts

    Smile Web slide show

    For an Social enterpise open evening I have produced a website slide show that flicks through web sites on a timer. Here is the code for it

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang=en-us>
    <head>
    <?PHP
    	if (isset($_GET['i'])) $i=$_GET['i']; else $i=0;
    	$pages=array('http://jamiescomputerclub.org.uk','http://pinman-designs.co.uk','http://jamiesmicroprop.org.uk','http://ssj.org.uk');
    	$total=sizeof($pages);
    	
    	echo'
    <title>Jamie\'s Web Show - '.$pages[$i].'</title>
    </head>
    <body>
    <IFRAME SRC="'.$pages[$i].'" SCROLLING="auto" WIDTH="100%" HEIGHT="100%" ></IFRAME>';
    	
    	if($i+2>$total) $i=0;
    	else $i++;
    	
    echo'
    <form name="redirect">
    <center>
    <font face="Arial"><b>You will be redirected to the next page in<br><br>
    <form>
    <input type="text" size="3" name="redirect2">
    </form>
    seconds</b></font>
    </center>
    
    <script>
    <!--
    
    /*
    Count down then redirect script
    By JavaScript Kit (http://javascriptkit.com)
    Over 400+ free scripts here!
    */
    
    //change below target URL to your own
    var targetURL="http://localhost/openday/index.php?i='.$i.'"
    //change the second to start counting down from
    var countdownfrom=30
    
    
    var currentsecond=document.redirect.redirect2.value=countdownfrom+1
    function countredirect(){
    if (currentsecond!=1){
    currentsecond-=1
    document.redirect.redirect2.value=currentsecond
    }
    else{
    window.location=targetURL
    return
    }
    setTimeout("countredirect()",1000)
    }
    
    countredirect()
    //-->
    </script>
    
    </body>
    </html>';
    
    ?>
    The slide show works fine expect that I want it to be pausable so that I can click a button and the timer stops counting down, another button to resume. I am a complete noob with Java script so if anyone can offer some advice as to how I can include a pause and play button I would be very greatful

    Thanks in advance.

  • #2
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts

    Throw a reference

    Here is what I would do

    1- in JavaScript, create an array of image Objects. This will help in caching the images to your users HD, and will speed the transition between images. so, in your php code, you should collect the names of images you want to have in the slide show, and have php generate the JS. here is an example

    PHP Code:
    <?php
    // declare an array that contains references to images on the server.
    $array_of_images = array( "image1.jpg""image2.jpg""image3.jpg" );

    // start writing an array in JS
    echo '<script type="text/javascript">';
    // declare an array in JavaScript
    echo "\nvar my_images;\n";
    echo 
    "my_images = new Array();\n";

    // start generating the array from PHP to JS
    for( $i 0$i count$array_of_images ); $i++ )
    {
     echo 
    "my_images["$i "] = new Image();\n";
     echo 
    "my_images["$i "].src = '" $array_of_images$i ] . "';\n";
    # ends for loop

    // close javascript array
    echo "</script>";
    ?>
    2- Now, we have an array ready for us to use in JavaScript. for this to work, we need to have three functions, one to get the slide show going by calling another function that will keep calling itself, and the third will pause it when needed.

    PHP Code:
    <script type="text/javascript">
    // this is our reference to the timer and will be used to ensure
    // that when the script is pause, it is cleared.
    var timer_id false;
    // keeps a reference of which image is currently on display
    var image_id = -1;
    // time it takes before another image is displayed.
    var duration 5000;    // the timer is in milliseconds. so, 5000 is 5 seconds

    function start_slides()
    {
        
    timer_id window.setTimeout"display()"duration );
    }
    function 
    stop_slides()
    {
        
    window.clearTimeouttimer_id );
    }

    function 
    display()
    {
        if( 
    timer_id != false )
        {
            if( ++
    image_id == my_images.length )
                
    image_id 0;
            
            
    // uncomment the following line
            //window.document.getElementById( "image_area" ).src = my_images[ image_id ];
            
            // and comment the line below
            
    window.document.getElementById"display_area" ).innerHTML "Image " image_id ": " my_imagesimage_id ];
            
    timer_id window.setTimeout"display()"duration );
        }
    }

    </script>
    <input type="button" value="start" onclick = "javascript: start_slides();"/>
    <input type="button"  value="stop"  onclick = "javascript: stop_slides();"/>
    <div id="display_area">

    </div>
    <img src="" id="image_area"> 
    If you run the script, it will display image objects in your browser..
    just read the script, comment one line, and uncomment the other...and you should be set to go.

    All the best

  • #3
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Thanks for the reply. The only thing is I wanted the slider to show actual web pages in frames not images. The reason being I wanted them to be able to interact with the webpages. This is why I need to add pause and play, so they get more than 20 secs to browse the page. Then I can resume the silde show and it will continue flicking through the pages.

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Ok I have looked at your code and there was enough informtion there for me to accomplish the task, so thanks for that. I kinda dont understand it but it works all the same. Here is the code

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang=en-us>
    <head>
    <?PHP
        
    if (isset($_GET['i'])) $i=$_GET['i']; else $i=0;
        
    $pages=array('http://jamiescomputerclub.org.uk','template/template.html','http://pinman-designs.co.uk','http://jamiesmicroprop.org.uk','http://ssj.org.uk');
        
    $total=sizeof($pages);
        
        echo
    '
    <title>Jamie\'s Web Show - '
    .$pages[$i].'</title>
    </head>
    <body>
    <IFRAME SRC="'
    .$pages[$i].'" SCROLLING="auto" WIDTH="100%" HEIGHT="100%" ></IFRAME>';
        
        if(
    $i+2>$total$i=0;
        else 
    $i++;
        
    echo
    '
    <form name="redirect">
    <center>
    <font face="Arial"><b>You will be redirected to the next page in<br><br>
    <form>
    <input type="text" size="3" name="redirect2">
    </form>
    seconds</b></font>
    </center>

    <script>
    <!--

    /*
    Count down then redirect script
    By JavaScript Kit (http://javascriptkit.com)
    Over 400+ free scripts here!
    */

    //change below target URL to your own
    var targetURL="http://localhost/openday/index.php?i='
    .$i.'"
    //change the second to start counting down from
    var countdownfrom=30


    var currentsecond=document.redirect.redirect2.value=countdownfrom+1


    function start_slides() 

        timer_id = window.setTimeout( "countredirect()", 1000 ); 

    function stop_slides() 

        window.clearTimeout( timer_id ); 


    function countredirect(){
    if (currentsecond!=1){
    currentsecond-=1
    document.redirect.redirect2.value=currentsecond
    }
    else{
    window.location=targetURL
    return
    }
    timer_id = window.setTimeout( "countredirect()", 1000 ); 
    }



    countredirect()
    //-->
    </script>

    <form>
        <input type="button" value="start" onclick = "javascript: start_slides();"/> 
        <input type="button"  value="stop"  onclick = "javascript: stop_slides();"/> 
    </form>


    </body>
    </html>'
    ;

    ?>
    Thanks again


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •