Click here to Skip to main content
12,076,216 members (50,168 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

12.4K views
7 bookmarked
Posted

Simple JavaScript/jQuery Photo Gallery

, 12 Nov 2014 CPOL
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> 

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
Oproot Research
United States United States
+


Oproot Research
Research, Development
Science Experiments
Photography, Reading

You may also be interested in...

Comments and Discussions

 
QuestionAnother Photo Gallery Pin
tom206813-Nov-14 14:52
membertom206813-Nov-14 14:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.160208.1 | Last Updated 12 Nov 2014
Article Copyright 2014 by The Operator
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid