[英]Create vertical image carousel
I'm trying to create a custom vertical image carousel because I can't use any plugins out there due to the js events attached to the images which I need to retain and the only way that would work for me is to create custom carousel. 我试图创建一个自定义垂直图像轮播,因为由于需要附加到图像上的js事件,我无法使用任何插件,因此对我有用的唯一方法是创建自定义图像轮播。
Functionalities 功能性
All functionalities listed above is implemented already. 上面列出的所有功能已经实现。
PROBLEM 问题
The last image will not snap/stop before the next button, as it will create blank space in between. 最后一个图像不会在下一个按钮之前捕捉/停止,因为它将在它们之间创建空白。
JS Code JS代码
$(function(){
var image_height = 0;
var gallery_offset = 0;
var image_count = $('img.thumbnail').length;
var click_count = 0;
var image_height = 0;
var last_images_count = 0;
$('.gallery-container a').click(function(){
$('.gallery-container a').removeClass('active')
$(this).addClass('active');
});
jQuery('.thumbnail').each(function(){
$(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
image_height = $(this).parent().outerHeight();
})
// Disable arrows if the images count is 3 below
if(image_count <= 3) {
$('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
click_count = 0;
}
// Set the first image as active
jQuery('.gallery-container img.thumbnail').first().click();
var thumb_active = jQuery('.gallery-container .active');
$('.gallery-container a').on('click', function() {
thumb_active = jQuery('.gallery-container .active');
});
$('.product-more-pictures .down').on('click', function (e) {
$('.product-more-pictures .up').removeClass('disabled')
if(thumb_active.nextAll(':lt(1)').length) {
thumb_active.nextAll(':lt(1)').children().click()
thumb_active = jQuery('.gallery-container .active');
}
if( ! thumb_active.next().length) {
$(this).addClass('disabled')
} else {
$(this).removeClass('disabled');
}
if (click_count < image_count) {
click_count = click_count + 1;
update_gallery('down');
}
});
$('.product-more-pictures .up').on('click', function () {
$('.product-more-pictures .down').removeClass('disabled')
if(thumb_active.prevAll(':lt(1)').length) {
thumb_active.prevAll(':lt(1)').children().click()
thumb_active = jQuery('.gallery-container .active');
}
if( ! thumb_active.prev().length) {
$(this).addClass('disabled')
} else {
$(this).removeClass('disabled');
}
if (click_count > 0) {
click_count = click_count - 1;
update_gallery('up');
}
});
function update_gallery(direction) {
gallery_offset = click_count * image_height;
last_images_count = thumb_active.nextAll().length;
$(".gallery-container").animate({
'top': '-' + gallery_offset + 'px'
}, 800);
}
});
Fiddle : https://jsfiddle.net/qrvrdjch/6/ 小提琴: https : //jsfiddle.net/qrvrdjch/6/
Any help would be greatly appreciated :) 任何帮助将不胜感激 :)
Try this... you need to initialize the click count as -1, and change the if (click_count < image_count) to this "if (click_count < image_count - 3)" since on load default selected image is first, so this one will serve your need I guess NB: no change required in css and HTML 尝试此操作...您需要将点击计数初始化为-1,并将if(click_count <image_count)更改为“ if(click_count <image_count-3)”,因为在加载时默认选择的图像是第一个,因此该图像将NB:无需更改CSS和HTML
$(function(){
var image_height = 0;
var gallery_offset = 0;
var image_count = $('img.thumbnail').length;
var click_count = -1;
var image_height = 0;
var last_images_count = 0;
$('.gallery-container a').click(function(){
$('.gallery-container a').removeClass('active')
$(this).addClass('active');
});
jQuery('.thumbnail').each(function(){
$(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
image_height = $(this).parent().outerHeight();
})
// Disable arrows if the images count is 3 below
if(image_count <= 3) {
$('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
click_count = 0;
}
// Set the first image as active
jQuery('.gallery-container img.thumbnail').first().click();
var thumb_active = jQuery('.gallery-container .active');
$('.gallery-container a').on('click', function() {
thumb_active = jQuery('.gallery-container .active');
});
$('.product-more-pictures .down').on('click', function (e) {
$('.product-more-pictures .up').removeClass('disabled')
if(thumb_active.nextAll(':lt(1)').length) {
thumb_active.nextAll(':lt(1)').children().click()
thumb_active = jQuery('.gallery-container .active');
}
if( ! thumb_active.next().length) {
$(this).addClass('disabled')
} else {
$(this).removeClass('disabled');
}
if (click_count < image_count - 3) {
console.log(image_count)
console.log(click_count)
click_count = click_count + 1;
update_gallery('down');
}
});
$('.product-more-pictures .up').on('click', function () {
$('.product-more-pictures .down').removeClass('disabled')
if(thumb_active.prevAll(':lt(1)').length) {
thumb_active.prevAll(':lt(1)').children().click()
thumb_active = jQuery('.gallery-container .active');
}
if( ! thumb_active.prev().length) {
$(this).addClass('disabled')
} else {
$(this).removeClass('disabled');
}
if (click_count > 0) {
click_count = click_count - 1;
update_gallery('up');
}
});
function update_gallery(direction) {
gallery_offset = click_count * image_height;
last_images_count = thumb_active.nextAll().length;
$(".gallery-container").animate({
'top': '-' + gallery_offset + 'px'
}, 800);
}
});
You are almost there. 你快到了 You just need to edit one condition.
您只需要编辑一个条件。 Change "if (click_count < image_count)" under click event of down button(line 48 in JSFiddle) to "if (click_count < image_count-3)"
将向下按钮(JSFiddle中的第48行)的单击事件下的“ if(click_count <image_count)”更改为“ if(click_count <image_count-3)”
$(function(){ var image_height = 0; var gallery_offset = 0; var image_count = $('img.thumbnail').length; var click_count = 0; var image_height = 0; var last_images_count = 0; $('.gallery-container a').click(function(){ $('.gallery-container a').removeClass('active') $(this).addClass('active'); }); jQuery('.thumbnail').each(function(){ $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); }); image_height = $(this).parent().outerHeight(); }) // Disable arrows if the images count is 3 below if(image_count <= 3) { $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled') click_count = 0; } // Set the first image as active jQuery('.gallery-container img.thumbnail').first().click(); var thumb_active = jQuery('.gallery-container .active'); $('.gallery-container a').on('click', function() { thumb_active = jQuery('.gallery-container .active'); }); $('.product-more-pictures .down').on('click', function (e) { $('.product-more-pictures .up').removeClass('disabled') if(thumb_active.nextAll(':lt(1)').length) { thumb_active.nextAll(':lt(1)').children().click() thumb_active = jQuery('.gallery-container .active'); } if( ! thumb_active.next().length) { $(this).addClass('disabled') } else { $(this).removeClass('disabled'); } if (click_count < image_count-3) { click_count = click_count + 1; update_gallery('down'); } }); $('.product-more-pictures .up').on('click', function () { $('.product-more-pictures .down').removeClass('disabled') if(thumb_active.prevAll(':lt(1)').length) { thumb_active.prevAll(':lt(1)').children().click() thumb_active = jQuery('.gallery-container .active'); } if( ! thumb_active.prev().length) { $(this).addClass('disabled') } else { $(this).removeClass('disabled'); } if (click_count > 0) { click_count = click_count - 1; update_gallery('up'); } }); function update_gallery(direction) { gallery_offset = click_count * image_height; last_images_count = thumb_active.nextAll().length; $(".gallery-container").animate({ 'top': '-' + gallery_offset + 'px' }, 800); } });
.product-more-pictures a { display: block; text-align: center; } .product-more-pictures a.disabled { pointer-events: none !important; cursor: default; visibility: visible !important; background: #C3C3C3; } .product-more-pictures a.down.disabled:before, .product-more-pictures a.up.disabled:before{ content: ' '; background: rgba(255, 255, 255, 0.42); position: absolute; height: 100%; width: 100%; left: 0px; bottom: 0px; } .product-more-pictures { text-align: right; height: 549px; width: 111px; overflow: hidden; position: relative; } .gallery-container { position: relative; padding: 30px 0px; } .gallery-container img { margin-bottom: 0px; } #product-photos .product-more-pictures { width: 18.516667%; } .product-more-pictures .up, .product-more-pictures .down { position: absolute; background: #999; padding: 0px; width: 100%; text-align: center; z-index: 80; color: #fff; padding: 5px 10px; } .product-more-pictures .up { top: 0px; } .product-more-pictures .down { bottom: 0px; } .product-more-pictures a.active img { border: solid 1px rgba(95, 95, 95,0.75) !important; } .product-more-pictures .icon-chevron-up, .product-more-pictures .icon-chevron-down { color: #fff !important; font-size: 21px; position: relative; } .product-more-pictures .icon-chevron-up { top: 0px; } .zoomContainer { z-index: 999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-more-pictures desktop-3"> <a href="#" class="up">up</a> <div class="gallery-container"> <a href="#"> <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_027_compact.jpg?v=1451925772" alt="Sheer Perfection Tunic"> </a> <a href="#"> <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_111_compact.jpg?v=1451925773"alt="Sheer Perfection Tunic"> </a> <a href="#"> <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_194_compact.jpg?v=1451925774" alt="Sheer Perfection Tunic"> </a> <a href="#" > <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_029_compact.jpg?v=1451925774" alt="Sheer Perfection Tunic"> </a> <a href="#"> <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_095_compact.jpg?v=1451925775" data-image-id="8200864135" alt="Sheer Perfection Tunic"> </a> <a href="#"> <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_135_compact.jpg?v=1451925776" data-image-id="8200864327" alt="Sheer Perfection Tunic"> </a> <a href="#" > <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_149_compact.jpg?v=1451925776" data-image-id="8200864775" alt="Sheer Perfection Tunic"> </a> <a href="#" > <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_152_compact.jpg?v=1451925777" data-image-id="8200865671" alt="Sheer Perfection Tunic"> </a> <a href="#"> <img class="thumbnail" src="//cdn.shopify.com/s/files/1/0190/3782/products/Name_it_to_Win_It_11-27_159_compact.jpg?v=1451925778" data-image-id="8200866183" alt="Sheer Perfection Tunic"> </a> </div> <a href="#" class="down">down</a> </div>
$(function(){ var image_height = 0; var gallery_offset = 0; var image_count = $('img.thumbnail').length; var image_show = 3; var click_count = 0; var image_height = 0; var last_images_count = 0; $('.gallery-container a').click(function(){ $('.gallery-container a').removeClass('active') $(this).addClass('active'); }); jQuery('.thumbnail').each(function(){ $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); }); image_height = $(this).parent().outerHeight(); }) // Disable arrows if the images count is 3 below if(image_count <= 3) { $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled') click_count = 0; } // Set the first image as active jQuery('.gallery-container img.thumbnail').first().click(); var thumb_active = jQuery('.gallery-container .active'); $('.gallery-container a').on('click', function() { thumb_active = jQuery('.gallery-container .active'); }); $('.product-more-pictures .down').on('click', function (e) { $('.product-more-pictures .up').removeClass('disabled') if(thumb_active.nextAll(':lt(1)').length) { thumb_active.nextAll(':lt(1)').children().click() thumb_active = jQuery('.gallery-container .active'); } if( ! thumb_active.next().length || click_count > (image_count-image_show)) { $(this).addClass('disabled') } else { $(this).removeClass('disabled'); } if (click_count < (image_count-image_show)) { click_count = click_count+1; update_gallery('down'); } }); $('.product-more-pictures .up').on('click', function () { $('.product-more-pictures .down').removeClass('disabled') if(thumb_active.prevAll(':lt(1)').length) { thumb_active.prevAll(':lt(1)').children().click() thumb_active = jQuery('.gallery-container .active'); } if( ! thumb_active.prev().length) { $(this).addClass('disabled') } else { $(this).removeClass('disabled'); } if (click_count > 0) { click_count = click_count - 1; update_gallery('up'); } }); function update_gallery(direction) { gallery_offset = click_count * image_height; last_images_count = thumb_active.nextAll().length; $(".gallery-container").animate({ 'top': '-' + gallery_offset + 'px' }, 800); } });
Hi, 你好
I have added one more veriable image_show=3 for handle image count. 我为句柄图像计数添加了一个更多的image_show = 3。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.