Photos from a folder

Discussion in 'jQuery' started by passingTime, Mar 16, 2012.

0
  1. #1
    hi, is there anyway to display photos similar to facebook?

    So i have a folder full of photos and want to go through them with the left/right button like facebook.

    Nothing fancy just simple left/right and being able to do it to photos within a folder.

    How is this done?
     
    passingTime, Mar 16, 2012 IP
  2. stephan2307

    stephan2307 Well-Known Member

    Messages:
    1,277
    Likes Received:
    33
    Best Answers:
    7
    Trophy Points:
    150
    #2
    this is how I would do it.

    combination of php (for getting a list of images in a specific folder) and then jquery to allow scrolling through it via right and left arrow keys

    this script assumes that the images are in a subfolder called img but obviously you can change this

    

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var myImages = new Array();
 
<?php

    if ($handle = opendir('img')) {
        $i = 0;
        while (false !== ($entry = readdir($handle)) ) {
            if ( substr(strtolower($entry),-4)== '.jpg' || substr(strtolower($entry),-4)== '.gif' ||
                substr(strtolower($entry),-4)== '.png') {
            echo 'myImages['.$i.'] = "img/'.$entry.'";'."\n";
            $i++;
            }
        }

        closedir($handle);
    }

?>



$(document).ready(function(){
    
    
    $('#img').attr('src',myImages[0]);
    
    $(document).bind('keydown', function(e) {
        
        var code = (e.keyCode ? e.keyCode : e.which);
        
        var no = myImages.indexOf($('#img').attr('src'));
       
        if (code==37 || code==39) {
            if (code==37) {
                if(no == 0) {
                    no = myImages.length-1;
                    
                }
                else {
                    no = no-1;
                }
            }
            if (code==39) {
                if (no==(myImages.length-1)) {
                    no=0
                }
                else { 
                    no = no+1;
                }
            }    
            $('#img').attr('src',myImages[no]);
        }
        
    });

    
 
});

</script>
</head>
<body>
<img src="" id="img" />
</body>
</html>
    Code (markup):
     
    stephan2307, Mar 19, 2012 IP
  3. passingTime

    passingTime Peon

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I just did this, giving every image an incremented name, so 1.jpg, 2.jpg, etc...:

    <?
    session_start();
    $_SESSION['num'] = ((isset($_SESSION['num'])) ? $_SESSION['num'] : 1);
    if(isset($_GET['num'])){
    $_SESSION['num'] = $_SESSION['num'] + $_GET['num'];
    header("Location: simpleGallery.php");
    }
    ?>

    <img src="pictures/<?=$_SESSION['num']?>.jpg"><br>
    <a href="?num=-1" class="click">back</a>
    <a href="?num=1" class="click">next</a>


    I obviously expanded a little like clicking the image, stopping when u go over the first/last image, etc... but that's the main stuff there.
     
    Last edited: Mar 22, 2012
    passingTime, Mar 22, 2012 IP