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