jQuery

การเรียกใช้ jQuery

เรียกใช้จาก Google CDN

<head>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
..
</head>

หรือจาก global_asset ของระบบ

<head>
..
[% 'jquery/jquery.min.js' | global_asset_uri | script_tag %]
..
</head>

การซูมรูปภาพสินค้าด้วย Fancybox

theme.tt

<head>
..
[% 'jquery/jquery.min.js' | global_asset_uri | script_tag %]
[% "jquery/fancybox/jquery.mousewheel.pack.js" | global_asset_uri | script_tag %]
[% "jquery/fancybox/jquery.fancybox.pack.js" | global_asset_uri | script_tag %]
[% 'jquery/fancybox/jquery.fancybox.css' | global_asset_uri | stylesheet_tag %]
..
</head>

<body>
<script type="text/javascript">
  $j = jQuery.noConflict();

// fancybox
$j(document).ready(function() {
  $j(".fancybox a").fancybox();
});  
</script>
..
</body>    

product.tt

<div class="fancybox">
  <a href="[% product.featured_image.src | image_uri ('original') %]">
    <span style="background-image: url('[% product.featured_image.src | image_uri ('medium') %]')"></span>
  </a>
</div>

รายละเอียด/ออพชันดูเพิ่มเติมที่ Fancybox

My tags:
 
Popular tags:
 
Powered by Catalyst