Shop Nukeviet: hover flip image

Thành viên năng động
Vì vài lời hứa, mình trở lại đây để thực hiện nốt rồi chào tạm biệt các bạn. Hy vọng sau bài này các Mods sẽ vô tư xóa bài và cả tài khoản này luôn nhé, vô cùng cảm ơn !

Bài viết này hướng dẫn lấy ảnh trong chuỗi otherimage ra ngoài trang chủ cùng với hiệu ứng CSS3 Hover Transition Image thay đổi 2 ảnh.

hover-flip-2-image-shop-nukeviet.jpg

1. Gọi image trong chuỗi otherimage:

a. File modules/shops/functions.php

Trong file này lần lượt tìm 3 hàm GetDataIn,GetDataInGroup (2 vị trí). Trong mỗi hàm bạn gọi biến $otherimage.

Cụ thể như sau:

- Tìm trong hàm GetDataIn đoạn mã $gift_to, $newday) = sửa thành $gift_to, $otherimage, $newday) =

- Tìm tiếp bên dưới hàm này 'gift_to'=> $gift_to, và thêm vào bên dưới 'otherimage' => $otherimage,

- Tìm trong hàm GetDataInGroup đoạn mã $gift_content, $newday) = sửa thành $gift_content, $otherimage, $newday) =

- Tìm tiếp bên dưới hàm này 'gift_content' => $gift_content, và thêm vào bên dưới 'otherimage' => $otherimage,

- Tìm trong hàm GetDataInGroup thứ 2 đoạn mã $gift_to, $gift_from) = sửa thành $gift_to, $otherimage, $gift_from) =

- Tìm tiếp bên dưới hàm này 'gift_from' => $gift_from, và thêm vào bên dưới 'otherimage' => $otherimage,

b. File modules/shops/theme.php

Tìm function view_home_cat, kéo xuống dòng $xtpl->assign('num', $num_row); thêm vào bên dưới

PHP:
// Show otherimage

if (!empty($data_row_i['otherimage'])){

    $otherimage = NV_BASE_SITEURL . NV_FILES_DIR . '/' . $module_upload . '/' . $data_row_i['otherimage'];

} else {

    $otherimage = $data_row_i['homeimgthumb'];

}

    $otherimage = explode('|', $otherimage);

    $xtpl->assign('IMG_SRC_0', $otherimage[0]);
Thao tác trong file này theo từng kiểu hiển thị trang chủ mà bạn gọi hàm tương ứng. Ở đây mình muốn hiển thị trong kiểu view_home_cat. Nếu muốn kiểu khác bạn tìm từ khóa tương ứng.

c. File funcs/main.php

Ở đây áp dụng cho hàm view_home_cat như trong bước b. Bạn cần tìm đúng hàm như trên bước b.

- Tìm trong hàm view_home_cat, kéo bên dưới hàm này dòng $db->select('id, listcatid, publtime, ...kéo ra sau cùng sửa gift_from, gift_to') thành gift_from, gift_to, otherimage')

- Tìm tiếp ngay bên dưới while (list($id, $listcatid, ... $gift_from, $gift_to) sửa lại thành while (list($id, $listcatid, ... $gift_from, $gift_to, $otherimage)

- Tìm bên dưới hàm này dòng 'gift_to' => $gift_to, thêm vào bên dưới nó dòng 'otherimage' => $otherimage,

2. Hiệu ứng Flip 2 Image on Hover

Mở file themes/{theme-của-bạn}/modules/shops/main_procate.tpl

- Thêm vào bên dưới <!-- BEGIN: main --> đoạn style:

<style>
/* CSS3 Hover Effect Transitions */
.flip_container {width: 100%; float: left; position: relative; overflow: hidden; text-align: center; transition: all 0.3s ease-in-out}
.lt-image{position: relative;display: block}
.lt-image .img-1{position: relative; z-index: 2; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); transition: all 0.5s ease-in-out}
.lt-image .img-2{position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; width: 100%; display: block; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); transition: all 0.5s ease-in-out}
.flip_container:hover .lt-image .img-1 { opacity: 0; transform-style: inherit; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); transition: all 0.5s ease-in-out}
.flip_container:hover .lt-image .img-2{ opacity: 1; transform-style: inherit; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); transition: all 0.5s ease-in-out}

