jQuery Plugin For Justified Image Gallery Justified Gallery - Free Download jQuery Plugin For Justified Image Gallery - Justified-Gallery

Free Download jQuery Plugin For Justified Image Gallery – Justified-Gallery

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Justified Image Gallery – Justified-Gallery, hope it will help you in programming stack.

jQuery Plugin For Justified Image Gallery Justified Gallery - Free Download jQuery Plugin For Justified Image Gallery - Justified-Gallery
File Size: 3.94 MB
Views Total: 23662
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Justified-Gallery is a simple and fast jQuery plugin that automatically adjust the width and height of your images to create a justified image gallery on your web site.

Features:

  • Lightbox effect supported (Colorbox Plugin needed)
  • caption over image supported

Basic Usage:

1. Load jQuery library and jquery.justifiedgallery.min.js on your page

view source
1 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2 <script type='text/javascript' src='../js/jquery.justifiedgallery.min.js'></script>

2. The CSS

view source
01 html {
02 overflow-y: scroll
03 }
04 .justifiedGallery {
05 width: 100%;
06 margin-bottom: 10px
07 }
08 .justifiedGallery .jg-image {
09 position: absolute;
10 display: inline-block;
11 vertical-align: top;
12 margin-left: 0
13 }
14 .justifiedGallery .jg-image img {
15 border: none;
16 display: none
17 }
18 .justifiedGallery .jg-image a {
19 text-decoration: none
20 }
21 .justifiedGallery .jg-image-label {
22 white-space: normal;
23 font: normal 12px arial;
24 background: #000;
25 color: #fff;
26 position: absolute;
27 left: 0;
28 right: 0;
29 padding: 5px 5px 10px 8px;
30 text-align: left;
31 opacity: 0;
32 filter: alpha(opacity=0)
33 }
34 .justifiedGallery .jg-loading-img {
35 margin: auto;
36 width: 50px;
37 height: 50px;
38 background: url(../img/loading.gif) no-repeat center center
39 }
40 .justifiedGallery .jg-loading {
41 margin: auto;
42 width: 50px;
43 height: 50px;
44 background-color: white;
45 -webkit-border-radius: 3px;
46 -moz-border-radius: 3px;
47 border-radius: 3px
48 }
49 .justifiedGallery .jg-row {
50 position: relative;
51 white-space: nowrap;
52 overflow: hidden;
53 margin-bottom: 4px
54 }

3. The Html

view source
01 <div id="demo" >
02 <a href="photos/8083451788_552becfbc7_b.jpg" title="What's your destination?">
03 <img alt="What's your destination?" src="photos/8083451788_552becfbc7_m.jpg" />
04 </a>
05 <a href="photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
06 <img alt="Just in a dream Place" src="photos/7948632554_01f6ae6b6f_m.jpg" />
07 </a>
08 <a href="photos/7893834940_8fcbb47c14_b.jpg" title="Il Capo at Palermo">
09 <img alt="Il Capo at Palermo" src="photos/7893834940_8fcbb47c14_m.jpg" />
10 </a>
11 <a href="photos/7822678460_ee98ff1f69_b.jpg" title="Erice">
12 <img alt="Erice" src="photos/7822678460_ee98ff1f69_m.jpg" />
13 </a>
14 <a href="photos/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
15 <img alt="Truthful Innocence" src="photos/7302459122_19fa1d8223_m.jpg" />
16 </a>
17 ...
18 </div>

4. The javascript

view source
01 <script type="text/javascript">
02 $("#demo").justifiedGallery({
03 sizeRangeSuffixes : {
04  
05   // e.g. Flickr uses '_t'
06   'lt100': '', 
07  
08   // e.g. Flickr uses '_m'
09   'lt240': '', 
10  
11   // e.g. Flickr uses '_n'
12   'lt320': '', 
13  
14   // e.g. Flickr uses ''
15   'lt500': '', 
16  
17   // e.g. Flickr uses '_z'
18   'lt640': '', 
19  
20   // e.g. Flickr uses '_b'
21   'lt1024': '',
22 },
23  
24 rowHeight : 120,
25  
26 // negative value = no limits,
27 // 0 = 1.5 * rowHeight
28 maxRowHeight : 0,
29  
30 margins : 1,
31  
32 // negative value = same as margins, 0 = disabled

Related posts:

33