Photo Box Example

Photo Box Example : Window Dialog : Ajax Layer JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Window Dialog »




<!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.navioo.com/style/logo.png",caption:"Linus"},
        {src:"http://www.navioo.com/style/logo.png",caption:"Linus 2"},
        {src:"http://www.navioo.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 &lt;select&gt; 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>