Hình thu nhỏ của thanh trượt jssor

Question

Tôi có một trang web có thanh trượt Jssor với một hàng ngang hình thu nhỏ bên dưới nó (sử dụng hình thu nhỏ của thanh trượt jssor navigator 07). Theo như tôi có thể nói CSS định vị bên trái của mỗi hình thu nhỏ div trong hình thu nhỏ được chèn động bởi 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); 
} 

Tôi đã sửa đổi kích thước của hình thu nhỏ sử dụng CSS của riêng tôi nhưng vị trí vẫn giữ nguyên vì mỗi div đang được tạo động mà không có một cla CSS riêng lẻ ss hoặc ID để tôi tham khảo. Vì vậy, nếu tôi ghi đè lên vị trí CSS trái nó sẽ làm cho tất cả các hình thu nhỏ divs và họ chỉ xếp chồng lên nhau.

Tôi muốn tìm hiểu những gì tôi cần chỉnh sửa (trong javascript hoặc CSS) để thay đổi số lượng pixel hoặc phần trăm vị trí bên trái mỗi hình thu nhỏ div đang được gán để hình thu nhỏ có kích thước mới vừa với thanh trượt của tôi.

Answer 1

Tôi đánh giá cao những nỗ lực để giúp nhưng $ SpacingX và $ SpacingY không giúp đỡ trong trường hợp của tôi. Có một phần của tệp .ascx có chiều rộng cố định. Khi tôi chỉnh sửa, tôi có thể xem tất cả hình thu nhỏ và định vị chúng cho phù hợp:

<!-- 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

Hình thu nhỏ sẽ được tạo tự động và tất cả hình thu nhỏ sẽ được đặt ở giữa hộp chứa hình thu nhỏ.

Nhưng thực tế, nó hoàn toàn có thể tùy chỉnh.

Trước tiên, bạn có thể điều chỉnh bố cục (kích thước/vị trí) của vùng chứa hình thu nhỏ.

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

Và bạn cũng có thể chèn vùng chứa điều hướng thu nhỏ trong trình bao của riêng bạn hoàn toàn có thể tùy chỉnh.

<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 
    ... 
} 

tham khảo: http://www.jssor.com/development/reference-options.html#thumbnailNavigatorOptions