Photo Box Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Panel - PhotoBox Example</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<script type="text/javascript" src="./examples/container/js/PanelEffect.js"></script>
<script type="text/javascript" src="./examples/container/js/PhotoBox.js"></script>
<link rel="stylesheet" type="text/css" href="./examples/container/css/photobox.css" />
<script language="javascript">
YAHOO.namespace("example.photobox");
function init() {
YAHOO.example.photobox.box = new YAHOO.widget.PhotoBox("win", {
effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}],
fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:false, modal:true,
photos:[{src:"http://www.java2s.com/style/logo.png",caption:"Linus"},
{src:"http://www.java2s.com/style/logo.png",caption:"Linus 2"},
{src:"http://www.java2s.com/style/logo.png",caption:"Dobb's Ferry, NY"}
], width:"500px"}
);
YAHOO.example.photobox.box.render();
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box" id="bodyMain">
<div class="hd">
<h1>PhotoBox Example</h1>
</div>
<div class="bd">
<button onclick="YAHOO.example.photobox.box.show()">Show the PhotoBox</button>
<select>
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
</select>
</div>
</div>
<div id="win">
<div class="hd"><div class="lt"></div><span id="win_title">Linus</span><div class="rt"></div></div>
<div class="bd">
<img id="win_img" src="#" width="500"/>
</div>
</div>
</div>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category