Next Prev

35mm Photo Viewer

Read more and download "35mm Photo Viewer"

This is the Whiz-bang demo. Presents the pictures like in an 35mm movie. It has an attractive design, transparency, sound effects and in your help XML/XSLT support and Built-in "search" feature.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<base href="http://www.ajaxdaddy.com/web20/35mm/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<!-- 35mm Photo Viewer - client-side app -->
<!--                                     -->
<!-- v5.0.20041212: First public release -->
<!-- www.schillmania.com/projects/35mm   -->
<!--                                     -->
<title>35mm Photo Viewer V5 Beta: Demo Page</title>
<link rel="stylesheet" type="text/css" href="style/base.css" media="all" />
<link rel="alternate stylesheet" type="text/css" href="style/base-alpha.css" title="Alpha" media="all" />
<link rel="alternate stylesheet" type="text/css" href="style/base-white.css" title="White" media="all" />
<link rel="alternate stylesheet" type="text/css" href="style/base-inverted.css" title="Inverted" media="all" />
<script type="text/javascript" src="script/addeventhandler.js"></script>
<script type="text/javascript" src="script/getelementsbyclassname.js"></script>
<script type="text/javascript" src="script/mousehandler.js"></script>
<script type="text/javascript" src="script/png.js"></script>
<script type="text/javascript" src="script/soundmanager.js"></script>
<script type="text/javascript" src="script/default.js"></script>
</head>

<body>

<div>
 <img id="photo" src="image/blank.gif" alt="" />
 <div id="caption-container">
  <div id="caption" class="png">
   <div class="shade0"></div>
   <div class="shade1"></div>
   <div class="shade2"></div>
  </div>
  <div id="bookmark"><a href="#bookmark"><img src="image/bookmark.gif" alt="&quot;Permalink&quot; to this image" /></a></div>
 </div>
</div>

<div id="container">

 <div id="controls">
  <div id="search"> </div>

  <div id="about-descriptor">
   <h2>35mm Photo Viewer 5.0b</h2>
  </div>

  <div id="photos">

<div id="photoSelector" class="photoSelector png">

 <div class="container">

 <div id="pageTabs" class="pages dark item">
   <!-- page tab items are inserted here dynamically via JS-DOM. -->
   <div class="clear"></div>
 </div>

 <div>
  <ul id="pages">
    <li id="page0" class="page">
      <div class="collection first">
        <h2 class="png">Some Outdoor Photos</h2>
        <ul class="png scale">
          <li><a title="" href="photos/examples/outdoor/IMGP233X.jpg" id="outdoor0"><span>Point Grey Secondary, Vancouver BC.</span></a></li>
          <li><a title="" href="photos/examples/outdoor/IMGP2133.jpg" id="outdoor1"><span>Looking West over the C-Train rails - Calgary AB.</span></a></li>
          <li><a title="" href="photos/examples/outdoor/IMGP2327.jpg" id="outdoor2"><span>Several thousand feet over the water just off the coast of Vancouver, BC.</span></a></li>
          <li><a title="" href="photos/examples/outdoor/IMGP2930.jpg" id="outdoor3"><span>A bike path heading East near the Barlow/Max Bell area, Calgary AB.</span></a></li>
          <li><a title="" href="photos/examples/outdoor/lake_view.jpg" id="outdoor4" class="default"><span>My favourite vacation spot - located in Vernon, BC.</span></a></li>
        </ul>
        <div class="clear png"> </div>
      </div>
      <div class="collection">
        <h2 class="png">Example Indoor Collection</h2>
        <ul class="png scale">
          <li><a title="" href="photos/examples/indoor/IMGP2086.jpg" id="indoor0"><span>Hands off: These kind of plants aren't exactly touchy-feely.</span></a></li>
          <li><a title="" href="photos/examples/indoor/IMGP2092.jpg" id="indoor1"><span>Foreground: A turntable cartridge/shell/needle assembly. Background: 90-gallon fish tank.</span></a></li>
        </ul>
        <div class="clear png"> </div>
      </div>
    </li>
    <li id="page1" class="page">
      <div class="collection first">
        <h2 class="png">Some Fish Photos</h2>
        <ul class="png scale">
          <li><a title="" href="photos/examples/fish/IMGP2087.jpg" id="fish0" class="default"><span>This is a male Jack Dempsey - at least, I'm pretty sure by 'his' behaviour..</span></a></li>
          <li><a title="" href="photos/examples/fish/IMGP2139.jpg" id="fish1"><span>A pair of Jack Dempseys hang out in their cave.</span></a></li>
          <li><a title="" href="photos/examples/fish/IMGP4070.jpg" id="fish2"><span>Milfoil, introduced to the aquarium from Okanagan Lake in BC.</span></a></li>
          <li><a title="" href="http://www.example.com/" id="fish3" onclick="window.open(this.href,'externalLink');return false" class="related"><span>A related web site about fish.</span></a>
          <li><a title="" href="photos/examples/fish/moving-the-general.avi" id="fish3" class="video" title="Moving 'The General', an Iridescent Shark."><span>Moving 'The General', an Iridescent Shark.</span></a></li>
        </ul>
        <div class="clear png"> </div>
      </div>
    </li>
  </ul>
</div>

 <div class="item alt nophotos">
  <h2 class="png" style="padding-top:6px">Notes</h2>
  <div class="content png scale">
   This is a generic container for copy and other items that aren't photos.
  </div>
  <div class="clear png"></div>
 </div>

 <!-- end container -->

 </div>

 <!-- end photos -->

 <div id="about-content" class="item alt nophotos">
  <h2 class="png" style="padding-top:6px">Instructions</h2>
  <div class="content png scale">
    <p class="nospacing">View photos either by collection, or by keyword search. If applicable, multiple pages of photos are provided via icons under the collection tab.</p>
    <h2>About</h2>
    <p class="nospacing">Original code and images by <a href="http://www.schillmania.com/">Scott Schiller</a>. This web-based app is freely distributable for non-commercial use.</p>
    <h2>Resources</h2>
     Source: <a href="http://www.schillmania.com/projects/35mm_photo_viewer/">35mm Photo Viewer Homepage</a><br />
     Comments? Questions? Found a bug? <a href="http://www.scottschiller.com/">Make contact</a>.
  </div>
  <div class="clear png"></div>
 </div>

</div>

<!-- end #container -->
</div>

  </div>

 </div>

<div id="photoIcons">
 <img src="image/picture.gif" alt="picture icon" />
 <img src="image/picture_1.gif" alt="picture icon - active" />
</div>

<p id="debug" class="debug"> </p>

<script type="text/javascript">preInit();</script>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Angie

2008-05-22 18:06:03

VERY impressive! Just goes to show you do NOT need Flash ;) Nice work! :)

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

35mm Photo Viewer

This is the Whiz-bang demo. Presents the pictures like in an 35mm movie. It has an attractive design, transparency, sound effects and in your help XML/XSLT support and Built-in "search" feature.

Comment on this example