Слайд-ссылка jquery полной ширины не работает - PullRequest
Новая
       24

Слайд-ссылка jquery полной ширины не работает

0 голосов
/ 07 июля 2011

Я настроил плагин jQuery для слайдшоу Supersized (Google, так как я могу опубликовать только 2 ссылки, которые нужны ниже :-))

Мне не нужно, чтобы он был полноэкраннымустановите мою высоту 475 пикселей, и мне также не нужны элементы управления ползунком (хотя навигация с клавиатуры включена).

У меня ползунок работает до степени - есть ссылка напоследний слайд и его можно нажать.Элементы имеют фиксированное положение.

У меня здесь тот же ползунок - CSS немного отличается (не использует фиксированное позиционирование), но ссылка просто не хочет заявить о себе, даже если Firebug показывает, что он там.

Это было озадачено в течение последнего дня, и я буду вечно благодарен за любые решения.

Я удивлен, что нет других ползунков полной ширины, которые делают то, что я ищу.

Заранее спасибо, Стивен

Ответы [ 2 ]

2 голосов
/ 07 июля 2011

Ваша ошибка лежит в следующих строках: 

#supersized a.activeslide {
    z-index: -10;
}

#supersized a {
    background: none repeat scroll 0 0 #111111;
    display: block;
    height: 475px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -30;
}

#supersized {
    height: 475px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: -999;
}

#supersized a.prevslide {
    z-index: -20;
}

Z-индекс отрицателен, помещая ваши суперразмерные вещи ниже прочее содержимое . Это все равно что поместить прозрачный элемент div над ссылкой: ссылка становится неактивной.

Простой способ подтверждения: щелкните правой кнопкой мыши -> осмотреть элемент поместите вас в #sliderContainer, а не в img.

Исправлено:

вместо -999, -30, -20 и -10 для z-index, используйте что-то вроде 10,20,30,40 (в том же порядке)

Редактировать :
Причина, по которой используется отрицательный z-индекс, заключается в том, что этот плагин создан для создания фона на всю страницу. (т.е. разместите ваши изображения под всем вашим контентом).

Ваш слайдер также довольно разочаровывает: вам нужно подождать, пока загрузится нужное изображение, чтобы нажать на ссылку (4 изображения скользят, 1 со ссылкой). Я предлагаю вам либо поставить ссылку на все изображения, либо добавить способ навигации между изображениями.

0 голосов
/ 09 апреля 2013

Существует также возможность изменить значения z-index в index.html. 

<!--Thumbnail Navigation-->
        <div id="prevthumb" style="z-index: 20;"></div>
        <div id="nextthumb" style="z-index: 20;"></div>

        <!--Arrow Navigation-->
        <a id="prevslide" class="load-item" style="z-index: 20;"></a> <a id="nextslide"
            class="load-item" style="z-index: 20;"></a>


        <!--        <div id="thumb-tray" class="load-item"> -->
        <!--            <div id="thumb-back"></div> -->
        <!--            <div id="thumb-forward"></div> -->
        <!--        </div> -->

        <!--Time Bar-->
        <!--        <div id="progress-back" class="load-item"> -->
        <!--            <div id="progress-bar"></div> -->
        <!--        </div> -->

        <!--Control Bar-->
        <!--        <div id="controls-wrapper" class="load-item">  -->
        <!--            <div id="controls">  -->

        <!--                <a id="play-button"><img id="pauseplay" src="jquery/img/pause.png" /> </a>  -->

        <!--Slide counter-->
        <!--                <div id="slidecounter">  -->
        <!--                    <span class="slidenumber"></span> / <span class="totalslides"></span>  -->
        <!--                </div> -->

        <!--Slide captions displayed here-->
        <!--            <div id="slidecaption"></div> -->

                <div id="slidecaption" style="z-index: 20;"></div>


        <!--Thumb Tray button-->
        <!--                <a id="tray-button"><img id="tray-arrow" -->
        <!--                    src="jquery/img/button-tray-up.png" /> </a> -->

        <!--Navigation-->
        <!--                <ul id="slide-list"></ul> -->

        <!--            </div> -->
        <!--        </div> -->

Когда вы редактируете его с этой возможностью, ссылка на изображение работает!Так что вам не нужно ничего менять в файле CSS.

...