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.

Here is a quick way to run your own popurls style website

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

Manthan

2009-03-03 02:27:27

nice effect,thanx a lot

Shu

2009-02-16 00:40:22

nice one

Mark

2008-07-21 00:13:32

nice app, like the ability to float the nav away from the image, might do with a few user-based tips like the ability to move the nav and what each feature does, aside from that damn find piece of work!

Dis Cephe

2008-07-09 10:14:56

thanks...

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