Hey Fuji,

I believe the image crops are physically held as images, created when the crops are created, so you'll need to work out what these are called and reference them in your javascript instead of the full version.

Rich

hmmmm.....yes i guess so, i created 2 cropping options, thumbnails and a slider one. So far i can see all the images are there with different naming convention, e.g img1_thumbnails.jpg, img1.jpg, slider.jpg which is correct.

Well i only want the user to view all the thumbnails from this current image folder but will also be able to view a slideshow on clicking on one of the thumbnails. But how do i get the thumbnail to load its relative higher res image since both have different namings??

//fuji

Hi Fuji

If I'm not totally wrong, I think that the cropped images are stored in the XML returned by the GetMedia extension. This means that you can grab the images quite easy in your xslt and then create the correct markup for your image slider.

Which jQuery image slider are you using?

/Kim A

Hey Kim,

Am using the jquery.colorbox....i quiet fancy this one but not sure how it will handle it since it uses the same naming for both thumbnails and Slider image. Only  a change in the folder instead.

What do you think will be best to you?..but in any case if am not mistaken most of the jquery slideshow uses same naming for both thumbs and slides?

//fuji

Kim,

Am trying to display the crop images from my media by using my Macros in editor but its not working at all. Here is how am doing it.

<xsl:variable name="mediaFolder" select="/macro/imgFiles"/>

<xsl:template match="/">
  
   <xsl:if test="$mediaFolder">
     <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($mediaFolder, 'true')/umbracoFile" />    
  
     <img>
       <xsl:attribute name="src">
         <xsl:value-of select="$mediaItems/Image/crops/crop [@name='Thumbnail']/@url"/>
       </xsl:attribute>
    </img> 
     
   </xsl:if> 

Am not sure of doing the right thing there

//fuji

Hi Fuji

Try removing the /umbracoFile from your mediaItems-variable. Like this:

<xsl:variablename="mediaItems"select="umbraco.library:GetMedia($mediaFolder, 'true')"/>    

Then you will have to run through all of the images in either a for-each or in an apply-templates I think.

/Kim A

By doing am getting the initial uploaded image in the media

 <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($mediaFolder/*/@id, 'true')"/>    
          
     <xsl:for-each select="$mediaItems/Image">
       <img src="{umbracoFile}" />
    </xsl:for-each>

But nt sure about how to get the crop image thumbnail instead..

//fuji

Hi Fuji

If you have checked the ckeckbox next to Save crop images (/media/(imageid)/(filename)_(cropname).jpg): under the Image Cropper datatype you can write this:

<xsl:variable name="pic" select="umbraco.library:GetMedia(./slideImage, 'false')/umbracoFile" />
<img src="{concat(substring-before($pic,'.'),'_slideImage.',substring-after($pic,'.'))}" width="400" height="190" alt="{slideTitle}" title="{slideTitle}" />

 where slideImage in GetMedia was the Media Picker property I used and slideImage after underscore was the name of the cropped image.

Bjarne

HI Bjarne,

Yes i did checked the chexbox in my datatype.  I'll give this a try.

//fuji

I get an error when using

<xsl:variablename="mediaItems"select="umbraco.library:GetMedia(./Thumbnail, 'false')/umbracoFile"/>
<imgsrc="{concat(substring-before($mediaItems,'.'),'_Thumbnail
.',substring-after($mediaItems,'.'))}"/>

I tried this instead but the is missing its getting only the first Thumbnail

<xsl:variable name="mediaItems" select="umbraco.library:GetMedia($mediaFolder/*/@id, 'true')" />
     
     <xsl:for-each select="$mediaItems/Image">    
       <img src="{concat(substring-before($mediaItems,'.'),'_Thumbnail.jpg',substring-after($mediaFolder,'.'))}"/>
       <img src="{umbracoFile}" />
     </xsl:for-each>

Try this Fuji:

<xsl:for-eachselect="$mediaItems/Image">
       <imgsrc="{crops/crop [@name='Thumbnail']/@url}"/>
</xsl:for-each>

