Dynamically set the images of the CSS Image Gallery with ASP

Question:

How to dynamically set the images and thumbnails of the CSS Image Gallery using ASP and image names from Database?

Answer:

CSS Image Gallery uses two unordered lists (ul and li HTML tags) for defining the images and the thumbnails of the gallery.

As I have mentioned into the FAQ Dynamically set the images of the CSS Image Gallery with PHP, CSS Image Gallery uses two unordered lists for defining the images and the thumbnails of the gallery.

In order the images and thumbnails to be set dynamically, you just have to read the image names from the database and generate the <li> </li> elements of the two list.

For example, this is sample page which accomplish this:

<%@LANGUAGE="VBSCRIPT" codepage="65001"%>

<%
Dim rsImages
Dim rsImages_cmd
Dim rsImages_numRows

'Prepare ADO Command Object and SQL statement for retrieving the images
Set rsImages_cmd = Server.CreateObject ("ADODB.Command")
rsImages_cmd.ActiveConnection = MM_cnnDBImages_STRING
rsImages_cmd.CommandText = "SELECT * FROM dbo.AuctionImages"
rsImages_cmd.Prepared = true

'Get the image names into recordset
Set rsImages = rsImages_cmd.Execute
rsImages_numRows = 0
%>
<%
Dim Repeat1__numRows
Dim Repeat1__index

Repeat1__numRows = -1
Repeat1__index = 0
rsImages_numRows = rsImages_numRows + Repeat1__numRows
%>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script src="ScriptLibrary/jquery-latest.pack.js" type="text/javascript"></script>
<script src="ScriptLibrary/jquery.dimensions.pack.js" type="text/javascript"></script>
<script src="ScriptLibrary/jquery.mousewheel.pack.js" type="text/javascript"></script>
<script src="ScriptLibrary/dmxgallery.js" type="text/javascript"></script>
<link href="styles/dmxgallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dmxGallery" id="cssGallery1">
<ul>
<%
        'Loop through the recordset with the image names
        While ((Repeat1__numRows <> 0) AND (NOT rsImages.EOF))
    %>
    <li><img src="images/<%=(rsImages.Fields.Item("Name").Value)%>" width="450" height="299" class="image" alt="" /></li>
    <%
        repeat1__index="Repeat1__index+1"
        repeat1__numrows="Repeat1__numRows-1"
        rsImages.MoveNext()
        Wend
    %>
</ul>
</div>
<div class="dmxThumbList" id="cssGallery1_thumb">
<ul>
   <%
        'Move to the firs record
        rsImages.MoveFirst()

        'Loop through the recordset with the image names
        While ((Repeat1__numRows <> 0) AND (NOT rsImages.EOF))
    %>
    <li><img src="images/thumbs/<%=(rsImages.Fields.Item("Name").Value)%>" width="150" height="100" alt="" /></li>
     <%
        repeat1__index="Repeat1__index+1"
        repeat1__numrows="Repeat1__numRows-1"
        rsImages.MoveNext()
        Wend
    %>
</ul>
</div>
<script type="text/javascript">
// <![CDATA[
$(document).ready(
   function()
     {
       $("#cssGallery1").dmxGallery(
         {
            width: 555,
            height: 299,
            thumbWidth: 95,
            thumbHeight: 80,
            thumbPadding: 5,
            thumbHolderHeight: 80,
            thumbHolderPosition: 'right',
            thumbShowOnHover: false,
            captionPosition: 'top',
            playerDelay: 3,
            autoPlay: false,
            autosize: true,
            captionOpacity: 40,
            imgIndex: 0,
            preloadTreshold: 2,
            currentImage: 0
        }
       );
     }
);
// ]]>
</script>
</body>
</html>
<%
'Close the recordset
rsImages.Close()
Set rsImages = Nothing
%>

In the column Name of my table (dbo.AuctionImages) i store only the image names. Therefore when I generate the <li> </li> elements of the two lists I add the path to the images.

<li><img src="images/<%=(rsImages.Fields.Item("Name").Value)%>" width="450" height="299" class="image" alt="" /></li>

<li><img src="images/thumbs/<%=(rsImages.Fields.Item("Name").Value)%>" width="150" height="100" alt="" /></li>

The main images are stored into the folder images and the thumbnails into images/thumbs.

Note:
In order CSS Image Gallery to work all the images retrieved from the database should exist on the server and the path to the must be correct.

DISCLAIMER:

This is extra complimentary content which purpose is to show additional usage that is not part of the product, i.e. it suggests tips for extending the functionality of the product by the users themselves. It is provided "as is", without warranty of any kind, express or implied , including but not limited to the warranties of merchantability, fitness for a particular purpose and nonfringement of third party rights.

DMXzone does not take responsibility to support the suggested content to be fully compatible and working as intended and does not provide support for extended functionality which is not included in the current release of the extension.

It is highly recommended that only more advanced developers use it.

Comments

RE: Comment

December 4, 2007 by Georgi Kralev

You are right about path to the images and the images dimension (height and width).

But my idea was to provide just a simple example (Not perfect solution).
I didn't want the code to be too confusing or complicated.

With little ASP knowledge, everybody can easily modify the code or prepare similar one which best suit his needs.

Regards,

Comment

August 7, 2008 by Greg Kresslein

Great in theory, but I'm not having success with both <li> tags repeating. Either one or the other will repeat.

You must me logged in to write a comment.