как изменить ширину навигатора эскизов jssor

Я пытаюсь использовать библиотеку переходов jssor, чтобы мои изображения отображались с помощью навигаторов миниатюр.

Я видел их демонстрации и пытался изменить некоторые настройки, чтобы изменить ширину панели навигации, когда она находится в вертикальном режиме, но я не могу настроить таргетинг на пустое пространство внутри нее.

Все, что я сделал, изменило размер изображения самой миниатюры, даже когда я получаю элемент с помощью инструментов разработчика Chrome, я не могу изменить ширину элемента.

Я приложил изображение, чтобы показать, что я имею в виду о пустом пространстве.

http://imgur.com/TWsLexS

Каков правильный способ управления шириной этой панели навигации, чтобы я мог избавиться от черных пробелов вокруг миниатюр?


html jquery jssor
person Hanho    schedule 03.06.2014    source источник
comment
Какую миниатюру скина вы используете?   -  person jssor    schedule 03.06.2014
comment
я использую шаблон, найденный в пакете ползунков, в разделе demos-jquery, файл image-gallery-with-vertical-thumbnails.source. Я также пытался изменить этот пример, но я не могу понять, что на самом деле меняет ширину раздела навигатора.   -  person Hanho    schedule 04.06.2014

Ответы (3)


arrow_upward
0
arrow_downward

Я понял, что вы имеете в виду.

Обратите внимание, что ползунок имеет «внешний контейнер», «контейнер слайдов» и «контейнер навигатора эскизов». «контейнер слайдов» и «контейнер навигатора эскизов» находятся во «внешнем контейнере».

У вас есть что-то правильное. Затем вам просто нужно настроить размер «внешнего контейнера» и отрегулировать положение «контейнера слайдов».

person jssor    schedule 04.06.2014
comment
ах, да, я вижу, поэтому, уменьшив ширину внешнего контейнера, уменьшив левую позицию контейнера слайдов и ширину контейнера миниатюрного навигатора, я, наконец, уменьшил черное пространство. Спасибо за вашу помощь - person Hanho; 04.06.2014

arrow_upward
0
arrow_downward

Пожалуйста, измените размер элемента миниатюры навигатора,

<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 240px; height: 480px; left:0px; bottom: 0px;">
person jssor    schedule 03.06.2014
comment
спасибо за ответ, дело в том, что я попытался изменить ширину навигатора эскизов, и вот что я получил, imgur.com /IIejnLZ я не могу изменить размер черных частей вокруг значков миниатюр, чтобы сделать их уже. Это когда я ничего не меняю, кроме свойства ширины на 100 пикселей с 240 пикселей. Есть ли что-то еще, что я должен изменить? - person Hanho; 04.06.2014

arrow_upward
0
arrow_downward

Есть несколько вариантов выполнения этой работы, например $SpacingX, $SpacingY,

            $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $Lanes: 2,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1
                $SpacingX: 14,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                $SpacingY: 12,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                $Cols: 6,                             //[Optional] Number of pieces to display, default value is 1
                $Align: 156,                          //[Optional] The offset position to park thumbnail
                $Orientation: 2                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
            }
person jssor    schedule 04.06.2014
comment
я тоже пробовал все это, я сделал lanes = 1, удалил интервал x и попытался установить его на 0, попытался изменить положение парковки на +500 и -500, установить ориентацию на 1 (что делает навигатор горизонтальным, а навигатор по прежнему в левой части экрана) и игрался со всеми стилями на thumbnavigator но ширина все равно не меняется,. После того, как я возился со всеми элементами управления и стилями, я все еще не могу понять, как изменить пространство, где должен быть навигатор. Я сделал ссылку, чтобы показать, что он делает в настоящее время и чего я хочу достичь: imgur.com/a/wnmkM# 0 - person Hanho; 04.06.2014