New Image Gallery

In this section, I will show you how to change your standard every-day image gallery into a fancy slide-show.

Extract the files from this ZIP and upload them to your site's DESIGN area.

Next, you will want to make the following code changes to your Gallery.asp file:

• Add the GalleryStyles.css
• Add the Gallery.js
• Add the function startSlideShow() to the onLoad event.

Next, locate the line in your gallery.asp which prints the images. It will look something like this:

Your new code will look something like this (please note that due to differences in designs, you may have to edit the code below to fit your particular design):

                        <tr>
                            <td valign="middle" style="background-color:black;">
                                <br><br>
                                <ul id="slideshow">
<% 
Dim iLoop, iTotal, sImageUrl, sImageMThumb, sImageAlt, sImageThumb, sTitle

iTotal = oPublisher.call("GET_GalleryCount", iPageID, "Gallery")
                                
For iLoop = 0 To (iTotal - 1)
  sImageUrl    = oPublisher.call("GET_GalleryImageURL", iPageID, "Gallery", iLoop)
  sImageMThumb = oPublisher.call("GET_GalleryThumbURL", iPageID, "Gallery", iLoop, 500, 300, false)
  sImageAlt    = oPublisher.call("GET_GalleryAltText", iPageID, "Gallery", iLoop)
  sImageThumb  = oPublisher.call("GET_GalleryThumbURL", iPageID, "Gallery", iLoop, 100, 100, false)
  sTitle       = oPublisher.call("get_PrintPageItem", iPageID, "Title")

  response.write("<li>")
  response.write("  <h3>"+sTitle+"</h3>")
  response.write("  <span>"+sImageMThumb+"</span>")
  response.write("  <p>"+sImageAlt+"</p>")
  response.write("  <a href="""+sImageUrl+"""><img src="""+sImageThumb+""" alt="""+sImageAlt+""" /></a>")
  response.write("</li>")
Next
%>                           
                                </ul>
                                <div id="wrapper">
                                  <div id="fullsize" style="overflow:hidden;">
                                    <div id="imgprev" class="imgnav" title="Previous Image"></div>
                                    <div id="imglink"></div>
                                    <div id="imgnext" class="imgnav" title="Next Image"></div>
                                    <div id="image"></div>
                                    <div id="information">
                                    <h3></h3>
                                    <p></p>
                                    </div>
                                  </div>
                                  <div id="thumbnails">
                                    <div id="slideleft" title="Slide Left"></div>
                                    <div id="slidearea">
                                      <div id="slider"></div>
                                    </div>
                                    <div id="slideright" title="Slide Right"></div>
                                  </div>
                                </div>
                                <p/>&nbsp<p/>&nbsp;<p/>&nbsp;<p/>&nbsp;<p/>
    <script type="text/javascript">
        $('slideshow').style.display='none';
        $('wrapper').style.display='block';
        var slideshow=new TINY.slideshow("slideshow");
        function startSlideShow(){
                slideshow.auto=true;
                slideshow.speed=5;
                slideshow.link="linkhover";
                slideshow.info="information";
                slideshow.thumbs="slider";
                slideshow.left="slideleft";
                slideshow.right="slideright";
                slideshow.scrollSpeed=4;
                slideshow.spacing=5;
                slideshow.active="#fff";
                slideshow.init("slideshow","image","imgprev","imgnext","imglink");
        }
    </script>
                            </td>
                        </tr>

Click HERE to view the old gallery page.

Click HERE to view the new gallery page.