Hi Peter,

The "GetMedia" function returns an XML nodeset, so wouldn't give you the exact value you are expecting, instead try accessing one of the properties - you're most likely want "umbracoFile".

var imageone = '<xsl:value-of select="umbraco.library:GetMedia(image1, 0)/umbracoFile" />';

Cheers, Lee.

Hi Lee thanks for the reply,

I may be being really daft but i tried using the line suggested (see below) but still no change, is it possible for the java variable to call an xsl variable as can get an xsl variable to call the imag fine.

  <script type="text/javascript">
   var imageone = '<xsl:value-of select="umbraco.library:GetMedia(image1, 0)/umbracoFile" />';
    var imagetwo = "/images/2.jpg";
    </script>

Thanks

Hi Peter,

Just checking, where is your JavaScript code? In an XSLT file or elsewhere? (as it wont work in the master templates)

Cheers, Lee.

Hi Leigh, its in an XSLT file here is the below full code, it is a basic fading carousel which i want it to use the images selected in fields 'image1, image2'

<?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"
  exclude-result-prefixes="msxml umbraco.library">
  <xsl:output method="xml" omit-xml-declaration="yes"/>
   
  <xsl:param name="currentPage"/>

  <xsl:template match="/">
    <xsl:apply-templates select="$currentPage" />
  </xsl:template>

  <xsl:template match="*" />
  <xsl:template match="WidgetFadeImageCarousel">

<!--Using this code outside Java pulls the image onto the page fine
<xsl:variable name="imageoone" select="umbraco.library:GetMedia(image1, 0)" /> <img src="{$imageoone/umbracoFile}" />-->

<script type="text/javascript">
   
    var imageone =  MY XSL VALUE OF, IMAGE PICKER FIELD NAMED IMAGE1
    var imagetwo = "/images/2.jpg";

        jQuery.PictureSlides.set({
            // Switches to decide what features to use
            useFadingIn : true,
            useFadingOut : true,
            useFadeWhenNotSlideshow : true,
            useFadeForSlideshow : true,
            useDimBackgroundForSlideshow : false,
            loopSlideshow : true,
            usePreloading : true,
            useAltAsTooltip : true,
            useTextAsTooltip : false,
            
            // Fading settings
            fadeTime : 500, // Milliseconds    
            timeForSlideInSlideshow : 2000, // Milliseconds

            // At page load
            startIndex : 1,    
            startSlideShowFromBeginning : true,
            startSlideshowAtLoad : true,
            dimBackgroundAtLoad : false,

            // Large images to use and thumbnail settings
            images : [
                {
                    image : (imageone),
                    alt : "Picture 1",
                    text : "This is picture 1"
                },
                {                                  
                    
                    image : (imagetwo),
                    alt : "Picture 2",
                    text : "This is picture 2"
                }
            ],
            thumbnailActivationEvent : "click",

            // Classes of HTML elements to use
            mainImageClass : "picture-slides-image", // Mandatory
            fadeContainerClass : "picture-slides-fade-container"
        });
    </script>
  
    <div id="container">
        <div id="picture-slides-frame">
            <div class="picture-slides-container">
                <div class="picture-slides-fade-container">
                    <img class="picture-slides-image" width="680px" height="310px" src="about:blank" alt="This is pictur" />
                </div>
            </div>
        </div>
    
    </div>
  </xsl:template>

</xsl:stylesheet>

Hmmm... this should work?

var imageone = '<xsl:value-of select="$imageoone/umbracoFile" />';

Cheers, Lee.

Lee,

You are an absolute legend works a treat!

Thanks!

You're welcome... and welcome to the community!

Cheers, Lee.

Thanks!

One other quick one though hehe how can i get it to ignore the xsl variable if no image has been selected? noticed unless i choose images for both fields i get the unable to parse error.

Thanks again

You could wrap an <xsl:if> condition around the various parts of code?

<xsl:if test="image1 != ''">

Cheers, Lee.

Just tried a few things but won't save correctly think im not getting what you mean, I have 10 image fields if i comment out the xsl & java variables for the fields which have no image selected it works fine but obviously need it to allow up to the 10 images but say if only 4 out of 10 are selected to still show them in cycle if that makes sense!

My code now is below which works with the commented out fields

<xsl:variable name="imageone" select="umbraco.library:GetMedia(image1, 0)" />
<xsl:variable name="imagetwo" select="umbraco.library:GetMedia(image2, 0)" />
<xsl:variable name="imagethree" select="umbraco.library:GetMedia(image3, 0)" />
<!--<xsl:variable name="imagefour" select="umbraco.library:GetMedia(image4, 0)" />
<xsl:variable name="imagefive" select="umbraco.library:GetMedia(image5, 0)" />
<xsl:variable name="imagesix" select="umbraco.library:GetMedia(image6, 0)" />
<xsl:variable name="imageseven" select="umbraco.library:GetMedia(image7, 0)" />
<xsl:variable name="imageeight" select="umbraco.library:GetMedia(image8, 0)" />
<xsl:variable name="imagenine" select="umbraco.library:GetMedia(image9, 0)" />
<xsl:variable name="imageten" select="umbraco.library:GetMedia(image10, 0)" />-->

