How to put all of the images from folder into CSS box


Tags: javascript,php,jquery,css,ajax

Problem :

I have a problem to load all images from a folder and display all of them in one CSS box (in html).

I want to make all the images like a video or gif maybe.

So each image will appear alternately until the last image is displayed.

Here is my php code :

camera.php

<?php 

$img_dir = "image/";
$images = scandir($img_dir);
$html = '';
$html .='<ul>';

foreach($images as $img) { 
    if($img === '.' || $img === '..') {continue;}         

    if (  (preg_match('/.jpg/',$img))  ||  (preg_match('/.gif/',$img)) || (preg_match('/.tiff/',$img)) || (preg_match('/.png/',$img)) ){                

        $html .='<li><img src="'.$img_dir.$img.'" ></li>' ; 
    } else { continue; }    
} 

    $html .='</ul>' ; 

    echo $html ;

?>

Here is my jquery code:

jquery.custom.js

jQuery('document').ready(function() {
  $.ajax({            
     url: "camera.php", 
    type: "POST",          
    dataType: "HTML", 
        success: function( data ) { 
    jQuery('body').append(data);
        },
        error: function(jqXHR, data ) {        
    alert ('Ajax request Failed.');    
    }
    }); 
});

Here is my CSS box :

 #myGallery{
  position:relative;
  width:800px; /* Set your image width */
  height:500px; /* Set your image height */
}

I can make all of the images appear , but I don't know how to display all of them in the CSS box and make all of them like a video.

I have 200 photos anyway.

Thanks for your help.



Solution :

For camera.php, you need to return the data in a format in which your ajax call can read it properly. Assuming that the call to images is returning correctly, you could do the following:


camera.php

$img_dir = "image/";
$images = scandir($img_dir);

$pictures = array();
foreach($images as $img) { 
    // Not sure how these are returning, so I'm making a guess after looking at your code
    $picture = array(
        "img" => $img_dir.$img
    );
    $pictures[] = $picture;
}

echo json_encode($pictures);

For the jQuery, you need to specify your dataType as json for it to return correctly. You also need to append the desired html and data to the body on a success return, and then call a function for the animation when that is done.

jquery.custom.js

jQuery('document').ready(function() {

    var i = 0;

    var request = $.ajax({            
        url: "camera.php", 
        type: "POST", 
        dataType: "json",
        success: function(pictures){
            var html = '<ul'>;
            $.each(pictures, function(idx, picture){
                html += '<li><img src="'+picture.img+'"></li>'
            });
            html += '</ul>';
            $('body').append(html);
       }
    });

    request.done({
        loopThruImg();
    });

    function loopThruImg() {
        var li = $('li');
        li.eq(i).animate({
            opacity: 1
        }, 100, function () {
            li.eq(i).delay(1000).animate({
                opacity: 0
            }, 100, function () {
                i = i < (li.length - 1) ? i+1 : 0;
                loopThruImg(i);
            });
        });
    }
});

Some helpful CSS

   ul {
        list-style-type:none;
        position: relative;
    }
    li {
        position:absolute;
        top:0;
        opacity:0;
    }

JSFiddle for the animation

Awesome Stackoverflow answer that I borrowed heavily from


    CSS Howto..

    How to dynamically apply nested base languages in textarea?

    How to find all next siblings from a particular class using css selectors

    How to set width and text-align for button with CSS

    How to resize animated gif with HTML/CSS?

    How to target specific img using css

    How can I insert dynamic text into a div with absolute position?

    How to create diagonal boxes using css?

    how to make zurb foundation framework off canvas look flat

    How to center div within col-md-12 in bootstrap

    How to make the jQuery datePicker popup opaque and always in the foreground?

    How do you tell a browser, “if you need to wrap, wrap here first”?

    How to indent text in a select drop down menu using CSS

    How to make Css transition effect work on Safari and Chrome?

    How to get CSS background images to show up in HTML files opened by Word?

    How do I make link the highlight link conform to CSS shape

    How to access two Ids in one css selector

    How to apply a underline style to piece of text

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    show different content in multiple css popups

    How to move an entire group of objects with Javascript

    How do you put in percentage based margin to a CSS grid?

    Bootstrap - How to move styles in HTML to the .css from the example

    How to change CSS with jquery?

    How can I modify left property after hide an element using JQuery?

    How to color portion of text using css or jquery

    How to wrap long lines without spaces in HTML?

    How to always refresh file loaded by ajax, avoiding cached file

    How to achieve this layout with CSS?

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How do I get a button to show on mouseover using jQuery?