setting up sponsorflipwall in xslt with embedded content - XSLT

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Djan Blom 99 posts 161 karma points

Apr 16, 2013 @ 19:30

Setting up "SponsorFlipWall" in XSLT with Embedded Content?

Hello everyone =)

I want to use this effect on my Items I have displayed on my page through the package 'Embedded Content'.

I downloaded the package and copied the JS code into copies in my JS-folder and linked them up, I also took the CSS from the package.

Here is my Xslt:

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">
        <div class="sponsorListHolder">
            
          <xsl:for-each select="$currentPage/webPortfolio/data/item">
             
              <div class="sponsor" title="Click to flip">
                 <div class="sponsorFlip">
                       <xsl:variable name="media" select="umbraco.library:GetMedia(embedPreview, false())" />
                      <img id="imagePreview" alt="{$media/@nodeName}" src="{$media/umbracoFile}" width="{$media/umbracoWidth}" />
                 </div>
                  
                  <div class="sponsorData">
                       <div class="sponsorDescription">
                            <xsl:value-of select="embedHeader" /><br />
                           <xsl:value-of select="embedDescription" />
                      </div>
                      <div class="sponsorURL">
                            <xsl:value-of select="embedLink" />
                     </div>
                  </div>
              </div>        
              
          </xsl:for-each>
        </div>
        
        
</xsl:template>

It hides my header and description just fine - but I cant make it flip? can anyone tell my why.?

Kind Regards,

Djan

Copy Link

Djan Blom 99 posts 161 karma points

Apr 16, 2013 @ 19:35

and my JS:

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */
   
  $('.sponsorFlip').bind("click",function(){
        
      // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
      
      var elem = $(this);
       
      // data('flipped') is a flag we set when we flip the element:
     
      if(elem.data('flipped'))
      {
         // If the element has already been flipped, use the revertFlip method
         // defined by the plug-in to revert to the default state automatically:
           
          elem.revertFlip();
            
          // Unsetting the flag:
            elem.data('flipped',false)
        }
     else
      {
         // Using the flip method defined by the plugin:
           
          elem.flip({
               direction:'lr',
               speed: 350,
               onBefore: function(){
                 // Insert the contents of the .sponsorData div (hidden from view with display:none)
                   // into the clicked .sponsorFlip div before the flipping animation starts:
                    
                  elem.html(elem.siblings('.sponsorData').html());
              }
         });
           
          // Setting the flag:
          elem.data('flipped',true);
        }
 });
   
});

Copy Link

Djan Blom 99 posts 161 karma points

Apr 16, 2013 @ 20:48

100

* import the Jquery FIRST.

Copy Link
is working on a reply...

Please Sign in or register to post replies