Pop Up Window - Dynamic Page - Need Best Solution

Question

I'd like to create a pop-up window for my site. I've used behaviors in the past. I'm not sure if that's the best way now. Basiclly I have a photo gallery with thumbnails. Once you click the thumbnail I want a larger window to open with the image. I've seen the javascript windows used that use CSS lightbox, however I can't get it to work with my site. I guess I should mention I'm using:
ASP vbscript
SQL Database
Unit is set for repeating regions
Help me find the best solution to carry out this task. Thanks in advance.

Answer 1

At this time I can't post the page. This is what I'm using:
http://www.lokeshdhakar.com/projects/lightbox2/
Using asp vbscript ,ms sql database with a link to the image paths that are sitting in the images folder.
This is really all I can show you. Hopefully you can make heads of tails out of it. Thanks for answering my post!
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/conn_ssfGallery.asp" -->
<%
Dim rs_ssfGallery
Dim rs_ssfGallery_cmd
Dim rs_ssfGallery_numRows
Set rs_ssfGallery_cmd = Server.CreateObject ("ADODB.Command")
rs_ssfGallery_cmd.ActiveConnection = MM_conn_ssfGallery_STRING
rs_ssfGallery_cmd.CommandText = "SELECT * FROM dbo.tbl_pictures ORDER BY picture_ID ASC"
rs_ssfGallery_cmd.Prepared = true
Set rs_ssfGallery = rs_ssfGallery_cmd.Execute
rs_ssfGallery_numRows = 0
%>
<%
Dim HLooper1__numRows
HLooper1__numRows = 25
Dim HLooper1__index
HLooper1__index = 0
rs_ssfGallery_numRows = rs_ssfGallery_numRows + HLooper1__numRows
%>
<%
'  *** Recordset Stats, Move To Record, and Go To Record: declare stats variables
Dim rs_ssfGallery_total
Dim rs_ssfGallery_first
Dim rs_ssfGallery_last
' set the record count
rs_ssfGallery_total = rs_ssfGallery.RecordCount
' set the number of rows displayed on this page
If (rs_ssfGallery_numRows < 0) Then
  rs_ssfGallery_numRows = rs_ssfGallery_total
Elseif (rs_ssfGallery_numRows = 0) Then
  rs_ssfGallery_numRows = 1
End If
' set the first and last displayed record
rs_ssfGallery_first = 1
rs_ssfGallery_last  = rs_ssfGallery_first + rs_ssfGallery_numRows - 1
' if we have the correct record count, check the other stats
If (rs_ssfGallery_total <> -1) Then
  If (rs_ssfGallery_first > rs_ssfGallery_total) Then
    rs_ssfGallery_first = rs_ssfGallery_total
  End If
  If (rs_ssfGallery_last > rs_ssfGallery_total) Then
    rs_ssfGallery_last = rs_ssfGallery_total
  End If
  If (rs_ssfGallery_numRows > rs_ssfGallery_total) Then
    rs_ssfGallery_numRows = rs_ssfGallery_total
  End If
End If
%>
<%
Dim MM_paramName
%>
<%
' *** Move To Record and Go To Record: declare variables
Dim MM_rs
Dim MM_rsCount
Dim MM_size
Dim MM_uniqueCol
Dim MM_offset
Dim MM_atTotal
Dim MM_paramIsDefined
Dim MM_param
Dim MM_index
Set MM_rs    = rs_ssfGallery
MM_rsCount   = rs_ssfGallery_total
MM_size      = rs_ssfGallery_numRows
MM_uniqueCol = ""
MM_paramName = ""
MM_offset = 0
MM_atTotal = false
MM_paramIsDefined = false
If (MM_paramName <> "") Then
  MM_paramIsDefined = (Request.QueryString(MM_paramName) <> "")
End If
%>
<%
' *** Move To Record: handle 'index' or 'offset' parameter
if (Not MM_paramIsDefined And MM_rsCount <> 0) then
  ' use index parameter if defined, otherwise use offset parameter
  MM_param = Request.QueryString("index")
  If (MM_param = "") Then
    MM_param = Request.QueryString("offset")
  End If
  If (MM_param <> "") Then
    MM_offset = Int(MM_param)
  End If
  ' if we have a record count, check if we are past the end of the recordset
  If (MM_rsCount <> -1) Then
    If (MM_offset >= MM_rsCount Or MM_offset = -1) Then  ' past end or move last
      If ((MM_rsCount Mod MM_size) > 0) Then         ' last page not a full repeat region
        MM_offset = MM_rsCount - (MM_rsCount Mod MM_size)
      Else
        MM_offset = MM_rsCount - MM_size
      End If
    End If
  End If
  ' move the cursor to the selected record
  MM_index = 0
  While ((Not MM_rs.EOF) And (MM_index < MM_offset Or MM_offset = -1))
    MM_rs.MoveNext
    MM_index = MM_index + 1
  Wend
  If (MM_rs.EOF) Then
    MM_offset = MM_index  ' set MM_offset to the last possible record
  End If
