Плагин цикла jQuery: получение пейджера для перехода в div со слайд-шоу со смешанным содержимым - PullRequest
Новая
       21

Плагин цикла jQuery: получение пейджера для перехода в div со слайд-шоу со смешанным содержимым

0 голосов
/ 09 марта 2011

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

$ (document) .ready (function () {$ ('# slider'). Cycle ({fx: 'scrollLeft', таймаут: 10000, скорость: 500, пейджер: '#pager'});});ИЗОБРАЖЕНИЕ ТЕКСТА ТЕКСТА ТЕКСТА Попробуй сейчас! Положения и условия Применить 
        <!-- Content Display 1 -->
        <div id="cs_1" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top: 20px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;">b</div>
        </div>
        <!-- Content Display 1 -->

        <!-- Content Display 2 -->
        <div id="cs_2" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top 26px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
        </div>
        <!-- Content Display 2 -->

        <!-- Content Display 3 -->
        <div id="cs_3" class="show_content clearb">
            <div class="">IMAGE</div>
            <div class="helv reg all" style="width: 500px; font-size: 20px; padding: 0px 0px 10px 0px; color: #ff3e34;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 25px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="helv reg all" style="width: 500px; font-size: 18px; padding: 0px 0px 15px 0px;">TEXT</div>
            <div class="button gradient3" style="height: 57px; width: 180px; margin-top 18px;">
                <a href ="signup.php"><div id="tryitnow">Try It Now!</div><div id="terms">Terms & Conditions Apply</div></a>
            </div>
            <div id="pager" style="z-index: 200; width: 200px; height: 1px; position: relative; top: -70px; right: 0px; bottom: 0px; left: 310px;"></div>
        </div>
        <!-- Content Display 3 -->

Пейджер хорошо отображается на первом слайде и отображается точно так, как я хочу, он не появляется на следующих трех переходах, хотяконтрольные буквы, которые я вставляю в первые два пейджера.Что мне здесь не хватает?

1 Ответ

0 голосов
/ 10 марта 2011

Ну, после еще нескольких экспериментов, исправление оказалось на удивление простым, но также дало странный результат.Все, что я сделал, это поставил второй параметр для вызова пейджера:

$ (document) .ready (function () {$ ('# slider'). Cycle ({fx: 'scrollLeft', timeout: 10000, speed:500, пейджер: '#pager, # pager2'});});

Я переименовал пейджер на моем втором слайде в pager2 и вуаля!Однако что-то странное произошло, слайдер появился на двух последующих панелях, которые я НЕ переименовал!Когда в пейджере был только один параметр, они не появлялись, несмотря на то, что все они были названы #pager.Как только я добавил второй parm # pager2, все элементы управления с именем #pager, которые раньше не появлялись, теперь, похоже, появляются.Удаление второго параметра возвращает его обратно в состояние, в котором появился только первый набор элементов управления.Странно, но работает, поэтому я не жалуюсь.

...