PHP and JSON Gallery

Developed using: PHP, JSON, jQuery and CSS
Author: Anton Radev
What does it do:
  • PHP array with images URLs and names sends data to the JavaScript via json_encode() function
  • One line of jQuery creates a box with the image file <img src="' + value + '">
  • Another few lines of jQuery get the image src attribute and append a box for the opened picture
  • Some CSS stylesheets format everything else

Here is some of it:

PHP

$data = array(
    "Product One" => "images/1.jpg",
    "Product Two" => "images/2.jpg",
    "Amazing Product 3" => "images/3.jpg",
    "Product Four" => "images/4.jpg",
                    

Appending Gallery Item

jQuery.each(data, function(name, value) {
    $(".gallery").append('<div class="item"><img src="' + value + '"><p>' + name + '</p></div>');
});
                    

jQuery

$(this).click(function() {
    $(".opened").remove();
    $("body").append('<div class="opened"></strong>');
    image = $(this).find("img").attr("src");
    $(".opened").append('<img src="' + image + '">');
    });

$("body").on("click", ".opened", function() {
    $(".opened").remove();
});