WordPress.org

1. rotate3di
   Member
   Posted 11 months ago #

   Hey there,

   i´m Design Student and i´m trying to figure out how to integrate this Jquery Plugin (http://www.zachstronaut.com/projects/rotate3di/) in the Twenty Ten Theme.

   Heres the Code:

   header.php:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script type="text/javascript" src="/jquery-css-transform/jquery-css-transform.js"></script>
   <script type="text/javascript" src="/rotate3di.js"></script>
   
   <script type="text/javascript" language="javascript" charset="utf-8">
   $(document).ready(function() {
       $('#nav-list-example li div.back').hide().css('left', 0);
   
       function mySideChange(front) {
           if (front) {
               $(this).parent().find('div.front').show();
               $(this).parent().find('div.back').hide();
   
           } else {
               $(this).parent().find('div.front').hide();
               $(this).parent().find('div.back').show();
           }
       }
   
       $('#nav-list-example li').hover(
           function () {
               $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
           },
           function () {
               $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
           }
       );
   });
   </script>

   And in the loop i also added some code:

   <div class="gallery-thumb">
   <ul id="nav-list-example">
     <li>
       <div class="front">
         <a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
       </div>
       <div class="back" style="background:#000;height:150px;width:150px">
       </div>
   </ul>
   </div><!-- .gallery-thumb -->

   It already has the right Div Structure like

   <ul id="nav-list-example">
   <li>
   <div class="front">
   <a class="size-thumbnail" href="http://localhost:8888/wordpress/?p=136">
   <img class="attachment-thumbnail" width="150" height="150" title="adept1" alt="Beschreibung1" src="http://localhost:8888/wordpress/wp-content/uploads/2011/06/adept1-150x150.jpg">
   </a>
   </div>
   <div class="back" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); height: 150px; width: 150px; display: none; left: 0px;"> </div>
   </li>
   </ul>

   but the backside of it wont show up on hover

   PLEASE HELP ME, it would be great
   Thanks

   Chris

Reply

You must log in to post.