If you're going for the Thumbnail crop. It would probably be a little easier if we could see your XML though.

/Kim A

Kim,

Am getting a blank img source <img src="" />

//fuji

When using Bjarne solution

<xsl:variable name="source" select="/macro/source"/>
    
<xsl:variable name="mediaFolder" select="/macro/imgFiles"/>

<xsl:template match="/">
  
   <xsl:if test="$mediaFolder">
     
    
     <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($mediaFolder/*/@id, 'true')" />
     
     <xsl:for-each select="$mediaItems/Image">    
      <img src="{concat(substring-before($mediaItems,'.'),'_Thumbnail.',substring-after($mediaItems,'.'))}" />
       <img src="{umbracoFile}" />
    </xsl:for-each>
     
       
     
   </xsl:if>  

this is the output am getting

<img src="/net4/iorim/media/5462/3400623_Thumbnail.jpg60040018486jpg/net4/iorim/media/5494/4802582.jpg60040220019jpg/net4/iorim/media/5500/2326996.jpg60040023091jpg"><img src="/net4/iorim/media/5462/3400623.jpg"><img src="/net4/iorim/media/5462/3400623_Thumbnail.jpg60040018486jpg/net4/iorim/media/5494/4802582.jpg60040220019jpg/net4/iorim/media/5500/2326996.jpg60040023091jpg"><img src="/net4/iorim/media/5494/4802582.jpg"><img src="/net4/iorim/media/5462/3400623_Thumbnail.jpg60040018486jpg/net4/iorim/media/5494/4802582.jpg60040220019jpg/net4/iorim/media/5500/2326996.jpg60040023091jpg"><img src="/net4/iorim/media/5500/2326996.jpg"> 

I have always inserted <img src="{umbracoFile}" /> just to see if the uploaded images are there and looping through.

//fuji

Hi Fuji

Does it make a difference if you use false instead of true?
or remove the /Image after $mediaItems?

Bjarne 

Hey Bjarne,

It does make a difference if i remove Image after $mediaItems when using this

<xsl:variable name="mediaItems" select="umbraco.library:GetMedia($mediaFolder/*/@id, 'false')" />
     
     <xsl:for-each select="$mediaItems/Image">    
            <img src="{umbracoFile}" />
    </xsl:for-each>

but no difference

<xsl:variable name="mediaItems" select="umbraco.library:GetMedia($mediaFolder/*/@id, 'false')" />
     
     <xsl:for-each select="$mediaItems">    
     <img src="{concat(substring-before($mediaItems,'.'),'_Thumbnail.',substring-after($mediaItems,'.'))}" /> 
      <!--  <img src="{umbracoFile}" />-->
    </xsl:for-each>

Xml

<img src="/net4/iorim/media/5462/3400623_Thumbnail.jpg60040018486jpg/net4/iorim/media/5494/4802582.jpg60040220019jpg/net4/iorim/media/5500/2326996.jpg60040023091jpg"> 

Okay..
it seems that you get the the url for all images id's into the src attribute...

In my case a have the mediaId inside the for-each... and use

 <xsl:variable name="mediaId" select="number($currentPage/SlideArea/SlideItem/slideImage)"/>

where slideImage was the Media Picker under SlideItem property..

Bjarne 

Hey Kim,

Just wanted to point out the Image gallery is working perfectly and getting thumbnails  and Slider Images and using  jquery.slider for the slideshow.

//fuji

Cool Fuji.

I'm glad you got your gallery working in the end. What changed your mind about which jQuery Gallery plugin you wanted to use?

/Kim A

Well i have another functionality which will be using nivo.slider, so better use the same plugin instead of having 2 different ones.

/fuji

Yeah, makes sense. And I totally agree with you in not having two different plugins doing almost the same stuff. By the way I think the Nivo slider plugin is pretty neat :)

/Kim A

I'm glad you got it working :)

and the Nivo slider is awesome and lightweight..

With Umbraco is pretty easy to manage slideshows in eg jQuery or flash..

Bjarne

We all agree on this then...... :)

//fuji

is working on a reply...