Để có một website đẹp và chuyên nghiệp hơn thì việc thêm những hiệu ứng vào website là cần thiết, bài viết sau sẽ hướng dẫn bạn đưa hiệu ứng load ảnh bằng Lightbox vào website Magento
1. Demo và Downlaod lightbox các bạn tải về tại đây
2. Giải nén và Copy lightbox vào Magento
Tìm đến đường dẫn sau: /skin/frontend/default/default/js/
và tạo một thư mục với tên lightbox : /lightbox
và copy file lightbox.js tới thư mục này
CHÚ Ý: Đưa lightbox.js vào thư mục /magento/js/lightbox/ nếu nó không làm việc. Khi chạy thì đảm bảo file lightbox phải được load trong giao diện
Copy file lightbox.css tới /skin/frontend/default/default/css/
Tìm đến thư mục images theo đường dẫn sau: /skin/frontend/default/default/images/
Tại đây tạo một thư mục có tên lightbox: /lightbox/ và copy tất cả các hình ảnh của lightbox vào đó.
2. Thay đổi thư mục hình ảnh images của lightbox
Mở : /skin/frontend/default/default/css/lightbox.css
và thay thế:
background: transparent url(../images/blank.gif)
no-repeat;
bằng:
background: transparent url(../images/lightbox/blank.gif)
no-repeat;
Thay:
#prevLink:hover,
#prevLink:visited:hover { background: url(../images/prevlabel.gif)
left 15% no-repeat; }
bằng:
#prevLink:hover,
#prevLink:visited:hover { background: url(../images/lightbox/prevlabel.gif)
left 15% no-repeat; }
Thay:
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif)
right 15% no-repeat; }
bằng:
#nextLink:hover,
#nextLink:visited:hover { background: url(../images/lightbox/nextlabel.gif) right 15% no-repeat; }
Mở: /skin/frontend/default/default/js/lightbox/lightbox.js
Thay:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
bằng:
fileLoadingImage: SKIN_URL + 'images/lightbox/loading.gif',
fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.gif',
Mở: /app/design/frontend/default/default/template/page/html/head.phtml
Ở head.phtml tìm
<script type="text/javascript">
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
</script>
thay thế với
<script type="text/javascript">
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';
</script>
4. Chèn javascript và stylesheet vao magento
Mở : /app/design/frontend/default/default/layout/page.xml
Ở page.xml chèn vào
-
<block type="page/html_head" name="head" as="head">
-
....
-
</block>
code sau:
-
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
-
<action method="addCss"><stylesheet>css/lightbox/lightbox.css</stylesheet></action>
SAU prototype.js. Thêm vào 2 dòng js và css vào và nhìn giống thế này:
-
...
-
<action method="addJs"><script>mage/cookies.js</script></action>
-
<action method="addItem"><type>skin_js</type><name>js/lightbox/lightbox.js</name></action>
-
<action method="addCss"><stylesheet>css/lightbox/lightbox.css</stylesheet></action>
-
<action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
-
...
5. Chèn lightbox vào trang xem chi tiết sản phẩm
Mở /app/design/frontend/default/default/template/catalog/product/view/media.phtml
Ở media.phtml thay thế:
-
<?php foreach ($this->getGalleryImages() as $_image): ?>
-
<li>
-
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resizable=yes');return false;">
-
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68,68); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
-
</a>
-
</li>
-
<?php endforeach; ?>
bằng:
-
<?php foreach ($this->getGalleryImages() as $_image): ?>
-
<li>
-
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="lightbox[rotation]" title="<?php echo $_product->getName();?>">
-
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/>
-
</a>
-
</li>
-
<?php endforeach; ?>
6. Cập nhập Cache
Đăng nhập vào admin rồi đi tới System > Cache Management và chắc chắc rằng các lựa chọn cache được thiết lập là NO - Sau đó nhấn nút Clear button
Xong rồi đó!
- 20/01/2010 13:05 - Sử dụng Session trong PHP
- 04/06/2009 11:18 - Cài đặt Magento với dữ liệu mẫu
- 21/05/2009 16:04 - Cakephp manual 1.2 in CHM
- 28/04/2009 13:27 - Hướng dẫn cài đặt mới template (giao diện) cho Magento
- 11/04/2009 13:42 - Đa ngôn ngữ cho Magento
- 31/03/2009 10:39 - Magento ver 1.3.0 ra mắt ngày 30-03-2009
- 31/03/2009 09:37 - Không đăng nhập vào admin sau khi cài đặt Magento ver 1.2.1.2
- 30/03/2009 10:08 - Khắc phục lỗi "Conection interupt" khi cài đặt Magento trên Xampp 1.7.0
- 20/03/2009 22:23 - Cách thêm "Google - Did you mean?" suggestion tới hệ thống tìm kiếm của Joomla
- 28/02/2009 16:02 - Cài đặt Magento trên localhost với XAMPP and WAMP
Tel: 