Having a weird css image problem with Safari and couldn't find anything in this place on the Internet.
Each piece of jewelry has a small gallery of miniatures under it. If there are more sketches than can fit in this space, I configured JS to slide back and forth by adjusting the left margin of the outer div (very similar to smoothdivscroll, but not so difficult).
In Safari, for some reason, the first image in the small thumbnail gallery remains static, while the rest scrolls it. looks really shit. And I can’t understand why. Perhaps this is a bug in Safari?
It seems to me that this is a CSS problem, because before adding this sliding function, we just had a limit on only 5 images, and they would load overlapping and distorted ones in Safari, as well ...
http://jeandousset.com/jewellery/engagement-rings/
HTML example:
<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,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,255,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,255,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', '.scroll-products-right', Dousset.product.scrollThumbsLeftBatch); $('#wrapper').on('click', '.scroll-products-left', 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' }); } },10); }, 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(); });