Spotlight – YUI Gallery Module

Spotlight is a YUI gallery module which is build for the more common usablity of viewing thumbnail pics in a larger version. It could be extended to any more structured html as well.

Implementation

It takes two templates, one for thumbnail version and one for the spotlight ( bigger version of selected thumbnail) part. The data is expected in json array format and it also provides few other options, which will be explained below. Upon providing the data and templates, the modules builds a UI with a thumbnail list in a carousel and currently selected thumbnail related data will be shown in the spotlight with the template provided. Currently both the template and data are mandatory.  There are only two params which are mandatory ( data & containerId) and rest of the params have default values.

You can always overwrite the CSS to achieve the design you want.

Configurations

Templates Sample

<div id=”templates” style=”display:none”>
<div id=”content-template”>
<div><img xrc=”{photo}” width=”300px” heigh=”450px”/></div>
</div>
<div id=”li-template”>
<li>
<div class=”arrow”>
<img xrc=”{photo}” class=”thumbnail” title=”{title}” alt=”{title}”>
<p class=”provider”>{title}</p>
</div>
</li>
</div>
</div>

How to Use Spotlight?

YUI code for using the Spotlight ( Default Templates)

Y.use("gallery-spotlight",function(Y){
	var spotlight = new Y.Spotlight({
		data : JSON_Data,
		containerId:"container",
		height:180,
		width:300
	});
	spotlight.process();
});

YUI code for using the Spotlight With Custom Templates

Y.use("gallery-spotlight",function(Y){
	var spotlight = new Y.Spotlight({
		data : JSON_Data,
		liTplId: "li-template", // id defined in the template sample above
		contentTplId:"content-template",// id defined in the template sample above
		containerId:"container",
		height:180,
		width:300
	});
	spotlight.process();
});

Example

An Example is available at http://santbob.github.io/gallery-spotlight.html

Please leave your comments, suggestion and/or feature request for this module in the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *