Hi Maiyana

Depending on which jQuery plugin you want to use in your project, there are several solutions to build the gallery. But I based a solution on your example and showed how you can combine it with e.g. Fancybox v.2

I have modified the xslt a bit:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:Examine="urn:Examine" xmlns:ucomponents.cms="urn:ucomponents.cms" xmlns:ucomponents.dates="urn:ucomponents.dates" xmlns:ucomponents.email="urn:ucomponents.email" xmlns:ucomponents.io="urn:ucomponents.io" xmlns:ucomponents.media="urn:ucomponents.media" xmlns:ucomponents.members="urn:ucomponents.members" xmlns:ucomponents.nodes="urn:ucomponents.nodes" xmlns:ucomponents.random="urn:ucomponents.random" xmlns:ucomponents.request="urn:ucomponents.request" xmlns:ucomponents.search="urn:ucomponents.search" xmlns:ucomponents.strings="urn:ucomponents.strings" xmlns:ucomponents.urls="urn:ucomponents.urls" xmlns:ucomponents.xml="urn:ucomponents.xml" 
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets Examine ucomponents.cms ucomponents.dates ucomponents.email ucomponents.io ucomponents.media ucomponents.members ucomponents.nodes ucomponents.random ucomponents.request ucomponents.search ucomponents.strings ucomponents.urls ucomponents.xml ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:variable name="mediaFolderId" select="number($currentPage/gallery)" />
<xsl:variable name="thumbWidth" select="number(256)" />
<xsl:variable name="thumbHeight" select="number(170)" />

<xsl:template match="/">

    <!-- Displays all images from a folder in the Media Library -->
    <xsl:if test="number($mediaFolderId)">

    <xsl:variable name="images" select="umbraco.library:GetMedia($mediaFolderId, true())/Image" />
    <xsl:variable name="numberOfImages" select="count($images)" />
        <xsl:variable name="numberOfColumns" select="3" />

        <ul id="gallery">
            <xsl:for-each select="$images">

                <!-- Calculate the total number of rows -->
                <xsl:variable name="rows" select="ceiling($numberOfImages div $numberOfColumns)" />
                <!-- current column -->
                <xsl:variable name="colcount" select="((position() + ($numberOfColumns - 1)) mod $numberOfColumns) + 1" />
                <!-- Current row -->
                <xsl:variable name="rowcount" select="floor((position() - 1) div $numberOfColumns) + 1" />

                <xsl:variable name="class">
                    <xsl:text>image</xsl:text>
                    <xsl:text> col</xsl:text>
                    <xsl:value-of select="$colcount"/>
                    <xsl:text> row</xsl:text>
                    <xsl:value-of select="$rowcount" />
                    <xsl:if test="$rowcount = 1">
                      <xsl:text> firstRow</xsl:text>
                    </xsl:if>
                    <xsl:if test="$rowcount = $rows">
                      <xsl:text> lastRow</xsl:text>
                    </xsl:if>
                    <xsl:choose>
                      <xsl:when test="$rowcount mod 2 = 0">
                        <xsl:text> rowEven</xsl:text>
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:text> rowOdd</xsl:text>
                      </xsl:otherwise>
                    </xsl:choose>
                    <xsl:choose>
                      <xsl:when test="$colcount mod 2 = 0">
                        <xsl:text> colEven</xsl:text>
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:text> colOdd</xsl:text>
                      </xsl:otherwise>
                    </xsl:choose>
                </xsl:variable>

                <xsl:if test="umbracoFile !=''">
                    <li>
                        <xsl:attribute name="class">
                          <xsl:value-of select="$class" />
                        </xsl:attribute>
                        <a href="{umbracoFile}" title="{@nodeName}" class="fancybox" rel="gallery">
                            <img src="/imageGen.ashx?image={umbraco.library:UrlEncode(umbracoFile)}&amp;width={$thumbWidth}&amp;height={$thumbHeight}" width="{$thumbWidth}" height="{$thumbHeight}" alt="{@nodeName}" title="{@nodeName}" class="thumbnail" />
                        </a>
                    </li>
                </xsl:if>
            </xsl:for-each>
        </ul>
    </xsl:if>

</xsl:template>

</xsl:stylesheet>

Some of the additional classes added to <li> tag are not necessary and depending on your need you could exclude them. Sometimes it might be useful when you add margin-left: 10px; in css, but you don't want the last column to have margin to the left. However with CSS3 :nth-child() Selector this could be done just with css.. 

Besides the xslt I have included the files from Fancybox in /css and /scripts folder and have a simple template like this:

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
    <link rel="stylesheet" href="/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <link rel="stylesheet" href="/css/gallery.css" type="text/css" media="screen"/>
</head>
<body>
    <h1>Gallery</h1>
    <umbraco:Macro Alias="Gallery" runat="server"></umbraco:Macro>

    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox -->
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>
</body>
</html>
</asp:Content>

Notice that jQuery and Fancybox script is included before fancybox is called and it's used on the element with class="fancybox" .. you can just rename it to something else if you want to..

Finally I have some very basic styling, nothing fancy :)

body { font-family: Arial, sans-serif; color: #333; }
h1 { margin-left: 20px; }
ul#gallery {
    float: left;
    list-style: none;
    margin: 10px;
    padding: 0;
    width: 828px;
}

ul#gallery li {
    float: left;
    margin: 10px;
}

That's it..

Now we have a simple image gallery with a jQuery plugin. There are plenty other lightweight jQuery galleries out there e.g. Lightbox2 but are use in a simular way..
Here is how it looks:

/Bjarne

Hi Bjarne ,

         Thank you alot for you to take time to explain how to work on gallery with jquery plugin. Its very useful. I  am very appreciate your help. 

Thank you alot. 

Maiyana.

is working on a reply...