Jump to content

How to display images from directory with ajax/jquery?


LTMH38

Recommended Posts

In the same directory I have two php documents and a folder called "gallery". This folder contain a lot of images files.
I send a variable from the first page with the folder name. In the second page I open the directory and read directory content with glob function.
I have tried to send images back to the first page again but images do not appear properly.
I take a tutorial from this page:
http://www.kvcodes.com/2013/12/get-all-images-from-a-directory-dynamically-php-jquery-ajax/

 

gallery.php

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        //start jquery
        $(document).ready(function(){
        //submit from form
        $('form').submit(function(e) {
            e.preventDefault();
            //start ajax with jquery
            $.ajax({
                url: "directory.php",
                type: "POST",
                data: {'var': $('form input[name="var"]').val()},
                dataType: "HTML",
                success: function( data ) {
                    $('body').append(data);
                },
                error: function(jqXHR, data ) {       
                    alert ('Ajax request Failed.');   
                }
            });
        });
    });
    </script>
   
</head>
   
<body>
   
    <div class="content">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis
        </p>
    </div>
   
    <div class="form">
        <!--directory variable-->
        <?php
        $a = "gallery";
        ?>
        <form action="directory.php" method="post">
            <input type="hidden" name="var" value="<?php echo $a; ?>">
            <input type="submit" name="submit" value="gallery">
        </form>
    </div>
   
    <!--to display ajax result with colorbox-->
    <div class="gallery">
    </div>
   
</body>
</html>

directory.php

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>image directory</title>
</head>
    
<body>
    <?php
    //get the path of images directory 
    $variable = $_POST['var'];    
    $img_dir = $variable . "/";

    //loop to bring all images inside directory
    foreach(glob($img_dir . '*.jpg') as $images) {
        echo '<img src="'.$img_dir.$images.'">';     
    }    

    ?>
    </body>
    
</html>
Any guidance would be appreciated.
Thanks in advance.
Edited by LTMH38
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.