fotorama cliquez sur les vignettes de déclenchement de la sélection

Question

J'ai l'habitude de fotorama plugin dans mon site web. Mon problème est lorsque je sélectionne un autre produit via selectbox, les vignettes ne change pas.

Je dois ajouter data-serialid = "xxx" sur les vignettes.

Toutes les suggestions sont vraiment bonnes.

Merci beaucoup.

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

 
\t <!-- Fotorama --> 
 
\t <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.css" rel="stylesheet"> 
 
\t <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"> 
 
\t <a href="1-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/1-thumb.jpg" width="144" height="96"></a> 
 
\t <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> 
 
\t <a href="4-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/4-thumb.jpg" width="144" height="96"></a> 
 
\t <a href="5-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/5-thumb.jpg" width="144" height="96"></a> 
 
\t <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> 
 
\t <a href="7-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/7-thumb.jpg" width="144" height="96"></a> 
 
</div>

Answer 1

Essayez ceci:

var fotorama = $('.fotorama').fotorama(); 
 
changeThumb = function(obj){ 
 
    var fotoramaApi = fotorama.data('fotorama'); 
 
    fotoramaApi.show($(obj).val()); 
 
}

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

 
\t <!-- Fotorama --> 
 
\t <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.css" rel="stylesheet"> 
 
\t <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"> 
 
\t <a href="1-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/1-thumb.jpg" width="144" height="96"></a> 
 
\t <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> 
 
\t <a href="4-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/4-thumb.jpg" width="144" height="96"></a> 
 
\t <a href="5-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/5-thumb.jpg" width="144" height="96"></a> 
 
\t <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> 
 
\t <a href="7-lo.jpg"><img src="http://s.fotorama.io/okonechnikov/7-thumb.jpg" width="144" height="96"></a> 
 
</div>

Options d'image disponible de changement dans Fotorama sont:

//Using index 
fotorama.show(2); 

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

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

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

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

Voir Official Documentation pour plus d'informations.