Super Image gallery with ajax

I made a lightbox using the clearbox script. To see how it works click on this next link and klik on the main image or on the zoom icon to see it in action. I havn't done it for multiple images yet.

Click

If someone is interested in how it's made, let me know.

Klibansky Designs
W: http://www.klibanskydesigns.com
E: info@klibanskydesigns.com

If youre using only 1 foto, this is btter because of no pop-ups.

First you add the following two lines to your header.asp in the head of the html:

<!-- Start Clearbox -->
<link type="text/css" rel="stylesheet" href="clearbox/css/clearbox.css" />
<script src="clearbox/js/clearbox.js" type="text/javascript"></script>
<script src="clearbox/js/clsource.js" type="text/javascript"></script>
<!-- Stop Clearbox -->

Then take this attached zip file and extract it in your pc folder (creating pc/clearbox with 3 dirs inside). 2007-03-26_055120_clearbox.zip

Now open pc/viewPrdCode.asp and replace replace line 859 until 888 with the following:

  %>
    <div class="pcShowMainImage">
    <%
    '// If this is the pop window swap out the image for the selection
    if pcv_strPopWindowOpen = 1 then
     pcv_strVariableImage = pcv_strCurrentUrl
    else
     pcv_strVariableImage = pImageUrl
    end if
    %>
    <a href="catalog/<%=pLgimageURL%>" title="<%=pDescription%>" rel="clearbox">
    <img name='mainimg' src='<%=pcv_tmpNewPath%>catalog/<%=pImageUrl%>' alt="<%=pDescription%>" />
    </a>
    </div>
 
   <% if len(pLgimageURL)>0 then %>
    <div style="width:100%; text-align:right;">
    <% if InStr(Request.ServerVariables("HTTP_USER_AGENT"),"MSIE") OR InStr(Request.ServerVariables("HTTP_USER_AGENT"),"Firefox") then %>
    <a href="catalog/<%=pLgimageURL%>" title="<%=pDescription%>" rel="clearbox">
    <% elseif InStr(Request.ServerVariables("HTTP_USER_AGENT"),"Safari") then %>
    <a href="catalog/<%=pLgimageURL%>" title="<%=pDescription%>" rel="clearbox">
    <% else %>
    <a href="catalog/<%=pLgimageURL%>" title="<%=pDescription%>" rel="clearbox">
    <% end if %>
    <img src="<%=pcv_tmpNewPath%><%=rsIconObj("zoom")%>" border="0" hspace="10">
    </a>
    </div>
   <% end if %>
   
  <%

This is presuming that you are using the original asp file. Otherwhise look at the code above and try to find it and replace.

What youre doing is, oce you have the css ad js files included in the header of the html, when you add title="some title" rel="clearbox" inside the a-tag linking to any image, you will get the clearbox effect.

Greetz

Klibansky Designs
W: http://www.klibanskydesigns.com
E: info@klibanskydesigns.com