Tạo slider ảnh sản phẩm với jQuery và CSS3
Khi tìm mua sản phẩm trên mạng, hầu như bất kì ai cũng đều muốn xem nhiều hình ảnh liên quan về sản phẩm mà họ muốn mua. Đó cũng là cách mà nhiều trang bán hàng hiện nay đang áp dụng cho trang web của họ nhằm tăng thêm doanh số bán hàng. Nếu bạn đang nhận một dự án thiết kế cho một trang web bán ...
Khi tìm mua sản phẩm trên mạng, hầu như bất kì ai cũng đều muốn xem nhiều hình ảnh liên quan về sản phẩm mà họ muốn mua. Đó cũng là cách mà nhiều trang bán hàng hiện nay đang áp dụng cho trang web của họ nhằm tăng thêm doanh số bán hàng. Nếu bạn đang nhận một dự án thiết kế cho một trang web bán hàng, hoặc đơn giản là muốn thay thế giao diện trên trang web của mình, thì thử áp dụng kiểu giới thiệu sản phẩm mà mình chia sẻ cho các bạn trong bài viết này xem sao. Mình tin chắc là trang web của các bạn sẽ đẹp và hấp dẫn hơn rất nhiều.
Xem Demo | Download
HTML
Trước hết , chúng ta xây dựng một khung chuẩn html cho hình ảnh sản với tiêu đề và giá của từng sản phẩm.
<ul class="cd-gallery"> <li> <a href="#"> <ul class="cd-item-wrapper"> <li class="selected"> <img src="img/ugmonk-tshirt-1.jpg" alt="Preview image"> </li> <li class="move-right" data-sale="true" data-price="$22"> <img src="img/ugmonk-tshirt-2.jpg" alt="Preview image"> </li> <li> <img src="img/ugmonk-tshirt-3.jpg" alt="Preview image"> </li> </ul> </a> <div class="cd-item-info"> <b><a href="#0">Mountains</a></b> <em class="cd-price">$26</em> </div> </li> </ul>
CSS
Chúng ta sẽ viết các thuộc tính css cho các class .selected (ảnh mặc định) và .move-right (ảnh kế tiếp), .move-left (ảnh bên trái) và .hide-left (ẩn sản phẩm bên trái) , có một vài class chúng ta không khai báo ở phần html, tuy nhiên, chúng sẽ được tự động chèn vào bởi jQuery (các bạn sẽ thấy ở phần sau) .
.cd-item-wrapper li {
position: absolute;
top: 0;
left: 25%;
awidth: 50%;
opacity: 0;
transform: translateX(200%) scale(0.7);
}
.cd-item-wrapper li.selected {
/* selected item */
position: relative;
opacity: 1;
transform: translateX(0) scale(1.3);
}
.cd-item-wrapper li.move-right {
/* item on right - preview visible */
transform: translateX(100%) scale(0.7);
opacity: 0.3;
}
.cd-item-wrapper li.move-left {
/* item on left - preview visible */
transform: translateX(-100%) scale(0.7);
opacity: 0.3;
}
.cd-item-wrapper li.hide-left {
/* items hidden on the left */
transform: translateX(-200%) scale(0.7);
}
Khi người dùng rê chuột vào sản phẩm, thì sẽ có thêm 3 class được chèn và khai báo, đó là : .hover (ấn định cho ảnh khi người dùng rê chuột vào ) , .focus-on-right (sẽ được chèn vào các ảnh với class .selected và .move-left khi người dùng rê chuột vào ảnh với class .move-right) và cuối cùng là .focus-on-left (Khi người dùng rê chuột vào ảnh bên trái, tương tự như .focus-on-right).
@media only screen and (min-awidth: 1048px) {
.cd-item-wrapper li.move-left,
.cd-item-wrapper li.move-right {
/* hide preview items */
opacity: 0;
}
.cd-item-wrapper li.focus-on-left {
/* class added to the .selected and .move-right items when user hovers over the .move-left item (item preview on the left) */
transform: translateX(3%) scale(1.25);
}
.cd-item-wrapper li.focus-on-left.move-right {
transform: translateX(103%) scale(0.7);
}
.cd-item-wrapper li.focus-on-right {
/* class added to the .selected and .move-left items when user hovers over the .move-right item (item preview on the right) */
transform: translateX(-3%) scale(1.25);
}
.cd-item-wrapper li.focus-on-right.move-left {
transform: translateX(-103%) scale(0.7);
}
.cd-item-wrapper li.hover {
/* class added to the preview items (.move-left or .move-right) when user hovers over them */
opacity: 1;
}
.cd-item-wrapper li.hover.move-left {
transform: translateX(-97%) scale(0.75);
}
.cd-item-wrapper li.hover.move-right {
transform: translateX(97%) scale(0.75);
}
}
jQuery
Bây giờ là lúc chúng ta viết các câu lệnh xử lý các sự kiện click hoặc rê chuột. Chúng ta cũng sẽ viết thêm hàm updatePrice() dùng để cập nhật giá sản phẩm (nếu nó salse), hàm này sẽ kiểm tra xem sản phẩm đó có sale hay không (data-sale=”true”), và nếu có thì nó sẽ tự động chèn class on-sale đến phần tử với class là .cd-price và .cd-new-price.
jQuery(document).ready(function($) {
var galleryItems = $('.cd-gallery').children('li');
galleryItems.each(function(){
var container = $(this),
// create slider dots
sliderDots = createSliderDots(container);
//check if item is on sale
updatePrice(container, 0);
// update slider when user clicks one of the dots
sliderDots.on('click', function(){
var selectedDot = $(this);
if(!selectedDot.hasClass('selected')) {
var selectedPosition = selectedDot.index(),
activePosition = container.find('.cd-item-wrapper .selected').index();
if( activePosition < selectedPosition) {
nextSlide(container, sliderDots, selectedPosition);
} else {
prevSlide(container, sliderDots, selectedPosition);
}
updatePrice(container, selectedPosition);
}
});
// update slider on swipeleft
container.find('.cd-item-wrapper').on('swipeleft', function(){
var wrapper = $(this);
if( !wrapper.find('.selected').is(':last-child') ) {
var selectedPosition = container.find('.cd-item-wrapper .selected').index() + 1;
nextSlide(container, sliderDots);
updatePrice(container, selectedPosition);
}
});
// update slider on swiperight
container.find('.cd-item-wrapper').on('swiperight', function(){
var wrapper = $(this);
if( !wrapper.find('.selected').is(':first-child') ) {
var selectedPosition = container.find('.cd-item-wrapper .selected').index() - 1;
prevSlide(container, sliderDots);
updatePrice(container, selectedPosition);
}
});
// preview image hover effect - desktop only
container.on('mouseover', '.move-right, .move-left', function(event){
hoverItem($(this), true);
});
container.on('mouseleave', '.move-right, .move-left', function(event){
hoverItem($(this), false);
});
// update slider when user clicks on the preview images
container.on('click', '.move-right, .move-left', function(event){
event.preventDefault();
if ( $(this).hasClass('move-right') ) {
var selectedPosition = container.find('.cd-item-wrapper .selected').index() + 1;
nextSlide(container, sliderDots);
} else {
var selectedPosition = container.find('.cd-item-wrapper .selected').index() - 1;
prevSlide(container, sliderDots);
}
updatePrice(container, selectedPosition);
});
});
function createSliderDots(container){
var dotsWrapper = $('<ol class="cd-dots"></ol>').insertAfter(container.children('a'));
container.find('.cd-item-wrapper li').each(function(index){
var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
dot = $('<a href="#0"></a>').appendTo(dotWrapper);
dotWrapper.appendTo(dotsWrapper);
dot.text(index+1);
});
return dotsWrapper.children('li');
}
function hoverItem(item, bool) {
( item.hasClass('move-right') )
? item.toggleClass('hover', bool).siblings('.selected, .move-left').toggleClass('focus-on-right', bool)
: item.toggleClass('hover', bool).siblings('.selected, .move-right').toggleClass('focus-on-left', bool);
}
function nextSlide(container, dots, n){
var visibleSlide = container.find('.cd-item-wrapper .selected'),
navigationDot = container.find('.cd-dots .selected');
if(typeof n === 'undefined') n = visibleSlide.index() + 1;
visibleSlide.removeClass('selected');
container.find('.cd-item-wrapper li').eq(n).addClass('selected').removeClass('move-right hover').prevAll().removeClass('move-right move-left focus-on-right').addClass('hide-left').end().prev().removeClass('hide-left').addClass('move-left').end().next().addClass('move-right');
navigationDot.removeClass('selected')
dots.eq(n).addClass('selected');
}
function prevSlide(container, dots, n){
var visibleSlide = container.find('.cd-item-wrapper .selected'),
navigationDot = container.find('.cd-dots .selected');
if(typeof n === 'undefined') n = visibleSlide.index() - 1;
visibleSlide.removeClass('selected focus-on-left');
container.find('.cd-item-wrapper li').eq(n).addClass('selected').removeClass('move-left hide-left hover').nextAll().removeClass('hide-left move-right move-left focus-on-left').end().next().addClass('move-right').end().prev().removeClass('hide-left').addClass('move-left');
navigationDot.removeClass('selected');
dots.eq(n).addClass('selected');
}
function updatePrice(container, n) {
var priceTag = container.find('.cd-price'),
selectedItem = container.find('.cd-item-wrapper li').eq(n);
if( selectedItem.data('sale') ) {
// if item is on sale - cross old price and add new one
priceTag.addClass('on-sale');
var newPriceTag = ( priceTag.next('.cd-new-price').length > 0 ) ? priceTag.next('.cd-new-price') : $('<em class="cd-new-price"></em>').insertAfter(priceTag);
newPriceTag.text(selectedItem.data('price'));
setTimeout(function(){ newPriceTag.addClass('is-visible'); }, 100);
} else {
// if item is not on sale - remove cross on old price and sale price
priceTag.removeClass('on-sale').next('.cd-new-price').removeClass('is-visible').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
priceTag.next('.cd-new-price').remove();
});
}
}
});
Các bạn nên xem lại chi tiết từng câu lệnh để hiểu rõ hơn , trong bài viết này, nếu có gì không hiểu thì các bạn thông cảm cho mình nhé. Vì mình không giỏi tiếng việt cho lắm, nên giải thích hay chia sẻ cũng không rõ ràng được. Nên có gì các bạn cứ để lại lời nhắn nếu có gì gây khó hiểu cho các bạn.
Chúc các bạn thành công !
Chuyên Mục: Css, Javascript
Bài viết được đăng bởi webmaster
