Как настроить отображение превью в fotorama?

Question

[Happier]

Использую fotorama, при перелистывании все картинки отображаются корректно, но в превью их нет

Comments

[display: block]

HTML покажите.

[Happier]

display: block,

<div class="fotorama fotorama1505908002107" data-width="700" data-ratio="700/467" data-max-width="100%" data-nav="thumbs" data-loop="true">
   <div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--slide fotorama__wrap--toggle-arrows fotorama__wrap--no-controls" style="width: 700px; min-width: 0px; max-width: 100%;">
      <div class="fotorama__stage" style="width: 500px; height: 334px;">
         <div class="fotorama__stage__shaft fotorama__grab" style="transition-duration: 0ms; transform: translate3d(0.001px, 0px, 0px); width: 500px; margin-left: 0px;">
            <div class="fotorama__stage__frame fotorama__loaded fotorama__active" style="left: 0px;">
               <div class="fotorama__html">
                  <p><img src="/assets/galleries/320/original/konverti_2.jpg" alt=""></p>
               </div>
            </div>
            <div class="fotorama__stage__frame fotorama__loaded" style="left: -502px;">
               <div class="fotorama__html">
                  <p><img src="/assets/galleries/320/original/konverti_13.jpg" alt=""></p>
               </div>
            </div>
            <div class="fotorama__stage__frame fotorama__loaded" style="left: 502px;">
               <div class="fotorama__html">
                  <p><img src="/assets/galleries/320/original/konverti_3.jpg" alt=""></p>
               </div>
            </div>
         </div>
         <div class="fotorama__arr fotorama__arr--prev"></div>
         <div class="fotorama__arr fotorama__arr--next"></div>
         <div class="fotorama__video-close"></div>
      </div>
      <div class="fotorama__nav-wrap">
         <div class="fotorama__nav fotorama__nav--thumbs fotorama__shadows--right" style="width: 500px;">
            <div class="fotorama__nav__shaft fotorama__grab" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
               <div class="fotorama__thumb-border" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); width: 60px;"></div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb fotorama__active" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
               <div class="fotorama__nav__frame fotorama__nav__frame--thumb" style="width: 64px;">
                  <div class="fotorama__thumb"></div>
               </div>
            </div>
         </div>
         <div class="fotorama__arr fotorama__arr--prev" style="margin-left: -30px;"></div>
         <div class="fotorama__arr fotorama__arr--next" style="margin-right: -30px;"></div>
      </div>
   </div>
</div>

[display: block]

Happier, сорс нужен (ctrl+u), а не то, что из devtool скопировали.

[Happier]

display: block,

<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%" data-nav="thumbs" data-loop="true">
   <p><img src="/assets/galleries/320/original/konverti_2.jpg" alt="/assets/galleries/320/original/konverti_2.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_3.jpg" alt="/assets/galleries/320/original/konverti_3.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_4.jpg" alt="/assets/galleries/320/original/konverti_4.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_5.jpg" alt="/assets/galleries/320/original/konverti_5.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_6.jpg" alt="/assets/galleries/320/original/konverti_6.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_7.jpg" alt="/assets/galleries/320/original/konverti_7.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_8.jpg" alt="/assets/galleries/320/original/konverti_8.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_9.jpg" alt="/assets/galleries/320/original/konverti_9.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_10.jpg" alt="/assets/galleries/320/original/konverti_10.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_11.jpg" alt="/assets/galleries/320/original/konverti_11.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_12.jpg" alt="/assets/galleries/320/original/konverti_12.jpg" /></p>
   <p><img src="/assets/galleries/320/original/konverti_13.jpg" alt="/assets/galleries/320/original/konverti_13.jpg" /></p>
</div>

[display: block]

Happier, fotorama.io/customize/thumbnails
Не пробовали делать разметку без оборачивания в параграфы или ещё лучше оборачивать в ссылки?

[Happier]

Спасибо большое, сработало!

Answer 1

[display: block]

fotorama.io/customize/thumbnails

<div class="fotorama"
     data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>
</div>