1 | {combine_css path="template-extension/flop_style/thumbnails/fancy_hover.css"} |
---|
2 | {combine_script id='jquery' path='themes/default/js/jquery.min.js'} |
---|
3 | {define_derivative name='derivative_fh' width=$derivative_params->max_width() height=$derivative_params->max_height() crop=true} |
---|
4 | {html_head} |
---|
5 | {literal} |
---|
6 | <script type="text/javascript"> |
---|
7 | $(document).ready(function(){ |
---|
8 | $("ul.thumbnails li").hover(function() { |
---|
9 | $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ |
---|
10 | $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/ |
---|
11 | .animate({ |
---|
12 | marginTop: '-{/literal}{$derivative_fh->max_width()*1.25}{literal}px', /* The next 4 lines will vertically align this image */ |
---|
13 | marginLeft: '-{/literal}{$derivative_fh->max_height()*1.25}{literal}px', |
---|
14 | top: '{/literal}{$derivative_fh->max_width()}{literal}px', |
---|
15 | left: '{/literal}{$derivative_fh->max_height()}{literal}px', |
---|
16 | width: '{/literal}{$derivative_fh->max_width()+70}{literal}px', /* Set new width */ |
---|
17 | height: '{/literal}{$derivative_fh->max_height()+70}{literal}px', /* Set new height */ |
---|
18 | padding: '15px' |
---|
19 | }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */ |
---|
20 | |
---|
21 | } , function() { |
---|
22 | $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */ |
---|
23 | $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/ |
---|
24 | .animate({ |
---|
25 | marginTop: '0', /* Set alignment back to default */ |
---|
26 | marginLeft: '0', |
---|
27 | top: '0', |
---|
28 | left: '0', |
---|
29 | width: '{/literal}{$derivative_fh->max_width()}{literal}px', /* Set width back to default */ |
---|
30 | height: '{/literal}{$derivative_fh->max_height()}{literal}px', /* Set height back to default */ |
---|
31 | padding: '5px' |
---|
32 | }, 400); |
---|
33 | }); |
---|
34 | |
---|
35 | }); </script> |
---|
36 | {/literal} |
---|
37 | {/html_head} |
---|
38 | |
---|
39 | {html_style}{literal} |
---|
40 | ul.thumbnails li img { |
---|
41 | height:{/literal}{$derivative_fh->max_height()}{literal}px; |
---|
42 | width:{/literal}{$derivative_fh->max_width()}{literal}px; |
---|
43 | } |
---|
44 | ul.thumbnails li |
---|
45 | { |
---|
46 | width:{/literal}{$derivative_fh->max_width()+10}{literal}px; |
---|
47 | height:{/literal}{$derivative_fh->max_height()+10}{literal}px; |
---|
48 | } |
---|
49 | {/literal}{/html_style} |
---|
50 | {if !empty($thumbnails)} |
---|
51 | {strip}{foreach from=$thumbnails item=thumbnail} |
---|
52 | <li> |
---|
53 | <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> |
---|
54 | <img src="{$pwg->derivative_url($derivative_fh, $thumbnail.src_image)}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > |
---|
55 | </a> |
---|
56 | </li> |
---|
57 | {/foreach}{/strip} |
---|
58 | {/if} |
---|