Hi Natasha,

If you try to open one of the thumbnail files, you get an error, which I assume is generated by ImageGen:

http://ncb.org.uk/imageGen.ashx?image=%2fmedia%2f214094%2fp2p.jpg&width=150&height=80

>> Requested image path is not allowed. (/media/214094/p2p.jpg)

Could be a permissions issue on the server?

EDIT: There seems to be a setting for this in ImageGen - have look here: http://our.umbraco.org/projects/website-utilities/imagegen/imagegen-bugs/33553-Unable-to-get-the-ImageBaseDir-working-on-localhost for the same problem.

/Chriztian

Thanks Chriztian

I have now got the thumbnail to work, but cannot get the fancybox light box to work using the same code as above for the images except with a class of fancybox forease of reference i'll post it again:

<?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:umbraco.contour="urn:umbraco.contour" xmlns:App_Code.XsltExtensions="urn:App_Code.XsltExtensions" 
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour App_Code.XsltExtensions ">


<!-- start writing XSLT -->
   <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="/">
      
      <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery-latest.min.js', 'http://code.jquery.com/jquery-latest.min.js')"/>
  <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('fancybox.js', '/scripts/fancybox.js')"/>
      <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('fancybox.pack.js', '/scripts/fancybox.pack.js')"/>
  <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('fancybox.css', '/css/fancybox.css')"/>

        <!-- 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 class="fancybox" 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="fancybox" />
                            </a>
                        </li>
                    </xsl:if>
                </xsl:for-each>
            </ul>

        </xsl:if>

    </xsl:template>   
  

</xsl:stylesheet>

And my html is as follows:

<%@Master Language="C#" MasterPageFile="~/masterpages/Shared.master"%>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderContentCentre" runat="server">
    
 <script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script> 
 
  <umbraco:Macro Alias="PageHeading" runat="server" />
 <umbraco:Item Field="bodyText" runat="server" />
 <umbraco:Macro Alias="Gallery" runat="server"></umbraco:Macro>
</asp:Content>

The images render fine, but it just opens in another window rather than in the lightbox any help would be appreciated.

Thanks Natasha

Hi Natasha,

I don´t know if I am right, but to me it´s sounds like you haven't include jQuery in to your project, or jQuery is not loaded correctly.

I have read the fancybox documentation, and in their example they include jQuery 1.4:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Hope this will help you to get facybox working in your project

/Dennis

Hi Natasha,

Now I just see that you have included the Jquery in this line in your XSLT file,

   <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jquery-latest.min.js', 'http://code.jquery.com/jquery-latest.min.js')"/>
  <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('fancybox.js', '/scripts/fancybox.js')"/>
  <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('fancybox.pack.js', '/scripts/fancybox.pack.js')"/>
  <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('fancybox.css', '/css/fancybox.css')"/>

Maybe it could be some with the version of jQuery. In the docs of fancybox the use version 1.4 of jQuery. e.g try to use the same version and see if the have any effect When I work with jQuery in Umbraco i placed files in the scripts folder in Umbraco and include the file like this. And reference it in the templates, instead of reference it in the XSLT file.

<script type="text/javascript" src="/scripts/lightbox.js"></script>

I have not worked with the Umbraco method

umbraco.library:RegisterJavaScriptFile.

/Dennis

is working on a reply...