End If
%>
<%
' *** Move To Record: if we dont know the record count, check the display range
If (MM_rsCount = -1) Then
  ' walk to the end of the display range for this page
  MM_index = MM_offset
  While (Not MM_rs.EOF And (MM_size < 0 Or MM_index < MM_offset + MM_size))
    MM_rs.MoveNext
    MM_index = MM_index + 1
  Wend
  ' if we walked off the end of the recordset, set MM_rsCount and MM_size
  If (MM_rs.EOF) Then
    MM_rsCount = MM_index
    If (MM_size < 0 Or MM_size > MM_rsCount) Then
      MM_size = MM_rsCount
    End If
  End If
  ' if we walked off the end, set the offset based on page size
  If (MM_rs.EOF And Not MM_paramIsDefined) Then
    If (MM_offset > MM_rsCount - MM_size Or MM_offset = -1) Then
      If ((MM_rsCount Mod MM_size) > 0) Then
        MM_offset = MM_rsCount - (MM_rsCount Mod MM_size)
      Else
        MM_offset = MM_rsCount - MM_size
      End If
    End If
  End If
  ' reset the cursor to the beginning
  If (MM_rs.CursorType > 0) Then
    MM_rs.MoveFirst
  Else
    MM_rs.Requery
  End If
  ' move the cursor to the selected record
  MM_index = 0
  While (Not MM_rs.EOF And MM_index < MM_offset)
    MM_rs.MoveNext
    MM_index = MM_index + 1
  Wend
End If
%>
<%
' *** Move To Record: update recordset stats
' set the first and last displayed record
rs_ssfGallery_first = MM_offset + 1
rs_ssfGallery_last  = MM_offset + MM_size
If (MM_rsCount <> -1) Then
  If (rs_ssfGallery_first > MM_rsCount) Then
    rs_ssfGallery_first = MM_rsCount
  End If
  If (rs_ssfGallery_last > MM_rsCount) Then
    rs_ssfGallery_last = MM_rsCount
  End If
End If
' set the boolean used by hide region to check if we are on the last record
MM_atTotal = (MM_rsCount <> -1 And MM_offset + MM_size >= MM_rsCount)
%>
<%
' *** Go To Record and Move To Record: create strings for maintaining URL and Form parameters
Dim MM_keepNone
Dim MM_keepURL
Dim MM_keepForm
Dim MM_keepBoth
Dim MM_removeList
Dim MM_item
Dim MM_nextItem
' create the list of parameters which should not be maintained
MM_removeList = "&index="
If (MM_paramName <> "") Then
  MM_removeList = MM_removeList & "&" & MM_paramName & "="
End If
MM_keepURL=""
MM_keepForm=""
MM_keepBoth=""
MM_keepNone=""
' add the URL parameters to the MM_keepURL string
For Each MM_item In Request.QueryString
  MM_nextItem = "&" & MM_item & "="
  If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
    MM_keepURL = MM_keepURL & MM_nextItem & Server.URLencode(Request.QueryString(MM_item))
  End If
Next
' add the Form variables to the MM_keepForm string
For Each MM_item In Request.Form
  MM_nextItem = "&" & MM_item & "="
  If (InStr(1,MM_removeList,MM_nextItem,1) = 0) Then
    MM_keepForm = MM_keepForm & MM_nextItem & Server.URLencode(Request.Form(MM_item))
  End If
Next
' create the Form + URL string and remove the intial '&' from each of the strings
MM_keepBoth = MM_keepURL & MM_keepForm
If (MM_keepBoth <> "") Then
  MM_keepBoth = Right(MM_keepBoth, Len(MM_keepBoth) - 1)
End If
If (MM_keepURL <> "")  Then
  MM_keepURL  = Right(MM_keepURL, Len(MM_keepURL) - 1)
End If
If (MM_keepForm <> "") Then
  MM_keepForm = Right(MM_keepForm, Len(MM_keepForm) - 1)
End If
' a utility function used for adding additional parameters to these strings
Function MM_joinChar(firstItem)
  If (firstItem <> "") Then
    MM_joinChar = "&"
  Else
    MM_joinChar = ""
  End If
