2/22/2012

Hướng dẫn làm hiệu ứng cloud zoom virtuemart

1)Mở file theme.php của themes mà bạn sử dụng, ví dụ:
components\com_virtuemart\themes\default\theme.php tại dòng 89 bạn thay thế code:

elseif( @$_REQUEST['output'] != "pdf" ) {
$link = $imageurl;
$text = "<br/>".$VM_LANG->_('PHPSHOP_FLYPAGE_ENLARGE_IMAGE');
$product_image = "<a class=\"cloud-zoom\" rel=\"adjustX: 10, adjustY:-4, zoomWidth:200, zoomHeight:200\" href=\"$imageurl\" target=\"_blank\">"
. ps_product::image_tag($product['product_thumb_image'], $img_attributes, 0)
. "</a>".vmPopupLink( $link, $text, $width, $height );
}

2)Sau đó vào Admin->Configuration->site->layout(congiguration)
tại mục Open Product Images in a LightBox? chọn No

3)Kế tiếp vô flypage mà bạn sử dụng, ví dụ
components\com_virtuemart\themes\default\templates\product_d etails\flypage.tpl.php
nhập code này vô
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
?>
<script type="text/javascript" src="<?php echo URL;?>components/com_virtuemart/themes/default/jquery.js"></script>
<script type="text/javascript" src="<?php echo URL;?>components/com_virtuemart/themes/default/cloud-zoom.1.0.2.min.js"></script>

Tất nhiên bạn đã phải có 2 file jquery.js và cloud-zoom.1.0.2.min.js nằm trong thư mục components/com_virtuemart/themes/default/

4)mở file theme.css nhập đoạn code khai báo này vô cuối trang
/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
border: 4px solid #888;
margin:-4px; /* Set this to minus the border thickness. */
background-color:#fff;
cursor:move;
}

/* This is for the title text. */
.cloud-zoom-title {
font-family:Arial, Helvetica, sans-serif;
position:absolute !important;
background-color:#000;
color:#fff;
padding:3px;
width:100%;
text-align:center;
font-weight:bold;
font-size:10px;
top:0px;
}

/* This is the zoom window. */
.cloud-zoom-big {
border:4px solid #ccc;
overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
color:white;
background:#222;
padding:3px;
border:1px solid #000;
}

SHARE THIS

Author:

Tôi là PHƯỚC kỹ sư công nghệ thông tin. chuyên thiết kế web và làm dịch vụ MMO.

0 comments: