suwak jssor pozycja miniatury

Question

Mam witrynę, która ma suwak Jssor z poziomym rzędem miniatur poniżej (za pomocą suwaka jssor thumbnail navigator skin 07). O ile mogę powiedzieć, że lewy pozycjonujący CSS każdego miniatury div w thumbnavigatorze jest dynamicznie wstawiany przez javascript.

Thumbnail Div 1 CSS

element.style { 
    width: 202px; 
    height: 102px; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
    overflow: hidden; 
    transform: perspective(2000px); 
} 

Thumbnail Div 2 CSS

element.style { 
    width: 202px; 
    height: 102px; 
    top: 0px; 
    left: 217px; 
    position: absolute; 
    overflow: hidden; 
    transform: perspective(2000px); 
} 

Thumbnail Div 3 CSS

element.style { 
    width: 202px; 
    height: 102px; 
    top: 0px; 
    left: 434px; 
    position: absolute; 
    overflow: hidden; 
    transform: perspective(2000px); 
} 

Mam zmodyfikowano rozmiar miniaturek korzystając własną CSS ale pozycjonowanie pozostaje niezmienione, ponieważ każdy element div jest generowany dynamicznie bez konkretnego wyrażenia CSS ss lub ID, do którego mogę się odwołać. Tak więc, jeśli nadpisuję lewe pozycjonowanie CSS, robi to dla wszystkich miniaturowych elementów div i po prostu układają się jeden na drugim.

Chciałbym dowiedzieć się, co muszę edytować (w javascript lub CSS), aby zmienić wielkość piksela lub procent lewostronicowego pozycjonowania, każdy miniatura div jest przypisana, więc nowe miniatury pasują do mojego suwaka.

Answer 1

Doceniam próbę pomóc, ale dolarów SpacingX i $ SpacingY nie pomogło w moim przypadku. Istnieje sekcja pliku .ascx, która ma zakodowaną szerokość. Kiedy to edytowałem, mogłem zobaczyć wszystkie miniatury i odpowiednio je ustawić:

<!-- Thumbnail Navigator Skin Begin --> 
    <div u="thumbnavigator" class="jssort07" > 
     <div style="width: 100%; height:100%;"></div> 
     <!-- Thumbnail Item Skin Begin --> 
     <!-- width:160px; +10px for padding, + 30px for margin, +2px for border|| height:80px; + 10px for padding, +2 px for border + 10px for red arrow on hover --> 
     <div u="slides" style="cursor: move;"> 
      <div u="prototype" class="p" style="POSITION: absolute; WIDTH:150px; HEIGHT:102px; TOP: 1px; LEFT: 0;"> 
       <thumbnailtemplate class="i" style="position:absolute;"></thumbnailtemplate> 
       <div class="o"> 
       </div> 
      </div> 
     </div> 
     <!-- Thumbnail Item Skin End --> 

    </div> 
    <!-- ThumbnailNavigator Skin End --> 

Answer 2

Miniatury zostaną wygenerowane automatycznie, a wszystkie miniatury zostaną umieszczone pośrodku kontenera nawigatora miniaturek.

Ale w rzeczywistości jest w pełni konfigurowalny.

Najpierw można dostosować układ (rozmiar/położenie) kontenera nawigatora miniatur.

<!-- thumbnail navigator container --> 
<div u="thumbnavigator" class="jssort07" style="left: 0px; bottom: 0px; width: 800px; height: 100px;"> 
    ... 
</div> 
<!--#endregion Thumbnail Navigator Skin End --> 

A także możesz wstawić kontener nawigatora miniatur w swoim własnym opakowaniu, który można w pełni dostosować.

<div style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;> 
    <div u="thumbnailnavigator" ...> 
     ... 
    </div> 
</div> 

Edit:

$ThumbnailNavigatorOptions: { 
    ..., 
    $DisplayPieces: 5, //indicates how many columns to display 
    $Lanes: 1, //indicates how many rows to display 
    $SpacingX: 10, //indicates horizontal spacing 
    $SpacingY: 10, //indicates vertical spacing 
    ... 
} 

referencyjny: http://www.jssor.com/development/reference-options.html#thumbnailNavigatorOptions