Geek Answers Handbook

Jssor slider sketch position

I have a website that has a Jssor slider with a horizontal line of thumbnails below it (using jssor slider thumbnail navigator skin 07). As far as I can tell, the left CSS position of each div sketch in thumbnavigator is dynamically inserted by 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); }

I resized the thumbnails using my own CSS, but the positioning remains the same because each div is dynamically generated without a separate CSS class or identifier for the link. Thus, if I rewrite the position of the left CSS position, it does this for all sections of the thumbnails, and they simply stack over each other.

I would like to know what I need to change (in javascript or CSS) in order to change the number of pixels or the percentage of left positioning, each miniature div is assigned so that the new size thumbnails match my slider.

+5
source share
2 answers

I appreciate trying to help, but $ SpacingX and $ SpacingY did not help in my case. There is a hard-coded .ascx file section. When I edited this, I was able to see all the thumbnails and place them accordingly:

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

Thumbnails will be generated automatically, and all thumbnails will be placed in the center of the thumbnail navigator container.

But in fact, it is fully customizable.

First, you can customize the layout (size / position) of the thumbnail navigator container.

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

And also you can insert the container of the thumbnail navigator into your own shell, which is fully customizable.

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

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

0
source

More articles:


All Articles