Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • MC 19 posts 89 karma points
    Jan 23, 2014 @ 22:54
    MC
    0

    How can i display image 3 images in row using imageGen

    Hello everyone,

    I have been working on the gallery page to display sponsor image, I used imageGen package and created xslt to get image from Media item and create Marcros then add marcros to the template. How can i display image aliment to horizontal and display 3 images in the row  as image below  and xslt 

    <?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:Examine="urn:Examine" 

    exclude-result-prefixes="msxml umbraco.library Examine ">

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

    <xsl:param name="currentPage"/>

        <xsl:variable name="mediaFolderId" select="number($currentPage/mediaFolderId)" />

        <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)">

                <ul id="gallery">

                    <xsl:for-each select="umbraco.library:GetMedia($mediaFolderId, true())/Image">

                       <xsl:if test="umbracoFile !=''">                        <li>

                                <a href="{umbracoFile}" title="{@nodeName}" 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>

    And  This question might be silly question , How can i add  lightweight jQuery plugin  to my project? 

    Thank you in advance,

    Amp.

  • Bjarne Fyrstenborg 1282 posts 3994 karma points MVP 8x c-trib
    Jan 24, 2014 @ 02:27
    Bjarne Fyrstenborg
    1

    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

  • MC 19 posts 89 karma points
    Jan 24, 2014 @ 14:43
    MC
    0

    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.

  • Bjarne Fyrstenborg 1282 posts 3994 karma points MVP 8x c-trib
    Jan 24, 2014 @ 14:49
    Bjarne Fyrstenborg
    100

    I'm glad you find it useful :)

    This part you could of course extend with the configurations the FancyBox.. or another plugin is using..

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

    and it might be suitable to place that code in a seperate javascript file...

    /Bjarne

Please Sign in or register to post replies

Write your reply to:

Draft