Click here to Skip to main content
13,901,343 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 12 Nov 2014
Licenced CPOL

Simple JavaScript/jQuery Photo Gallery

, 12 Nov 2014
Rate this:
Please Sign up or sign in to vote.
Simple JavaScript/jQuery Photo Gallery in 10 lines of code (jQuery)


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.

<head> <title>Example: Simple Javascript/jQuery Photo Gallery</title>
  <script src="<a href=""></script">"></script</a>>

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="" alt="Moon" />
      <img src="" alt="Orange Moon" />
      <img src="" alt="Landmarks" />
      <img src="" alt="Moon" />
     <BR><div id="description"></div><BR>
     <img id="largeImage" src="" />

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.

   $('#thumbs img').click(function(){
   $('#thumbs').delegate('img','click', function(){


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


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

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190306.1 | Last Updated 12 Nov 2014
Article Copyright 2014 by The Operator
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid