Changeset 16393 for extensions/flop_style/thumbnails/fancy_hover.tpl

Timestamp:

Jul 6, 2012, 4:32:18 PM (12 years ago)

Author:

flop25

Message:

update for 2.4 : really amazing !

File:

• extensions/flop_style/thumbnails/fancy_hover.tpl (modified) (4 diffs)

extensions/flop_style/thumbnails/fancy_hover.tpl

@@ -1 +1 @@
 {combine_css path="template-extension/flop_style/thumbnails/fancy_hover.css"}
 {combine_script id='jquery' path='themes/default/js/jquery.min.js'}
+{define_derivative name='derivative_fh' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true}
 {html_head}
   {literal}
@@ -9 +10 @@
         $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
                 .animate({
-                        marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
-                        marginLeft: '-110px',
-                        top: '50%',
-                        left: '50%',
-                        width: '174px', /* Set new width */
-                        height: '174px', /* Set new height */
-                        padding: '20px'
+                        marginTop: '-{/literal}{$derivative_fh->max_width()*1.25}{literal}px', /* The next 4 lines will vertically align this image */ 
+                        marginLeft: '-{/literal}{$derivative_fh->max_height()*1.25}{literal}px',
+                        top: '{/literal}{$derivative_fh->max_width()}{literal}px',
+                        left: '{/literal}{$derivative_fh->max_height()}{literal}px',
+                        width: '{/literal}{$derivative_fh->max_width()+70}{literal}px', /* Set new width */
+                        height: '{/literal}{$derivative_fh->max_height()+70}{literal}px', /* Set new height */
+                        padding: '15px'
                 }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
 
@@ -26 +27 @@
                         top: '0',
                         left: '0',
-                        width: '100px', /* Set width back to default */
-                        height: '100px', /* Set height back to default */
+                        width: '{/literal}{$derivative_fh->max_width()}{literal}px', /* Set width back to default */
+                        height: '{/literal}{$derivative_fh->max_height()}{literal}px', /* Set height back to default */
                         padding: '5px'
                 }, 400);
@@ -36 +37 @@
 {/html_head}
 
+{html_style}{literal}
+ul.thumbnails li img {
+        height:{/literal}{$derivative_fh->max_height()}{literal}px;
+        width:{/literal}{$derivative_fh->max_width()}{literal}px;
+}
+ul.thumbnails li
+{
+        width:{/literal}{$derivative_fh->max_width()+10}{literal}px;
+        height:{/literal}{$derivative_fh->max_height()+10}{literal}px;
+}
+{/literal}{/html_style}
 {if !empty($thumbnails)}
 {strip}{foreach from=$thumbnails item=thumbnail}
         <li>
     <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
-      <img src="{$thumbnail.TN_SRC}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
+      <img src="{$pwg->derivative_url($derivative_fh, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
     </a>
         </li>