Sign in Register
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
    Djan Blom
    0

    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
    Djan Blom
    0

    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
    Djan Blom
    100

    * import the Jquery FIRST.

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies