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
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
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:
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 :)
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:
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 " "> ]>
<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)}&width= {$thumbWidth}&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.
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:
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:
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 :)
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.
I'm glad you find it useful :)
This part you could of course extend with the configurations the FancyBox.. or another plugin is using..
and it might be suitable to place that code in a seperate javascript file...
/Bjarne
is working on a reply...