End Function
%>
<%
' *** Move To Record: set the strings for the first, last, next, and previous links
Dim MM_keepMove
Dim MM_moveParam
Dim MM_moveFirst
Dim MM_moveLast
Dim MM_moveNext
Dim MM_movePrev
Dim MM_urlStr
Dim MM_paramList
Dim MM_paramIndex
Dim MM_nextParam
MM_keepMove = MM_keepBoth
MM_moveParam = "index"
' if the page has a repeated region, remove 'offset' from the maintained parameters
If (MM_size > 1) Then
  MM_moveParam = "offset"
  If (MM_keepMove <> "") Then
    MM_paramList = Split(MM_keepMove, "&")
    MM_keepMove = ""
    For MM_paramIndex = 0 To UBound(MM_paramList)
      MM_nextParam = Left(MM_paramList(MM_paramIndex), InStr(MM_paramList(MM_paramIndex),"=") - 1)
      If (StrComp(MM_nextParam,MM_moveParam,1) <> 0) Then
        MM_keepMove = MM_keepMove & "&" & MM_paramList(MM_paramIndex)
      End If
    Next
    If (MM_keepMove <> "") Then
      MM_keepMove = Right(MM_keepMove, Len(MM_keepMove) - 1)
    End If
  End If
End If
' set the strings for the move to links
If (MM_keepMove <> "") Then
  MM_keepMove = Server.HTMLEncode(MM_keepMove) & "&"
End If
MM_urlStr = Request.ServerVariables("URL") & "?" & MM_keepMove & MM_moveParam & "="
MM_moveFirst = MM_urlStr & "0"
MM_moveLast  = MM_urlStr & "-1"
MM_moveNext  = MM_urlStr & CStr(MM_offset + MM_size)
If (MM_offset - MM_size < 0) Then
  MM_movePrev = MM_urlStr & "0"
Else
  MM_movePrev = MM_urlStr & CStr(MM_offset - MM_size)