<script type="text/javascript">
    
    var imageone = '<xsl:value-of select="$imageone/umbracoFile" />';
    var imagetwo = '<xsl:value-of select="$imagetwo/umbracoFile" />';
    var imagethree = '<xsl:value-of select="$imagethree/umbracoFile" />';
    <!--var imagefour = '<xsl:value-of select="$imagefour/umbracoFile" />';
    var imagefive = '<xsl:value-of select="$imagefive/umbracoFile" />';
    var imagesix = '<xsl:value-of select="$imagesix/umbracoFile" />';
    var imageseven = '<xsl:value-of select="$imageseven/umbracoFile" />';
    var imageeight = '<xsl:value-of select="$imageeight/umbracoFile" />';
    var imagenine = '<xsl:value-of select="$imagenine/umbracoFile" />';
    var imageten = '<xsl:value-of select="$imageten/umbracoFile" />';-->

Hi Peter,

I'd be tempted to do a loop for this... it's a little bit hacky, but might just work! :-)

<?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"
    exclude-result-prefixes="msxml umbraco.library">
    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>

    <xsl:template match="/">
        <xsl:apply-templates select="$currentPage" />
    </xsl:template>

    <xsl:template match="*" />

    <xsl:template match="WidgetFadeImageCarousel">
        <script type="text/javascript">
            jQuery.PictureSlides.set({
                // Switches to decide what features to use
                useFadingIn : true,
                useFadingOut : true,
                useFadeWhenNotSlideshow : true,
                useFadeForSlideshow : true,
                useDimBackgroundForSlideshow : false,
                loopSlideshow : true,
                usePreloading : true,
                useAltAsTooltip : true,
                useTextAsTooltip : false,

                // Fading settings
                fadeTime : 500, // Milliseconds
                timeForSlideInSlideshow : 2000, // Milliseconds

                // At page load
                startIndex : 1,
                startSlideShowFromBeginning : true,
                startSlideshowAtLoad : true,
                dimBackgroundAtLoad : false,

                // Large images to use and thumbnail settings
                images : [
 <xsl:for-each select="umbraco.library:Split('image1,image2,image3,image4,image5,image6,image7,image8,image9,image10', ',')/value"> <xsl:variable name="value" select="text()" /> <xsl:if test="normalize-space($currentPage/*[name() = $value])"> <xsl:variable name="image" select="umbraco.library:GetMedia($currentPage/*[name() = $value], 0)" /> <xsl:if test="$image/umbracoFile"> { image : '<xsl:value-of select="$image/umbracoFile"/>', alt : '<xsl:value-of select="$image/@nodeName"/>', text : '<xsl:value-of select="$image/@nodeName"/>' } <xsl:if test="position() != last()">,</xsl:if> </xsl:if> </xsl:if> </xsl:for-each>
                ],
                thumbnailActivationEvent : "click",

                // Classes of HTML elements to use
                mainImageClass : "picture-slides-image", // Mandatory
                fadeContainerClass : "picture-slides-fade-container"
            });
        </script>

        <div id="container">
            <div id="picture-slides-frame">
                <div class="picture-slides-container">
                    <div class="picture-slides-fade-container">
                        <img class="picture-slides-image" width="680px" height="310px" src="about:blank" alt="This is pictur" />
                    </div>
                </div>
            </div>

        </div>
    </xsl:template>

</xsl:stylesheet>

Instead of setting a JavaScript variable for each image, then assigning it to the 'images' array (lower down), we just build up that JavaScript array directly.

The "umbraco.library:Split" might seem confusing, but it gives us a way of looping through each property name/alias.

I haven't tested this (since I don't have your set-up, etc) ... so there may be some tweaking to do. :-)

Cheers, Lee.

Lee. . . perfect works amazingly! Ill try and leave you alone now ha!

Thanks so much mate

Hi again!

Wondered if you could lend a hand at one more thing, i want to be able to display some text at the bottom of each image, ive created the fields 'title1' up to 'title10'.

Ive created the css class 'picture-text' which displays fine if i just put one title in but need it to use the relavant title per image! my code is the same as above.

Thanks

Hi Lee,

Dont want to pester but hopefully may be able to help! I am still struggling with pulling through text to appear on each image as the post above, im trying a slight alternative way of building the carousel where you make a child node for each image which includes a title field etc. What i need is where you created that magic code to pull the image fields through <xsl:for each> i need it to use a template <xsl:apply-templates select="WidgetImageCarouselImage[mediaId != '']" /> for each image.

Is that possible?

Thanks

is working on a reply...