Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 04, 2011 @ 20:32
    Fuji Kusaka
    0

    Jquery Slideshow with Image Crop

    Hi there,

    Does anyone have an idea on how i will be able to make a jquery slideshow when making use of image Cropping? 

    What i did is I created a datatype with all the settings for image crop, from there i just have to add several folders in media section under which i will upload my image for and make all the cropping needed.

    My question is how do i get my slideshow to trigger and use only the defined 800*600 images instead of the thumbnails??

     

    Any advise on how i need to proceed.

     

    //fuji

     

  • Rich Green 2246 posts 4008 karma points
    Jul 04, 2011 @ 20:42
    Rich Green
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 04, 2011 @ 20:43
    Fuji Kusaka
    0

    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

  • Kim Andersen 1447 posts 2196 karma points MVP
    Jul 04, 2011 @ 20:52
    Kim Andersen
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 04, 2011 @ 21:02
    Fuji Kusaka
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 08:29
    Fuji Kusaka
    0

    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

  • Kim Andersen 1447 posts 2196 karma points MVP
    Jul 05, 2011 @ 08:33
    Kim Andersen
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 08:41
    Fuji Kusaka
    0

    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

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 05, 2011 @ 08:51
    Bjarne Fyrstenborg
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 08:54
    Fuji Kusaka
    0

    HI Bjarne,

     

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

     

    //fuji

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 09:18
    Fuji Kusaka
    0

    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>
  • Kim Andersen 1447 posts 2196 karma points MVP
    Jul 05, 2011 @ 09:18
    Kim Andersen
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 09:37
    Fuji Kusaka
    0

    Kim,

     

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

     

    //fuji

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 09:47
    Fuji Kusaka
    0

    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

     


  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 05, 2011 @ 09:51
    Bjarne Fyrstenborg
    0

    Hi Fuji

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

    Bjarne 

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 10:00
    Fuji Kusaka
    0

    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"> 
  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 05, 2011 @ 10:22
    Bjarne Fyrstenborg
    0

    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 

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 05, 2011 @ 11:12
    Fuji Kusaka
    0

    Guys i got it working, and Bjarne am not using Media Picker but a Media Current since am using my macros in editor. But thanks both of you.

     

    <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(umbracoFile,'.'),'_Thumbnail.jpg')}" />
           
        </xsl:for-each>
              
       </xsl:if

     

    //fuji

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 06, 2011 @ 14:33
    Fuji Kusaka
    0

    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

  • Kim Andersen 1447 posts 2196 karma points MVP
    Jul 06, 2011 @ 18:53
    Kim Andersen
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 06, 2011 @ 19:03
    Fuji Kusaka
    0

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

     

    /fuji

  • Kim Andersen 1447 posts 2196 karma points MVP
    Jul 06, 2011 @ 21:29
    Kim Andersen
    0

    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

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Jul 06, 2011 @ 22:29
    Bjarne Fyrstenborg
    0

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jul 07, 2011 @ 06:44
    Fuji Kusaka
    0

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

     

    //fuji

Please Sign in or register to post replies

Write your reply to:

Draft