New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/mosaiqy-show-image-thumbnails-and-zoom/
Mosaiqy - Show image thumbnails and zoom,
Download Demo
More Demos
Thumbnail link (no zoom and no scroll)
Event callbacks
Mixing initial images JSON/HTML
Multiple instances
Flickr
Flickr (no zoom, link to flickr photo page)
Panoramio (and HTML5 GeoLocation)
This jQuery plugin Mosaiqy for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" media="screen" href="lib/lib-css/mosaiqy.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="lib/mosaiqy-1.0.2.min.js" id="mosaiqy-tpl"></script>
Mosaiqy 1.0.2 was specifically designed for jQuery 1.9 or newer and HTML5 pages, for an easy integration with Paul Irish’s HTML5 boilerplate.
If you don’t use HTML5 boilerplate (as neither do all demo pages) you could run anyway this plugin: all you need is to choose the HTML5 doctype defining multiple <html> tags wrapped on conditional comment.
<!doctype html> <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> ...
Unless you’re loading modernizr into your page, please make sure to insert the snippet below into your <head> section. If you plan to run this plugin on IE versions prior to 9 (and if you’re also including jQuery < 1.7) you will need to include shiv (you may omit the protocol) and innerShiv scripts inside a conditional comment.
<head> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <script> (function(doc) \b)no\-js(\b(document.documentElement)); </script> ... </head>
2. HTML
The first thing to know is how the plugin works: the blocks on the grid are generated by a HTML5 template (the highlighted rows) handlebars/mustache alike and the information about images (path of thumbnail/zoom and description) are retrieved by a JSON/JSONP data structure. This is the javascript snippet I used for the example in this page (you can find it at the bottom of the source code)
<script src="lib/mosaiqy-1.0.2.min.js" id="mosaiqy_tpl"> <div> <figure><a href="images/zoom/$img"><img src="images/thumb/$img" longdesc="..."> <figcaption>$desc</figcaption></a> </figure> </div> </script>
3. JAVASCRIPT
$(document).ready(function() $('.mosaiqy').mosaiqy( template : "mosaiqy_tpl", ... data : [ img : "1.jpg", desc: "Rifugio «Città di Fiume»" ... ] ); );
The plugin looks for an element with class .mosaiqy with a nested unordered list ul. As you can see on the first demo available, the list could be empty or partially filled with list-items in which you have replicated your template with real data (for SEO purposes or other)
When you call the plugin you can specify some options (listed below). The most important one is data who accept an array of objects, each one containing the information about a single image (thumb and zoom). In this example, every object has img and a desc key (of course you can name your keys as you want). These key are dinamically interpolated with the HTML5 template above, respectively where the placeholders $img and $desc occur.
If your data structure is not flat and you need to find a key into nested sub-objects you can use dot-notation. if the JSON is like so
data : [ images : low_resolution : url : "1.jpg" , ... ]
like in the instagram integration demo, then the placeholder is $images.low_resolution.url.
Some constraints:
The template must be defined inside a <script> element (I wrote mine in the element that loads the plugin, just to reduce code) which must define an id attribute specified as the template option value;
The template must contain at least that specific markup. The thumbnail is represented by an <img> element, optionally wrapped in a <a> element (pointing to its zoom) and the<figcaption> should contain image caption and/or information. This minimum markup is necessary to make the plugin properly work.
You can also add other markup than this or hide the existing one via css but remember that the template code will be injected into a <li> element, so be sure not to wrap your template in a list-item (I used a simple <div>).
If you also specify an URL for the longdesc attribute on the thumbnail image, your zoom image will be automatically linked to that address. This behaviour could be necessary when using the plugin with an external service integration – like panoramio – where a link to the photo or to the user page is requested by the terms of service.
4. OPTIONS
animationDelay: the number of milliseconds between a slide effect and the next one.Default value: 3000 (3s)
animationSpeed: the number of milliseconds of slide effects.Default value: 800 (0.8s)
avoidDuplicates: boolean flag (true or false). If the loop option is set to true, the plugin loads a thumbnail from the json even if the same image is already inside the grid. If avoidDuplicates is set to true and JSON provides enough different images to load, the plugin will try to avoid injecting duplicate thumbnails. Since this option performs some extra operation its value is by default set to false.Default value: false
cols: the number of columns of the grid.Default value: 2
fadeSpeed: the number of milliseconds needed for fadeIn/fadeOut effects while opening and closing zoom images.
indexData: the number representing the JSON index from which the plugin should start to retrieve information. This could be useful to skip some initial images or to allow duplication of some thumbnails.Default value: 0
loadTimeout: the number of milliseconds to wait before discarding an image (thumbnail and zoom) due to excessive latency, network errors, 404 and so on.Default value: 7500 (7,5s)
openZoom: boolean flag (true or false). if set to true a click on a thumbnail will open a zoom image. If set to false no zoom will be open.Default value: true
onCloseZoom: if defined this function is called when a zoom image has been closed. An argument representing the <li> jQuery object containing the thumbnail is also passed to the callback.
onOpenZoom: if defined this function is called when a zoom image has been opened. An argument representing the <li> jQuery object containing the thumbnail is also passed to the callback.
loop: boolean flag (true or false). if this option is set to false, when latest JSON image is injected (regarding to avoidDuplicates option) the plugin stops all sliding effects over the thumbnails. Otherwise JSON is reloaded continuously on a loop.Default value: false
rows: the number of rows of the grid.Default value: 2
scrollZoom: boolean flag (true or false). When set to true, on the click event over a thumbnail the plugin will try to scroll the entire page until the thumbnail reaches the top boundary, then the zoom image will be opened. When set to false no scroll is performed.Default value: true
template: the id of the <script> elements in which the markup of template has been defined by the user.
