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 | {html_head} |
---|
4 | {literal} |
---|
5 | <script type="text/javascript"> |
---|
6 | $(document).ready(function(){ |
---|
7 | $("ul.thumbnails li").hover(function() { |
---|
8 | $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ |
---|
9 | $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/ |
---|
10 | .animate({ |
---|
11 | marginTop: '-110px', /* The next 4 lines will vertically align this image */ |
---|
12 | marginLeft: '-110px', |
---|
13 | top: '50%', |
---|
14 | left: '50%', |
---|
15 | width: '174px', /* Set new width */ |
---|
16 | height: '174px', /* Set new height */ |
---|
17 | padding: '20px' |
---|
18 | }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */ |
---|
19 | |
---|
20 | } , function() { |
---|
21 | $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */ |
---|
22 | $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/ |
---|
23 | .animate({ |
---|
24 | marginTop: '0', /* Set alignment back to default */ |
---|
25 | marginLeft: '0', |
---|
26 | top: '0', |
---|
27 | left: '0', |
---|
28 | width: '100px', /* Set width back to default */ |
---|
29 | height: '100px', /* Set height back to default */ |
---|
30 | padding: '5px' |
---|
31 | }, 400); |
---|
32 | }); |
---|
33 | |
---|
34 | }); </script> |
---|
35 | {/literal} |
---|
36 | {/html_head} |
---|
37 | |
---|
38 | {if !empty($thumbnails)} |
---|
39 | {strip}{foreach from=$thumbnails item=thumbnail} |
---|
40 | <li> |
---|
41 | <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}"> |
---|
42 | <img src="{$thumbnail.TN_SRC}" class="thumb_jpolaroid" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > |
---|
43 | </a> |
---|
44 | </li> |
---|
45 | {/foreach}{/strip} |
---|
46 | {/if} |
---|