fotorama нажмите триггер миниатюры из выбора

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

Мне нужно добавить data-serialid="xxx" на миниатюры.

Любые предложения действительно хороши.

Большое спасибо.

	<!-- jQuery, -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!-- Fotorama -->
	<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.css" rel="stylesheet">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.js"></script>

<select>
<option>Thumb 1 Need Select</option>
<option>Thumb 2 Need Select</option>
<option>Thumb 3 Need Select</option>
<option>Thumb 4 Need Select</option>
</select>

<p>I need to change thumbnails with selectbox.</p>

<div class="fotorama"
     data-width="700"
     data-ratio="3/2"
     data-nav="thumbs"
     data-thumbheight="48">
	<a href="1-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/1-thumb.jpg" width="144" height="96"></a>
	<a href="2-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/2-thumb.jpg" width="144" height="96"></a>
  <a href="3-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/3-thumb.jpg" width="144" height="96"></a>
	<a href="4-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/4-thumb.jpg" width="144" height="96"></a>
	<a href="5-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/5-thumb.jpg" width="144" height="96"></a>
	<a href="24-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/24-thumb.jpg" width="144" height="214"></a>
  <a href="6-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/6-thumb.jpg" width="144" height="96"></a>
	<a href="7-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/7-thumb.jpg" width="144" height="96"></a>
</div>


javascript jquery select fotorama
person atakan aydın    schedule 22.05.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте это:

var fotorama = $('.fotorama').fotorama(); 
changeThumb = function(obj){
  var fotoramaApi = fotorama.data('fotorama');
  fotoramaApi.show($(obj).val());
} 
	<!-- jQuery, -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<!-- Fotorama -->
	<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.css" rel="stylesheet">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.js"></script>

<select onchange="changeThumb(this)">
<option value="0">Thumb 1 Need Select</option>
<option value="1">Thumb 2 Need Select</option>
<option value="2">Thumb 3 Need Select</option>
<option value="3">Thumb 4 Need Select</option>
</select>

<p>I need to change thumbnails with selectbox.</p>

<div class="fotorama"
     data-width="700"
     data-ratio="3/2"
     data-nav="thumbs"
     data-thumbheight="48">
	<a href="1-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/1-thumb.jpg" width="144" height="96"></a>
	<a href="2-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/2-thumb.jpg" width="144" height="96"></a>
  <a href="3-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/3-thumb.jpg" width="144" height="96"></a>
	<a href="4-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/4-thumb.jpg" width="144" height="96"></a>
	<a href="5-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/5-thumb.jpg" width="144" height="96"></a>
	<a href="24-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/24-thumb.jpg" width="144" height="214"></a>
  <a href="6-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/6-thumb.jpg" width="144" height="96"></a>
	<a href="7-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/7-thumb.jpg" width="144" height="96"></a>
</div>

Доступные параметры изменения изображения в Fotorama:

//Using index
fotorama.show(2);

// Next:
fotorama.show('>');

// Previous:
fotorama.show('<');

// Last:
fotorama.show('>>');

// Arbitrary id:
fotorama.show('some-id');

см. официальную документацию для получения дополнительной информации.

person Mahesh Singh Chouhan    schedule 22.05.2017
comment
Большое спасибо. Мне нужно последнее. Как добавить атрибут данных к изображениям? Потому что мне нужно изменить большие пальцы с помощью атрибутов данных. Если это возможно. - person atakan aydın; 22.05.2017
comment
Если мы используем какой-либо плагин, мы должны использовать их доступные параметры methods или Api. Fotorama есть только возможность изменить большой палец, используя индекс изображения - person Mahesh Singh Chouhan; 22.05.2017
comment
Еще раз спасибо. Я принимаю ваш ответ. Следующий шаг, мне нужно выяснить, как добавить атрибут данных к изображениям для изменения эскизов. - person atakan aydın; 22.05.2017
comment
@atakanaydın добро пожаловать, обновил мой ответ, указав доступную опцию плагина для изменения изображения большого пальца. Надеюсь, поможет! Спасибо - person Mahesh Singh Chouhan; 22.05.2017

arrow_upward
0
arrow_downward

Я нашел это во время поиска решения Magento 2.

Может быть полезно для некоторых:

jQuery("#product-options-wrapper .super-attribute-select").click(function() {
    jQuery('.fotorama').on('fotorama:ready', function (e, fotorama) {
        fotorama.show(0);
    }); 
});
person Conor    schedule 13.10.2020