The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
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.
<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>
All code on this site is licensed under the BSD License unless stated otherwise.