jQuery/Галерея CSS/Слайд-шоу Как ограничить прокрутку эскиза до видимой области

Question

Хорошо, у вас есть функция слайд-шоу галереи, в которой источник img выбранного эскиза будет отображаться в контейнере основного изображения.

Я думаю, что могу сделать эту часть работы. Моя проблема прямо сейчас пытается определить область прокрутки эскизов - я хочу, чтобы она показывала миниатюры, а не пробелы.

Вот JQuery:

function thumbs_slide(){ 
      var more_thumbs = jQuery('.more-thumbs'); 
      var less_thumbs = jQuery('.less-thumbs'); 
      var thumbnails = jQuery('.thumb-outer-container .thumbnails'); 
      var more_scroll = '-100%'; 
      var less_scroll = '100%'; 
      var out_scroll = thumbnails.css('top'); 

      more_thumbs.hover(function(){ 
       thumbnails.css('top',more_scroll) 
      },function(){ 
       out_scroll = thumbnails.css('top'); 
       thumbnails.css('top',out_scroll);     
      }) 

      less_thumbs.hover(function(){ 
       thumbnails.css('top',less_scroll); 
      },function(){ 
       out_scroll = thumbnails.css('top'); 
       thumbnails.css('top',out_scroll); 
      }) 
     } 

     thumbs_slide(); 

CSS:

.single-product .load .images .thumb-outer-container { 
float: right; 
width: 20%; 
max-width: 200px; 
overflow: hidden; 
position: relative; 
border: 1px solid #d1d1d1; 


.thumb-outer-container .thumbnails { 
-moz-transition: all 5s ease-in-out; 
-ms-transition: all 5s ease-in-out; 
-o-transition: all 5s ease-in-out; 
-webkit-transition: all 5s ease-in-out; 
transition: all 5s ease-in-out; 
} 

.thumb-outer-container .more-thumbs, 
.thumb-outer-container .less-thumbs { 
opacity: .85; 
position: absolute; 
z-index: 99; 
right: 0; 
left: 0; 
height: 50%; 

text-align: center; 
cursor: pointer; 

-moz-transition: all .05s ease-in-out; 
-ms-transition: all .05s ease-in-out; 
-o-transition: all .05s ease-in-out; 
-webkit-transition: all .05s ease-in-out; 
transition: all .05s ease-in-out; 
} 

.more-thumbs { 
top: 0; 
} 

.more-thumbs::after { 
    content: '\f077'; 
    font-family: FontAwesome; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    border-bottom: 1px solid currentColor; 
    background-color: rgba(249,249,249,.95); 
    color: rgba(0,174,239,1); 
} 

.less-thumbs { 
bottom: 0; 
} 

.less-thumbs::after { 
    content: '\f078'; 
    font-family: FontAwesome; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    border-top: 1px solid currentColor; 
    background-color: rgba(249,249,249,.95); 
    color: rgba(0,174,239,1); 
} 

.thumb-outer-container .more-thumbs:hover, 
.thumb-outer-container .more-thumbs:focus, 
.thumb-outer-container .less-thumbs:hover, 
.thumb-outer-container .less-thumbs:focus { 
    opacity: 1 !important; 
} 

.single-product .load .images img { 
border: 0; 
} 

.single-product .load .images .thumbnails { 
padding-top: 0 !important; 
position: absolute; 
top: 0; 
right: 0; 
left: 0; 
} 

.single-product .load .images .thumbnails a { 
margin: 0 0 1px !important; 
padding: 0 !important; 
border: 0; 
float: left !important; 
display: inline-block !important; 
width: 100% !important; 
max-width: 200px !important; 
} 

.single-product .load .images .thumbnails a:hover, 
.single-product .load .images .thumbnails a:focus { 
    border-bottom: 0; 
} 

Это WP сайт, я могу добавить больше кода, если это необходимо, но я считаю, что это что-то нужно в JQuery.

Sample ссылка: http://www.dev.mediaworksweb.com/beamimaging-wp/product/phosphor-screens/ -> Галерея вкладки

Спасибо, Matt

Answer 1

Одним из способов решения этого было бы связать click события к каждому изображению в слайдере миниатюр, который изменит основное изображение когда щелкнул. Это будет сделано следующим образом:

$('.thumbnails a img').click(function() { 
    $(".woocommerce-main-image").attr("src", this.attr("src")); 
}); 

Надеюсь, это поможет!

Answer 2

Мой ответ оказался в переменных jQuery.

Изменено less_scroll от '100%' до '0';

var more_scroll = '-100%'; 
    var less_scroll = '0';