Несколько слайдов панели jQuery

Question

Я новичок в jQuery и следую инструкциям здесь для слайда панели.http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/all-comments/#comments

Пока все хорошо.

Хотя мне нужно несколько слайдов панели.Страница будет очень похожа на эту woothemes.com/themes/

При нажатии на изображение панель шириной 100% развернется под строкой, чтобы получить дополнительную информацию.

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

Надеюсь, что это имеет смысл.

Спасибо за вашу помощь.

J.

Answer 1

Вместо классов вы можете использовать относительные положения элементов в DOM.

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

Вы можете поместить все изображения и содержимое в один родительский элемент div.Таким образом, вам не нужно использовать какие-либо классы внутри этого родительского div.

Вот простая система слайдеров, которая хорошо работает, если Javascript выключен.

Давайте создадим простой пример.

HTML:

<div id="sliderContent">

    <div>
        <img src="image1.jpg" />
        <div>Content about image1 here.</div>
    </div>

    <div>
        <img src="image2.jpg" />
        <div>Other content about image2 here.
             <p>You can put as much stuff in these as you want</p>
        </div>
    </div>

    <div>
        <img src="image3.jpg" />
        <div>Sample content about image3 her here.</div>
    </div>

</div>

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

Приятно иметь вложенные img вparent div s, поскольку img s не являются элементами уровня блока, поэтому разрывы строк будут лучше с родительским div, содержащим каждое изображение и содержимое div.

div s.занять 100% от заданной ширины.Вы можете добавить дочерние элементы в div содержимого, вы можете их стилизовать, вы можете поместить hr s внутри них и т. Д.

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

Сценарий

$(function() {

    $("#sliderContent img").next().hide();

    $("#sliderContent img").click(function() {
        $(this).next().slideToggle();

    });
});​

jsFiddle пример

И это все.Конечно, вы можете украсить вещи добавленной графикой и цветами, но центральная концепция очень проста.

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

$(function() {

     // Hide and add a close button to each content div slider
   $("#sliderContent img").next().hide().append('<input ' + 
                                                'type="button" value="close"/>');

    $("#sliderContent img").click(function() {
        $(this).next().slideToggle();
    });

      // use .parent() to make the close buttons work
    $("input").click(function() {
        $(this).parent().slideUp();
    });
});​

Пример jsFiddle