</style>

Hoặc bạn có thể bỏ đoạn style trên vào file themes/{theme-của-bạn}/css/style.css cũng được

- Tìm đoạn mã:


<div style="height: {height}px">
<a href="{LINK}" title="{TITLE}"><img src="{IMG_SRC}" alt="{TITLE}" <!-- BEGIN: tooltip_js -->data-content='{hometext}' data-rel="tooltip" data-img="{IMG_SRC}"<!-- END: tooltip_js -->class="img-thumbnail" style="max-height:{height}px;max-width:{width}px;"></a>
</div>



Sửa lại thành:

<div class="flip_container" style="width:{width}px;height:{height}px">
<a class="lt-image" href="{LINK}" target="_self" title="{TITLE}">
<img src="{IMG_SRC}" class="img-1" alt="{TITLE}"><img src="{IMG_SRC_0}" class="img-2" alt="{TITLE}">
</a>

</div>


Chúc các bạn thành công và chào tạm biệt
 
Last edited by a moderator: Mười 5, 2017 lúc 9:41 AM
Thành viên năng động
Bổ sung thêm đoạn này, chắc bạn ấy quên:
sau bước này:
Code:
- Tìm trong hàm view_home_cat, kéo bên dưới hàm này dòng $db->select('id, listcatid, publtime, ...kéo ra sau cùng sửa gift_from, gift_to') thành gift_from, gift_to, otherimage')
tìm đoạn này:
Code:
while (list($id, $listcatid, $publtime, $title, $alias, $hometext, $homeimgalt, $homeimgfile, $homeimgthumb, $product_code, $product_number, $product_price, $money_unit, $discount_id, $showprice, $gift_content, $gift_from, $gift_to, $hitstotal) = $result->fetch(3)) {
thêm:
Code:
$otherimage,
vào sau:
Code:
$gift_from, $gift_to,
Xong, cám ơn bạn đã hướng dẫn!
 
Thành viên năng động
Cảm ơn bạn @tamle1606 đã chia sẻ những kinh nghiệm hay cho mọi người học hỏi! Hẹn gặp lại bạn trong những ứng dụng mới bổ ích cho cộng đồng nukeviet bạn nhé! Chúc bạn luôn vui khỏe và thành công!
 
Thành viên năng động
Bổ sung thêm đoạn này, chắc bạn ấy quên:
sau bước này:
Code:
- Tìm trong hàm view_home_cat, kéo bên dưới hàm này dòng $db->select('id, listcatid, publtime, ...kéo ra sau cùng sửa gift_from, gift_to') thành gift_from, gift_to, otherimage')
tìm đoạn này:
Code:
while (list($id, $listcatid, $publtime, $title, $alias, $hometext, $homeimgalt, $homeimgfile, $homeimgthumb, $product_code, $product_number, $product_price, $money_unit, $discount_id, $showprice, $gift_content, $gift_from, $gift_to, $hitstotal) = $result->fetch(3)) {
thêm:
Code:
$otherimage,
vào sau:
Code:
$gift_from, $gift_to,
Xong, cám ơn bạn đã hướng dẫn!


Cảm ơn bạn nhắc nhé, mình đã sửa lại hoàn chỉnh.

Cảm ơn mọi người @
 
Thành viên năng động
Cảm ơn bạn nhắc nhé, mình đã sửa lại hoàn chỉnh.

Cảm ơn mọi người @
:59:
 
--= Roll With The Wind =--
Quản trị viên
Cảm ơn bài viết của bạn.
Các dòng code để vào thẻ CODE cho dễ nhìn nhé.
 
Thích: hoanglongvnpt
Thành viên năng động
<div style="height: {height}px">
<a href="{LINK}" title="{TITLE}"><img src="{IMG_SRC}" alt="{TITLE}" <!-- BEGIN: tooltip_js -->data-content='{hometext}' data-rel="tooltip" data-img="{IMG_SRC}"<!-- END: tooltip_js -->class="img-thumbnail" style="max-height:{height}px;max-width:{width}px;"></a>
</div>
đoạn này ở file nào vậy các bác?
 
Thành viên năng động
đoạn này ở file nào vậy các bác?
file: main_procate.tpl
 
Thích: nguyen van tuan