jQuery - простая галерея изображений с предыдущей / следующей кнопкой

Question

jQuery - простая галерея изображений с предыдущей / следующей кнопкой

0

Я нашел простое "галерею" jQuery, которое я приспособил к моим потребностям.

Ive получил <div id="gallery"> в котором я определяю несколько <img class="gallery"> s.

И у меня есть <div id="gallery-nav"> с: <span class="prev"> & <span class="next"> которых есть <p> с текстом ("Предыдущий"/"Следующий", ) внутри.

Сценарий jQuery не должен делать больше, чем показывать первое из указанных изображений (так: "скрыть" остальные), а при щелчке "Предыдущий"/"Следующий" символ показывает предыдущее/следующее изображение.

Первый вопрос: возможно, кто-то из вас знает намного лучшее/более легкое/быстрое решение этого подхода.

Второй вопрос: Также я буду рад услышать что-то о keyboard- и touchscreen-/салфетке.

Вот мой код:

$(document).ready(function () {
  "use strict";
  $(".gallery").first().addClass("active");
  $(".gallery").hide();
  $(".active").show();

  $(".next").click(function () {
    $(".active").removeClass("active").addClass("oldActive");

    if ($(".oldActive").is(":last-child")) {
      $(".gallery").first().addClass("active");
    } else {
      $(".oldActive").next().addClass("active");
    }

    $(".oldActive").removeClass("oldActive");
    $(".gallery").fadeOut();
    $(".active").fadeIn();
  });

  $(".prev").click(function () {
    $(".active").removeClass("active").addClass("oldActive");

    if ($(".oldActive").is(":first-child")) {
      $(".gallery").last().addClass("active");
    } else {
      $(".oldActive").prev().addClass("active");
    }

    $(".oldActive").removeClass("oldActive");
    $(".gallery").fadeOut();
    $(".active").fadeIn();
  });
});

Paul L. 31 март 2014, в 15:42

Источник

0

Поскольку вы запрашиваете предложения / комментарии к рабочему коду, это, вероятно, больше подходит для Code Review Stack Exchange.
Paul Roub 31 март 2014, в 13:19
0

Спасибо, я думал об этом, но поскольку он еще не готов (клавиатура и сенсорный экран), я подумал, что должен спросить об этом здесь.
user3478235 31 март 2014, в 13:27
0

Также кажется, что $(".gallery").fadeOut(); $(".active").fadeIn(); не работает правильно. Он исчезает, но внезапно появляется другое изображение без эффекта исчезновения. Есть идеи? Есть ли альтернативы постепенному исчезновению?
user3478235 31 март 2014, в 14:13

Показать ещё 1 комментарий

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Поскольку вы запрашиваете предложения / комментарии к рабочему коду, это, вероятно, больше подходит для Code Review Stack Exchange.
Спасибо, я думал об этом, но поскольку он еще не готов (клавиатура и сенсорный экран), я подумал, что должен спросить об этом здесь.
Также кажется, что $(".gallery").fadeOut(); $(".active").fadeIn(); не работает правильно. Он исчезает, но внезапно появляется другое изображение без эффекта исчезновения. Есть идеи? Есть ли альтернативы постепенному исчезновению?

Paul L. · Answer 1 · 2014-03-31T11-04-00.000Z

Это простейшая картинная галерея, которую я когда-либо писала, это то, что вам нужно?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="/jquery-latest.min.js"></script>
    </head>
    <body>
        <table>
            <tr id="galerie">
                <td id="1" class="1"><img src="img/1.png" /></td>
                <td id="2" class="2" style="display:none;"><img src="img/2.png" /></td>
                <td id="3" class="3" style="display:none;"><img src="img/3.png" /></td>
            </tr>

            <tr>
                <td><a href="#" onclick="browseThrough(1)">picture 1</a></td>
                <td><a href="#" onclick="browseThrough(2)">picture 2</a></td>
                <td><a href="#" onclick="browseThrough(3)">picture 3</a></td>
            </tr>
        </table>

        <script type="text/javascript">
            function browseThrough(pictureId) {
                $("#galerie td").hide();
                $("td#"+pictureId).show()

            }
        </script>
    </body>
</html>

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