End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Southern Store Fixtures Inc.</title>
<link href="CSS/global.css" rel="stylesheet" type="text/css" />
<link href="CSS/layout.css" rel="stylesheet" type="text/css" />
<link href="CSS/details.css" rel="stylesheet" type="text/css" />
<!--beginning of lightbox script -->
<link href="CSS/lightbox.css" rel="stylesheet" type="text/css" />
<script src="Scripts/protype.js" type="text/javascript"></script>
<script src="Scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="Scripts/lightbox.js" type="text/javascript"></script>
<!--end of lightbox script -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:absolute;
left:1226px;
top:643px;
width:284px;
height:251px;
z-index:1;
a:link {
color: #CCC;
text-decoration: none;
a:hover {
color: #5FABFF;
text-decoration: none;
a:visited {
text-decoration: none;
a:active {
text-decoration: none;
</style>
<link href="CSS/gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--begining of wrapper div -->
<div id="wrapper">
  <!---begining of header--->
  <div id="header"><img src="SSFLogo.png" width="298" height="96" alt="SSFlogo" /></div>
  <!---end of header--->
  <div id="banner"><img src="blueHeader_2.png" width="950" height="133" alt="header" /></div>
  <!---begining main nav--->
  <div id="mainNav"> 
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.asp">Home</a>    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Company Info</a>
      <ul>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Jobs/Career</a></li>
        <li><a href="#">Information Request</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Gallery</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Store Pictures</a>
          <ul>
            <li><a href="#">Item 3.1.1</a></li>
            <li><a href="#">Item 3.1.2</a></li>
          </ul>
        </li>
</ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Products</a>
      <ul>
        <li><a href="#">Self Serve</a></li>
        <li><a href="#">Serve</a></li>
        <li><a href="#">Multi Decks</a></li>
        <li><a href="#">Combinations</a></li>
        <li><a href="#">Food Service</a></li>
        <li><a href="#">Islands</a></li>
        <li><a href="#">Produce</a></li>
        <li><a href="#">Floral</a></li>
        <li><a href="#">Hot Foods</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">News/Events</a>
      <ul>
        <li><a href="#">Inside Look</a></li>
        <li><a href="#">Happenings</a></li>
        <li><a href="#">Trade Show Schedule</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Contact</a>
      <ul>
        <li><a href="#">Customer Service</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Buiss. Portal</a>
      <ul>
        <li><a href="#">Login</a></li>
      </ul>
    </li>
  </ul>
  </div>
  <!---end main nav--->
  <!---begining subBanner--->
  <div id="subBanner"><img src="secBanner.png" width="950" height="156" alt="secBanner" /></div>
  <!---end subBanner--->
  <!---begining contenMain--->
  <div id="contentMain">
    <!--beginning of gallery div -->
    <div id="gallery">
      <p>
        <!--beginning of galleryImage div -->
      </p>
      <table width="400" border="0" align="center" id="galleryNav2">
        <tr>
          <td width="100" align="center"><% If MM_offset <> 0 Then %>
              <a href="<%=MM_moveFirst%>">First</a>
          <% End If ' end MM_offset <> 0 %></td>
          <td width="100" align="center"><% If MM_offset <> 0 Then %>
            <a href="<%=MM_movePrev%>">Previous</a>
          <% End If ' end MM_offset <> 0 %></td>
          <td width="100" align="center"><% If Not MM_atTotal Then %>
            <a href="<%=MM_moveNext%>">Next</a>
          <% End If ' end Not MM_atTotal %></td>
          <td width="100" align="center"><% If Not MM_atTotal Then %>
            <a href="<%=MM_moveLast%>">Last</a>
          <% End If ' end Not MM_atTotal %></td>
        </tr>
      </table>
      <p> </p>
      <table align="center" id="HorzLooper">
        <%
startrw = 0
endrw = HLooper1__index
numberColumns = 5
numrows = 5
while((numrows <> 0) AND (Not rs_ssfGallery.EOF))
startrw = endrw + 1
endrw = endrw + numberColumns
%>
        <tr align="center" valign="top">
          <%
While ((startrw <= endrw) AND (Not rs_ssfGallery.EOF))
%>
          <td><div id="galleryImage">
            <div id="galleryThumb"><a href="images/pic/<%=(rs_ssfGallery.Fields.Item("picture_url").Value)%> rel="lightbox"><img src="images/thumb/<%=(rs_ssfGallery.Fields.Item("thumb_url").Value)%>" alt="<%=(rs_ssfGallery.Fields.Item("alt_url").Value)%>" /></a></div>
            <div id="galleryImageID"><%=(rs_ssfGallery.Fields.Item("picture_ID").Value)%></div>
            <div id="galleryImageFamily"><%=(rs_ssfGallery.Fields.Item("family").Value)%></div>
          </div></td>
          <%
startrw = startrw + 1
rs_ssfGallery.MoveNext()
Wend
%>
        </tr>
        <%
numrows=numrows-1
Wend
%>
      </table>
      <p> </p>
      <table width="400" border="0" align="center" id="galleryNav">
        <tr>
          <td width="100" align="center"><% If MM_offset <> 0 Then %>
              <a href="<%=MM_moveFirst%>">First</a>
          <% End If ' end MM_offset <> 0 %></td>
          <td width="100" align="center"><% If MM_offset <> 0 Then %>
              <a href="<%=MM_movePrev%>">Previous</a>
          <% End If ' end MM_offset <> 0 %></td>
          <td width="100" align="center"><% If Not MM_atTotal Then %>
              <a href="<%=MM_moveNext%>">Next</a>
          <% End If ' end Not MM_atTotal %></td>
          <td width="100" align="center"><% If Not MM_atTotal Then %>
              <a href="<%=MM_moveLast%>">Last</a>
          <% End If ' end Not MM_atTotal %></td>
        </tr>
      </table>
<!--end of galleryImage div -->
    </div>
    <!--end of gallery div -->
  </div>
  <!---end of contentMain--->
  <!---begining of contentSec--->
  <div id="contentSec">
    <div id="column1"></div>
    <div id="column2"></div>
    <div id="column3"></div>
  </div>
  <!---end of contentSec--->
  <!---begining of secNav--->
  <div id="secNav">
    <div id="column1">
      <p align="center">Supermarket  </p>
      <p align="center">C-Store </p>
      <p align="center">Small  Format  </p>
      <p align="center"> Food  Service </p>
      <p align="center"> Gourmet </p>
      <p align="center"> Restaurant</p>
    </div>
    <div id="column2">
      <p align="center">Produce </p>
      <p align="center">Prepared  Foods</p>
      <p align="center">Deli </p>
      <p align="center"> Meat </p>
      <p align="center">Seafood </p>
      <p align="center">Cheese </p>
      <p align="center">Bakery </p>
      <p align="center">Floral </p>
      <p align="center">Sushi </p>
      <p align="center"> </p>
</div>
    <div id="column3">
      <p align="center">Soup </p>
      <p align="center"> Chocolate   </p>
      <p align="center">Food  Bars </p>
      <p align="center">Low  Temp </p>
      <p align="center">Gelato </p>
      <p align="center"> Hot  Cases </p>
      <p align="center"> Pizza/Sandwich </p>
      <p align="center"> Multi-Decks </p>
      <p align="center">  Islands</p>
      <p> </p>
    </div>
    <div id="column4">
      <p>Trade Shows</p>
      <p>About</p>
      <p>Info</p>
      <p>Privacy</p>
      <p>Content</p>
      <p>Service</p>
      <p>Parts</p>
      <p>Login</p>
    </div>
  </div>
  <!---end of secNav--->
  <!---begining of footer--->
  <div id="footer">Southern Store Fixtures 2010 Inc.| All Rights Reserved</div>
  <!---end of footer--->
</div>
<!--end of wrapper div -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
<%
rs_ssfGallery.Close()
Set rs_ssfGallery = Nothing
%>