Justified Gallery

Justified Gallery is a JQuery plugin that allows you to create an high quality justified gallery of images. Fill all the spaces! 
A common problem, for people who create sites, is to create an elegant image gallery that manages the various sizes of images. Flickr and Google+ manage this situation in an excellent way, the purpose of this plugin is to give you the power of these solutions, with a new fast algorithm.

Ideally, we want a disposition of the images without cropping them. But, to dispose all the images, minimizing their cropping parts, can be reduced to the “Knapsack Problem”, known to be an NP-complete problem. We can’t do miracles, but we can try to minimize the cropping parts of the images. Furthermore, we need a good appealing disposition: we need that all the images of a row to have the same height.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: miromannino.com

1. INCLUDE JS AND CSS FILES

<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.justifiedGallery.js"></script>

2. HTML

<div id="mygallery" >
  <a href="path/to/myimage1_original.jpg">
    <img alt="Title 1" src="path/to/myimage1_t.jpg"/>
  </a>
  <a href="path/to/myimage2_original.jpg">
    <img alt="Title 2" src="path/to/myimage2_t.jpg"/>
  </a>
  <!-- other images... -->
</div>

3. JAVASCRIPT

$("#mygallery").justifiedGallery();

4. OPTIONS

option	default value	description
rowHeight	120	The approximately height of rows.
maxRowHeight	0	Negative value to haven’t limits. Zero to have a limit of1.5 * rowHeight
sizeRangeSuffixes	{'lt100':'_t',  'lt240':'_m',  'lt320':'_n',  'lt500':'',  'lt640':'_z',  'lt1024':'_b'}	Describes the suffix for each size range. By default the Flickr suffixes are used.
lastRow	'nojustify'	Decide if you want to justify the last row (i.e. 'justify') or not (i.e.'nojustify'), or to hide the row if it can’t be justified (i.e. 'hide')
fixedHeight	false	Decide if you want to have a fixed height. This mean that all the rows will be exactly with the specified rowHeight.
captions	true	Decide if you want to show the caption or not, that appears when your mouse is over the image.
margins	1	Decide the margins between the images
randomize	false	Automatically randomize or not the order of photos.
extension	/.[^.]+$/	Specify the extension for the images with a regex. Is used to reconstruct the filename of the images, change it if you need. For example /.jpg$/ is to detect only the “.jpg” extension and no more.
refreshTime	250	The time that the plugin waits before checking the page size, and if it is changed it recreates the gallery layout
rel		To rewrite all the links rel attribute with the specified value. For example can be ‘gallery1′, and is usually used to create gallery group for the lightbox (e.g. Colorbox)
target		To rewrite all the links target attribute with the specified value. For example, if you don’t use a lightbox, specifying '_blank', all the images will be opened to another page.

5. EVENTS

Important configurations

An important configuration of the plugin is the row height. If you have an height of 70px, the algorithm first resizes the images to have this height:

If the row is full, the algorithm removes the images that can’t stay in the same row. Then, it resizes the other images fill the entire row width.

This changes the row height, or cuts the images if you have configured the plugin to have a fixed height. Notice that, despite you don’t have the “fixed height” option, an image can be cut a little to have the same height of the other images in the same row.

All the images that can’t stay in the same row are placed in the next row. This algorithm examines each row until it reaches the last. But, this last row may not have enough images to fill the entire width. In this case you can decide (with the lastRow option) to leave a blank space, to justify the images, or to hide the last row if there is too much blank space. But, note that, if you decide to justify the last row, and you don’t have the fixed height option, the last images can be much larger than the others (you can use the maxRowHeight option to control this behavior).

High quality galleries

The plugin is based on the concept that you have various thumbnails for a single image. In fact, you can configure the gallery to show your images in different sizes, and also the plugin may decide to resize some images to fill the remaining empty space. Hence, the plugin needs thumbnails with different sizes to guarantee always an high quality; we don’t want that small thumbnails are resized to be very big (low quality) and we also don’t want that large thumbnails are resized to be very small (low performance).

In practice, you must resize your images in the upload phase (e.g. WordPress and Flickr work in this way). The plugin uses, by default, the Flickr Size Suffixes:

With this settings you need to have 7 thumbnails for a single images: "myimage_t.jpg", "myimage_m.jpg", and so on.

As we have seen, a gallery is a container with a list of links. Each link points to the original image, and contains a thumbnail. The Justified Gallery plugin, when it is called, needs to know the with and height of each thumbnail: it needs to download them the at least once. To start, it downloads the thumbnails that are specified in the HTML (e.g."path/to/myimage1_t.jpg"). Then, if the plugin needs a bigger thumbnail (e.g. the one with the "_m" suffix), it downloads the bigger thumbnail changing the URL (e.g."path/to/myimage1_m.jpg").

If you don’t want to provide all the sizes, you can configure the settings sizeRangeSuffixes. For example, to have only one thumbnail for each image, with the suffix '_t', you can set the plugin to have '_t' for all the suffixes.