# Gallery SourceBack to Demos Return to Gallery Demo

`

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. -->
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Gallery</title>
    <link href="../css/screen.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../includes/xpath.js"></script>
    <script type="text/javascript" src="../../includes/SpryData.js"></script>
    <script type="text/javascript" src="../includes/SpryEffects.js"></script>
    <script type="text/javascript">
    var dsGalleries = new Spry.Data.XMLDataSet("galleries/galleries.xml", "galleries/gallery");
    var dsGallery = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery");
    var dsPhotos = new Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}", "gallery/photos/photo");
    </script>
    <script src="gallery.js"  type="text/javascript"></script>
    </head>
    <body id="gallery">
    <noscript><h1>This page requires JavaScript. Please enable JavaScript in your browser and reload this page.</h1></noscript>
    <div id="wrap">
    	<h1 id="albumName" spry:region="dsGallery">{sitename} <span class="return"><a href="../index.html">Back to Demos</a></span> <span class="source"><a href="source.html">View Source </a></span></h1>
    	<div id="previews">
    		<div id="galleries" spry:region="dsGalleries">
    		<label for="gallerySelect">View:</label>
    			<select spry:repeatchildren="dsGalleries" id="gallerySelect" onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
    				<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{sitename}</option>
    				<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}">{sitename}</option>
    			</select>
    		</div>
    		<div id="controls">
    			<ul id="transport">
    				<li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage(true);" title="Previous">Previous</a></li>
    				<li class="pausebtn"><a href="#" onclick="if (gSlideShowTimer) StopSlideShow(); else StartSlideShow();" title="Play/Pause" id="playLabel">Play</a></li>
    				<li><a href="#" onclick="StopSlideShow(); AdvanceToNextImage();" title="Next">Next</a></li>
    			</ul>
    		</div>
    		<div id="thumbnails" spry:region="dsPhotos dsGalleries dsGallery">
    			<div spry:repeat="dsPhotos" onclick="HandleThumbnailClick('{ds_RowID}');" onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@thumbheight}');" onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
    				<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}" src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}" width="24" height="24" style="left: 0px; right: 0px;" />
    			</div>
    			<p class="ClearAll"></p>
    		</div>
    	</div>
    	<div id="picture">
    		<div id="mainImageOutline" style="width: 0px; height: 0px;"><img id="mainImage" alt="main image" /></div>
    	</div>
    	<p class="clear"></p>
    </div>
    </body>
    </html>

`