Click here to Skip to main content
Click here to Skip to main content
Go to top

Simple JavaScript/jQuery Photo Gallery

, 21 May 2014
Rate this:
Please Sign up or sign in to vote.
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> 

If you have any questions, comments, concerns, please leave a message or see the working demo here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

The Operator

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 22 May 2014
Article Copyright 2014 by The Operator
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid