cycle image base on sql request

Discussion in 'Web Design and Development' started by nomade, Mar 10, 2011.

  1. nomade macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #1
    I 've found many javascript that allow image cycling from a folder but what I'm looking for is a way to cycle image base on a sql request.

    Any suggestion?
     
  2. Laird Knox macrumors 68000

    Joined:
    Jun 18, 2010
    #2
    You aren't going to find any Javascript to do that. You are going to need some coding on the server side. Somewhere you are going to need to run the SQL and pull the data from a database.

    For example, I'm currently working on a project that has a Flex front end and uses Google App Engine on the back end. I have a servlet that can process images and serve them up. I am using Java on the App Engine side.

    [​IMG]

    The above image is pulled from the database, the watermark is added, the image is sized and sent to the browser. It isn't a trvial copy and past but you might want to start looking at whatever the back end server is running. Too many questions to provide a definitive answer.

    (Note: The above image will eventually go away as the database is still in active development and this is a test image. Likewise the watermark is just a placeholder and will change.)
     
  3. nomade thread starter macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #3
    solution

    For those looking for the same solution here what I found:
    Code:
    <?php 
    $sql_rotation=mysql_query('SELECT * FROM photo_atelier');
    $i=1;
    while($ligne_rotation=mysql_fetch_array($sql_rotation)){
    $array[$i]="../media/atelier/grand/".$ligne_rotation['photo']."";
    $i++;
    }
    ?>
    <SCRIPT LANGUAGE="JavaScript">
    
    var timeDelay = 3; // change delay time in seconds
    var Pix = new Array
    (
    <?php 
    echo "'".$array[1]."',";
    echo "'".$array[2]."',";
    echo "'".$array[3]."',";
    echo "'".$array[4]."',";
    echo "'".$array[5]."'";
    ?>
    );
    var howMany = Pix.length;
    timeDelay *= 1000;
    var PicCurrentNum = 0;
    var PicCurrent = new Image();
    PicCurrent.src = Pix[PicCurrentNum];
    function startPix() {
    setInterval("slideshow()", timeDelay);
    }
    function slideshow() {
    PicCurrentNum++;
    if (PicCurrentNum == howMany) {
    PicCurrentNum = 0;
    }
    PicCurrent.src = Pix[PicCurrentNum];
    document["ChangingPix"].src = PicCurrent.src;
    }
    //  End -->
    </script>
    
    <body OnLoad="startPix()">
    <?php echo "<img name=ChangingPix src=".$array[1].">"; ?>
    
    to see the result go to http://zoomaventurephoto.com/fr/atelier.php:D
     
  4. nomade thread starter macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #4
    Credit

    Oh I forgot to give credit for the javascript:
    <!-- Original: D. Keith Higgs (dkh2@po.cwru.edu) -->
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    Thanks
     
  5. Laird Knox macrumors 68000

    Joined:
    Jun 18, 2010
    #5
    It has been a while since I have played with PHP and SQL. Does using a query string like that open you up to any vulnerabilities? Offhand I'm thinking no because it is run on the server side and the user doesn't have any control over the input in this case.

    The code itself is pretty straight forward. Two things to note:

    You are pulling everything from the photo_atelier table and then building an array with five elements. If the table contains 100 photos that's a lot of extra data that you are just dropping on the ground.

    Also you are pulling every column from that table and only using the name of the photo. You can change the select statement to:

    'SELECT photo FROM photo_atelier' to just pull the information you are using.

    On a personal note, I find the rotation to be too fast. You also might want to consider adding a pause to the rotation when the mouse is hovering over the image.

    Overall I like the design of the site. You have a few CSS issues to work out but it is looking good.
     
  6. nomade thread starter macrumors member

    nomade

    Joined:
    Dec 2, 2006
    #6
    while

    For the five items that was just a test, I made a version with the entire Query result :

    Code:
    $sql_rotation=mysql_query("SELECT photo FROM photo_atelier WHERE vedette='oui' ");
    echo $nbr;
    while($ligne_rotation=mysql_fetch_array($sql_rotation)){
    $array[$i]="../media/atelier/grand/".$ligne_rotation['photo']."";
    $i++;
    }
    var Pix = new Array
    (
    <?php
    $i=1;
    while($i <= $nbr){ 
    if($i !=($nbr)){
    echo "'".$array[$i]."',";}
    else{
    echo "'".$array[$i]."'";}
    $i++;
    }
    ?>
    );
    Time is user adjustabkle with the ligne:
    Code:
    var timeDelay = 3;//second
    For the CSS issue I fully agree, this site is still in early developrment, css standardization will come along the way ( o;

    Thanks for your suggestion.
     

Share This Page