与Safari有一个奇怪的CSS图像问题,并且无法在任何地方找到任何有关此在线的信息.
每件首饰都有一个小缩略图.如果有更多的缩略图可以容纳在那个空间中,我设置JS让它们通过调整外部div的左边缘来回滑动(很像smoothdivscroll,但不是那么复杂).
在Safari中由于某种原因,小缩略图库中的第一个图像保持静态,而其他图像在其上滚动.看起来很废话.我无法理解为什么.它可能是Safari中的一个错误吗？
我觉得这是一个CSS问题,因为在添加这个滑动功能之前,我们只限制了5个图像,并且它们会在Safari中加载重叠和失真……
http://jeandousset.com/jewellery/engagement-rings/
示例HTML：
<div class="span12 offset6 product-images-container" style="margin-left: 140px;">
<div class="product-zoom-container">
<img id="eva-main-image" class="main-image" src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</div>
<div id="eva-gallery" class="product-gallery text-center">
<div class="scroll-products-right"></div>
<div class="scroll-products-left"></div>
<div class="scrollable-area">
<div class="product-gallery-inner" style="width: 420px; margin-left: -30px;">
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" title="eva-engagement-ring-cushion-cut-diamond-under" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle" alt=""></a>
<a href="#" class="product-thumbnail active" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" title="eva-engagement-ring-round-cut-diamond-front" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" title="eva-engagement-ring-cushion-cut-diamond-turned-profile" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
</div>
</div>
</div>
CSS：
.product-gallery {
*zoom: 1;
max-height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.product-gallery:before,.product-gallery:after {
display: table;
content: "";
line-height: 0;
}
.product-gallery:after {
clear: both
}
.product-gallery .scrollable-area {
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
}
.product-gallery .scroll-products-right,.product-gallery .scroll-products-left {
position: absolute;
width: 30px;
height: 100%;
background: url(./../img/arrow-small-left.png) center center no-repeat #fff;
background-color: rgba(255,255,0.6);
top: 0;
left: 0;
z-index: 20;
opacity: .6;
filter: alpha(opacity=60);
}
.product-gallery .scroll-products-right:hover,.product-gallery .scroll-products-left:hover {
cursor: pointer !important;
background-color: rgba(255,0.8);
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .scroll-products-right {
right: 0;
left: auto;
background: url(./../img/arrow-small-right.png) center center no-repeat #fff;
background-color: rgba(255,0.6);
}
.product-gallery .product-thumbnail {
float: left;
max-width: 70px;
opacity: .5;
filter: alpha(opacity=50);
}
.product-gallery .product-thumbnail.active {
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .product-thumbnail:before,.product-gallery .product-thumbnail:after {
content: ""
}
JS：
Dousset.product = {
currentWindowWidthMin: null,currentInterval: null,init: function () {
$('#wrapper').on('click','.product-thumbnail',Dousset.product.thumbClicked);
// $('.product-thumbnail').css({
// 'float': 'none',// 'display': 'inline-block'
// });
$('#wrapper').on('mousedown','.scroll-products-right',Dousset.product.scrollThumbsLeft);
$('#wrapper').on('mousedown','.scroll-products-left',Dousset.product.scrollThumbsRight);
$('#wrapper').on('mouseup','.scroll-products-left,.scroll-products-right',function(e){
clearTimeout(Dousset.product.currentInterval);
Dousset.product.currentInterval = null;
});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('#wrapper').on('click',Dousset.product.scrollThumbsLeftBatch);
$('#wrapper').on('click',Dousset.product.scrollThumbsRightBatch);
}
Dousset.product.setCurrentWindowWidthMin();
$(window).resize(Dousset.product.windowResized);
},thumbClicked: function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
var postId = $(this).data('post-id');
var newImg = $(this).data('image');
$('.main-image[data-post-id="'+postId+'"]').attr('src',newImg);
$('.product-thumbnail[data-post-id="'+postId+'"]').removeClass('active');
$(this).addClass('active');
}
},scrollThumbsLeft: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.css({
'margin-left' : '-=1'
});
}
},10);
},scrollThumbsRight: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.css({
'margin-left' : '+=1'
});
}
},scrollThumbsLeftBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.animate({
'margin-left' : '-=70'
});
}
},scrollThumbsRightBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.animate({
'margin-left' : '+=70'
});
}
},setCurrentWindowWidthMin: function () {
Dousset.product.currentWindowWidthMin = $( window ).width() > 979 ? 980 : $( window ).width() > 767 ? 768 : 480;
},windowResized: function () {
var oldWinMin = Dousset.product.currentWindowWidthMin;
Dousset.product.setCurrentWindowWidthMin();
}
}
$(document).ready(function(){
Dousset.product.init();
});
