Simple JavaScript/jQuery Photo Gallery

Teraten

4.90/5 (5 votes)

Nov 12, 2014

CPOL

23501

Simple JavaScript/jQuery Photo Gallery in 10 lines of code (jQuery)

Introduction

You can create your own JavaScript/jQuery photo gallery with 10 lines of jQuery.

View the source of the working demo here.

Using the Code

One HTML page:

Step 1

The include file. Include a copy of the jquery library.

<html>
<head> <title>Example: Simple Javascript/jQuery Photo Gallery</title>
  <script src="<a href="http://www.oproot.com/js/jquery-1.8.0.min.js"></script">
  http://www.oproot.com/js/jquery-1.8.0.min.js"></script</a>>
</head>

Step 2

The HTML code. Create gallery div, panel div, thumbs div, description div, and largeImage div. Within the thumbs div, place the thumbnail images that make up the gallery. Within the largeImage div, place a large version of one of the thumbnails.

<body bgcolor="black">
 <table bgcolor='gray'>
 <tr><td style="vertical-align:top" width="275px"> 
   <div id="gallery">
    <div id="panel">
     <div id="thumbs">
      <img src="http://www.oproot.com/img/moon2_thumb.jpg" alt="Moon" />
      <img src="http://www.oproot.com/img/09192008orange_red_moon_thumb.jpg" alt="Orange Moon" />
      <img src="http://www.oproot.com/img/moon_landmarks_thumb.jpg" alt="Landmarks" />
      <img src="http://www.oproot.com/img/moon_thumb.jpg" alt="Moon" />
     </div>
     <BR><div id="description"></div><BR>
     <img id="largeImage" src="http://www.oproot.com/img/moon2_large.jpg" />
    </div>
   </div>

Note: The thumbnails and large images should have the same file name - EXCEPT the thumbnails will contain the word "thumb" while the large images contain the word "large".

Step 3

The 10 lines of jQuery. The script loads the large version of the thumbnail that was clicked.

    <script>
   $('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
   });
   $('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
   });
   </script>
  </td></tr>
 </table>
</body>
</html>