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:


$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>');


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

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