Gallery


What's This?

This is another demonstation of the imageBelt.js script I wrote, featured on this page. There, the default behaviour is used by creating a div tag with the id 'canvas' and simply importing the script within the <head> section of the document.

In this example, the script is imported and the html div containers for the canvas and slanted photo are provided, and the following calls are made in a javascript block at the bottom of the page:
<script type="text/javascript">
  imageBelt.runOnPageLoad = false;
  imageBelt.createImageGallery('slanted_photo_inner', 372, 512, 20, 96);
</script>

The same set of 2-Dimensional images is used (which incidentally is developer configurable) but uses the technology to present them in a slanted 3-Dimensional image gallery rather than a moving belt.

TURNS THIS...
Images before
...INTO THIS
Images after

Get the Code


If you do not have the latest version of jQuery, download it here.

How to Use it

  • Save the script somewhere sensible
  • Ensure your HTML contains the following:
    <div id="canvas">
      <div id="slanted_photo">
        <div id="slanted_photo_inner">
        </div>
      </div><!-- slanted_photo -->
    </div><!-- canvas -->
  • Import jQuery if you have not already done so.
    <script src="js/jQuery1.5.2.js" language="javascript" type="text/javascript"></script>
  • Import the script
    <script src="js/imageBelt.js" language="javascript" type="text/javascript"></script>
  • Import the stylesheet
    <link rel="stylesheet" href="css/image_belt.css" />
  • Set the variable imageBelt.images either by modifying it directly in the javascript file or by setting it within your HTML (after importing it) e.g.
    images : 'images/1.jpg,images/2.jpg,images/3.jpg'.split(',');
  • Near the bottom of your page, preferably the last tag before your </body>, create your gallery e.g.
    <script type="text/javascript">
      imageBelt.runOnPageLoad = false;
      imageBelt.createImageGallery('slanted_photo_inner', 372, 512, 20, 96);
    </script>
  • And that's it! The script will do the rest for you. I'd love to see and hear your feedback and suggestions.
  • If you're at all impressed, interested, or just feeling nice, use the bookmarking and sharing facilities at the bottom of the page to spread the word!