Having problems trying to find a light-weight gallery thats fully customizable? Look no further, the Crispy Gallery by Shotgun Mag has loads of mouth watering low-cal features & a sweet tasting built in pre-loader.

What are the benefits of the gallery??

• Lightweight javascript file
• Dynamically add as many images as needed by simply adding additional HTML code
• Image Pre-Loader which pre-loads images as the web page loads
• Custom HTML tags allows you to switch between mouse over, or mouse click event to update main images
• Built in comment field to accompany the image within the gallery, again loaded through simple HTML
• No file size or image gallery size restrictions
• Content can be delivered anywhere within your webpage with the inclusion of a simple HTML tag
• Comment field can be CSS styled as if its was text within your page
• Quick navigation allows flowing viewing of all gallery images, with no loading times
• Randomizer for true dynamic content delivery

View our Demo by clicking here…

How can I integrate in my site ?

In four easy steps you can have a dynamic image gallery on your own site:

1. Please download the ‘Crispy Gallery’ source files for this tutorial, then upload them to your site

2. Edit your HTML page to include the gallery output HTML

<div id="imageHolder">
   <img id="startimage" src="YOUR_START_IMAGE_URL" 
       width="388" height="255" />               
</div>

Inserting this HTML causes a <DIV> element is created which has one item within it, a single image which we will dynamically change. The id of the div, <div id="imageHolder"> must have the name imageHolder so that our code can find this element and update it. You can edit the width and height to fit your image size.

3. Edit your HTML page to include the thumbnails panel

<a href="content/project_images/image1.gif"
  rel="crispyimage/mouseover" rev="imageHolder" title="image1" >
<img src="content/project_thumbs/1.gif" width="19" height="19" /> 
</a>

To add an image to the gallery you simply need to include a thumbnail with a special <a> tag. You can add as many as you like as long as they are coded one after each other. Several elements of the <a> are special and used by the gallery code , firstly the rel attribute is used to store the event type you would like to use , you can use two values:

crispyimage/mouseover - this will change the image when the user moves the mouse over the thumb

crispyimage/click - this will change the image when the user click the mouse on the thumb

All gallery items must be the same type of event. Secondly we use the rev attribute to tell our dynamic gallery the name of the object we will be updating , remember we set that in step 2? And finally the title attribute is used to send the comment you would like to see accompany the image, in our example the name of the image

4. Add code for additional feature you need

<a href="javascript:crispygallery.fetchimage_previous();"></a>

<a href="javascript:crispygallery.fetchimage_next();"></a>

Add this anchor to an image or text will create a link which loads the next image in the series to the gallery.

<a href="javascript:crispygallery.fetchimage_previous();"></a>

Add this anchor to an image or text will create a link which loads the previous image in the series to the gallery.

<a href="javascript:crispygallery.fetchimage_rnd();"></a>

Add this anchor to an image or text will create a link which loads a random image in the series to the gallery.