Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Spotlight (gallery-spotlight) on cdn

Last Updated: 07/8/11

+ 1 -

Santhosh Nageshwar Rao

YUI Contributor

See 1 more by this user.

Created: 04/16/11
Last CDN Push: 05/12/11
Build Tag: gallery-2011.05.12-13-26
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.0 PR2
Free for use.

Spotlight is a way of using the space effectively by aligning the items in the carousel and show the selected item in the carousel in a container below it... The carousel item and detailed items takes a template so it highly customizable.

This module uses the following gallery modules, gallery-carousel,gallery-carousel-anim,gallery-lazyloadimages.

This Usability is very famous one, which is there in many sites, this modules provides a very simple way of getting it with just JSON data and and few lines of JS.

Code Sample

<script src="http://yui.yahooapis.com/3.4.0 PR2/build/yui/yui-min.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Spotlight - YUI Gallery Module Example</title>
		<meta name="generator" content="TextMate http://macromates.com/">
		<meta name="author" content="Santhosh Babu Nageshwar Rao"><!-- Date: 2011-02-15 -->
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2010.10.13-20-59/build/gallery-carousel/assets/skins/sam/gallery-carousel.css">
		<link rel="stylesheet" type="text/css" href="../../../build/gallery-spotlight/assets/gallery-spotlight.css">
		<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-debug.js" type="text/javascript"></script>
	</head>
	<body class="yui3-skin-sam">
		<h3>Spotlight - YUI Gallery Module Example</h3>
		<div id="container"></div>
		<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>
		<script type="text/javascript">
		YUI({gallery: "gallery-2011.04.27-18-16"}).use("node",function(Y){
				Y.on("domready",function(){
					Y.use("gallery-spotlight",function(Y){
							var spotlight = new Y.Spotlight({
									data : JSON_Data,
									liTplId: "li-template",
									contentTplId:"content-template",
									containerId:"container",
									height:180,
									width:300
							});
							spotlight.process();
					});
				});
			});
		</script>
		<script type="text/javascript" src="data.js"></script>
		<script type="text/javascript" src="../../../build/gallery-spotlight/gallery-spotlight-debug.js"></script>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Spotlight - YUI Gallery Module Example</title>
		<meta name="generator" content="TextMate http://macromates.com/">
		<meta name="author" content="Santhosh Babu Nageshwar Rao">
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2010.10.13-20-59/build/gallery-carousel/assets/skins/sam/gallery-carousel.css">
		<link rel="stylesheet" type="text/css" href="../../../build/gallery-spotlight/assets/gallery-spotlight.css">
		<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-debug.js" type="text/javascript"></script>
	</head>
	<body class="yui3-skin-sam">
		<h3>Spotlight - YUI Gallery Module Example</h3>
		<div id="container"></div>
		<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>
		<script type="text/javascript">
		YUI({gallery: "gallery-2011.04.27-18-16"}).use("node",function(Y){
				Y.on("domready",function(){
					Y.use("gallery-spotlight",function(Y){
							var spotlight = new Y.Spotlight({
									data : JSON_Data,
									liTplId: "li-template",
									contentTplId:"content-template",
									containerId:"container",
									height:180,
									width:300
							});
							spotlight.process();
					});
				});
			});
		</script>
		<script type="text/javascript" src="data.js"></script>
		<script type="text/javascript" src="../../../build/gallery-spotlight/gallery-spotlight-debug.js"></script>
	</body>
</html>