Hi Dan,

Thanks once again, that is pretty much exactly what I am looking for, I do have a couple of questions though, I am trying to modify it so that I can have different galleries for different pages, I want the Umbraco user to be able to select a media folder for a specific node/page, I therefore added a Media Picker property to my document type and called it "recruiterimages", then modified the XSLT to change the media folder so that instead of getting it from the macro property it gets it from whatever is selected as the "recruiterimages" document property as follows but it throws up an XSLT error on the page, any ideas what I am doing wrong?

<xsl:variable name="imageFolder" select="$currentPage/data [@alias='recruiterimages']"/>

The other question is, can it be easily changed so that the full image is displayed below the gallery as opposed to above it, it is just that the gallery jumps off the bottom of the page when click on a image and see it full size (although I suppose you could argue that the other way would mean the full images jumps of the bottom of the page and you might not know its there unless you scroll down).

The macro "as-is" is using a mediaCurrent macro paramater, which acts a little differently to a media picker.

First port of call would be to check -> http://our.umbraco.org/wiki/reference/umbracolibrary/getmedia

As for moving the image below the thumbs, try just swapping around the html and give me a shout when it messes up!

Dan

Hi Dan,

That might explain why it will not work, ok instead I have tried to do a cut and shut using the Related Media package from the Nibble site http://www.nibble.be/?p=64 so that the user can select the images they want to appear in the gallery, I've got it partially working using the following XSLT, it shows the images and when you click on them you get the full size versions but it is not showing the scrolling arrows and therefore you cannot scroll, which is quite a crucial feature of a scrolling gallery :-)

Is there something I need changing in my XSLT or is there something that needs changing in the javascript (I hope not because I do not know javascript!).

The XSLT I have is as follows:

<xsl:param name="currentPage"/>
<xsl:template match="/">
<xsl:variable name="propertyAlias" select="string('recruiterimages')"/>
    
 <div class="image_gallery">
  
  
  <div class="main_image">&#160;</div> 
  <div class="navi">&#160;</div> 
  
  <div class="gallery_main">
   <a class="prev gal_nav">&#160;</a> 
 
   <div class="scrollable">
 
    <ul class="items">
      <xsl:for-each select="$currentPage/data [@alias = $propertyAlias]/media/item">
      
       <li>
        <a>
          
                        <xsl:attribute name="href">
                          <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
         <xsl:value-of select="umbraco.library:GetMedia(./@id,'false')/data [@alias = 'umbracoFile']"/>
                        <xsl:text>&amp;height=350&amp;compression=100</xsl:text>
         </xsl:attribute>
                      
         <img alt="{current()/@nodeName}">
          <xsl:attribute name="src">
           <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
         <xsl:value-of select="umbraco.library:GetMedia(./@id,'false')/data [@alias = 'umbracoFile']"/>
           <xsl:text>&amp;height=80&amp;compression=100</xsl:text>
          </xsl:attribute>
         </img>
        </a>
       </li>
     
     </xsl:for-each>
    </ul>
  
   </div> <!--/scrollable-->
 
   <a class="next gal_nav">&#160;</a>
   
  </div>
<a href="#" class="open_gallery">Click to see the full images</a>
 </div>
</xsl:template>

The xslt looks a lot like it should, but what about the resulting html?

Are you getting javascript errors?  And was everything working ok when using a macro paramater?

Dan

No javascript errors and yes it was working fine before I made the changes, all seems to look and work the same as before minus the little arrows, just wondered if the javascript was not creating them because of the changes I have made

This is the html that is output onto the page if it helps:

<div class="image_gallery"><div class="main_image"> </div><div class="navi"> </div><div class="gallery_main"><a class="prev gal_nav"> </a><div class="scrollable"><ul class="items"><li><a href="/umbraco/ImageGen.ashx?image=/media/1050/photo1lg.jpg&amp;height=400&amp;compression=100"><img alt="" src="/umbraco/ImageGen.ashx?image=/media/1050/photo1lg.jpg&amp;height=80&amp;compression=100" /></a></li><li><a href="/umbraco/ImageGen.ashx?image=/media/2913/plc-perth.jpg&amp;height=400&amp;compression=100"><img alt="" src="/umbraco/ImageGen.ashx?image=/media/2913/plc-perth.jpg&amp;height=80&amp;compression=100" /></a></li><li><a href="/umbraco/ImageGen.ashx?image=/media/1035/photo2tb.jpg&amp;height=400&amp;compression=100"><img alt="" src="/umbraco/ImageGen.ashx?image=/media/1035/photo2tb.jpg&amp;height=80&amp;compression=100" /></a></li></ul></div><a class="next gal_nav"> </a></div><a href="#" class="open_gallery">Click to see the full images</a></div>

The arrows are only shown when the amount of items in the gallery is wider than the gallery - only when they're needed.  Try adding more images and they should reappear.

Dan

Ah ha, I have added some more images and they are back, although I had to add quite a few for them to appear so there must be a width setting that I have got wrong somewhere because it thinks the gallery is a lot wider than it is on the screen!

Ok, I have got it sorted, the number in the following line that is part of the jqGallery.js javascript file determines the width of the scrollable area, I am not sure what the measurement is in but by reducing it I have been able to make the width of my gallery smaller (by modifying the css file) and still make it so that it shows the scroll buttons when the images start to become wider than the gallery (if that makes sense!)

$("div.scrollable").scrollable({size:3}).circular();

Thanks once again for your help Dan

No problem, glad you got it sorted.

The measurement is in "items" I think ( <li> elements in this case)

Dan

is working on a reply...