Ruby, etc

Learn all the things

He who enjoys doing and enjoys what he has done is happy. - Fortune Cookie

Creating a Image Gallery in jQuery

For one of my projects, I wanted to have a link that will open an image gallery in a lightbox. I want thumbnails at the bottom, that would display above the thumbs but larger. I found alot…alot of them in jquery. I found blogposts that review 30 (and and 10 and and 15 and and 14 and there is more!) of them at a time! So, do I try and modify one.. or .. do I write one myself?

I was also inspired by Garann (fellow DevChix) because she decided to write her own text editor (something I probably wouldn’t attempt…but she said it was not too bad! so maybe it wouldn’t be that bad after all??)

So simple interface:

Clicking the link will open the gallery, looking like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html>
  <head>
    <title>sample</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
   <style type="text/css">
     #gallery {
          display: none;
          position: absolute;
          top: 10;
          left: 30;
          width: 500px;
          height: 400px;
          padding: 16px;
          border: 2px solid red;
          background-color: white;
          z-index:1002;

     }
     #gallery img { display: block; }
     #gallery a { padding: 5px 3px 0 0; float: left; display: block; }

     #lightbox {
      display: none;
          position: absolute;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          background-color: black;
          z-index:1001;
          -moz-opacity: 0.8;
          opacity:.80;
          filter: alpha(opacity=80);
     }

     #gallery #thumb_scroller {
         position: absolute;
         width: 400px;
         overflow-y: hidden;
         overflow-x: scroll;
         xoverflow:auto;
         height: 90px;
         z-index: 100;
     }
     a#close_link {
       display: block;
       float: right;
       clear:both;
       background: white;
       padding: 3px;
      }
     #gallery2 {
         position: absolute;
         width: 200px;
         overflow-y: hidden;
         overflow-x: scroll;
         xoverflow:auto;
         height: 90px;
         z-index: 100;
         dir: rtl;

     }

#scrollingContainer{
  height: 90px;
  width: 200px;
  overflow-y: hidden;
  overflow-x: scroll;
  position:absolute;
  top:50px;
  left:50px;
  width: 200px;
}

#scrollingContainer DIV.scroller{
  position: relative;
  width:600px;
}


   <!-- Lightbox code from: -->
   <!-- http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/-->
   </style>
   <script type="text/javascript">
     $(document).ready(function() {

      $('#gallery_link').click( function() {
         $('#lightbox').show();
         $('#gallery').show();
      });


      $('#close_link').click( function() {
        $('#lightbox').hide();
        $('#gallery').hide();
      });

      $('#gallery a').click( function() {
        $('#big').attr('src', $(this).attr('data-photo'));
      });
     });
   </script>
  </head>

  <body>
   <div id="lightbox"></div>
   This is a page where there will be a popup gallery of some images.
  <br/><br/>

  <a id="gallery_link" href="#">View</a>

  <br/><br/>

  <div id="gallery">
    <a href="#" id="close_link">Close</a>
    <img id="big" height="300" src="photos/image1.jpg">
    <div id="thumb_scroller">
      <a href="#" data-photo="photos/image1.jpg"><img src="photos/thumb_image1.jpg" /></a>
      <a href="#" data-photo="photos/image2.jpg"><img src="photos/thumb_image2.jpg" /></a>
      <a href="#" data-photo="photos/image1.jpg"><img src="photos/thumb_image1.jpg" /></a>
      <a href="#" data-photo="photos/image2.jpg"><img src="photos/thumb_image2.jpg" /></a>
      <a href="#" data-photo="photos/image1.jpg"><img src="photos/thumb_image1.jpg" /></a>
      <a href="#" data-photo="photos/image2.jpg"><img src="photos/thumb_image2.jpg" /></a>
    </div>
  </div>

  <div id="scrollingContainer">
  <div class="scroller">
      <a href="#" data-photo="photos/image1.jpg"><img src="photos/thumb_image1.jpg" /></a>
      <a href="#" data-photo="photos/image2.jpg"><img src="photos/thumb_image2.jpg" /></a>
      <a href="#" data-photo="photos/image1.jpg"><img src="photos/thumb_image1.jpg" /></a>
      <a href="#" data-photo="photos/image2.jpg"><img src="photos/thumb_image2.jpg" /></a>
      <a href="#" data-photo="photos/image1.jpg"><img src="photos/thumb_image1.jpg" /></a>
      <a href="#" data-photo="photos/image2.jpg"><img src="photos/thumb_image2.jpg" /></a>
  </div>

  </body>
</html>

I can optimize the javascript some.. but just to show how easy it is..

The thumbnails are surrounded with an Anchor tag that has an attribute data-photo with the filename of the larger image. In the click function, It is grabs that value when you click the image and sets the src attribute of the #big id to the larger image. Easy huh! too easy.. cool stuff…

When I put this into production, I might have to tweak some things.. but.. I was happy with how easy it is to make an image gallery. Plugins have the advantage of being “drop-in” but in this case none of them fit my needs, so b

Special thanks to for the Emanuele Feronato for lightbox with css script

Comments