Кнопки назад и вперед на модальной галерее изображений (для прокрутки)?

У меня есть галерея изображений, которая использует CSS и Javascript, чтобы открыть изображение в модальном над галереей на основе учебника по w3schools.com. У меня изначально были проблемы с указанием на внешнее изображение, но кто-то здесь смог показать мне, как это исправить. Теперь я хотел бы сделать кнопки вперед и назад, чтобы пользователь мог перемещаться по галерее, не закрывая модальный каждый раз. Мне удалось получить кнопки со стрелками, чтобы появиться в модуле (и размер и перемещение и появляются), как я хотел бы.К сожалению, мне не удалось получить кнопки для изменения изображения и текста в середине. Лучшее, что я мог сделать, это заставить его прекратить сбой модального и, по крайней мере, остаться на том же изображении и тексте при нажатии. Вот мой код до сих пор.

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left">
    </div>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
      <div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;">
    </div>
    </div>

<script>
var modal = document.getElementById('myModal');

var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
    modal.style.display = "none";
}

var backButton = document.getElementById('bckBtn');
var forwardButton = document.getElementById('fwdBtn');
var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
   images[i].onclick = function(){
       modal.style.display = "block";
       var src = this.src;
       var filename = src.substring(src.lastIndexOf('/')+1);
       var filepath = src.substring(0, src.lastIndexOf('/')+1);
       modalImg.src = filepath + 'large-' + filename;
       modalImg.alt = this.alt;
       captionText.innerHTML = this.nextElementSibling.innerHTML;
    backButton.onclick = function() {
        var filename = src.substring(src.lastIndexOf('/')+1);
        var filepath = src.substring(0, src.lastIndexOf('/')+1);
        modalImg.src = filepath + 'large-' + filename;
        modalImg.alt = this.alt;
        captionText.innerHTML = nextElementSibling.innerHTML;
        }
    forwardButton.onclick = function() {
        var filename = src.substring(src.lastIndexOf('/')+1);
        var filepath = src.substring(0, src.lastIndexOf('/')+1);
        modalImg.src = filepath + 'large-' + filename;
        modalImg.alt = this.alt;
        captionText.innerHTML = nextElementSibling.innerHTML;
        }
   }
}

modalImg.onclick = function() {
    modal.style.display = "none";
}

</script>

Кажется, что длинный и сложный метод для создания того, что я хотел бы, но, я новичок в Javascript (только начал сегодня). Любые мысли будут оценены.

1 ответ

  1. Ваш вопрос больше похож на «есть ли здесь кто-нибудь достаточно крутой, чтобы кодировать что-то для меня?- не так ли?

    Ну, я принял это как забавное упражнение, чтобы закончить, так как репа уже внес большой вклад в ваш предыдущий вопрос. И я подумал, что было бы грустно не поощрять кого-то в первый день в Javascript.
    Но эй! Я не уверен, что у вас будет столько шансов в будущем!
    😉

    Теперь в основном, что этот код делает, чтобы назначить функцию onclick для всех ваших эскизов для отображения соответствующего большего изображения в вашем модальном.
    Он также «открывает» ваш модальный на первом щелчке миниатюры.
    Это часть репы сделал.
    Обратите внимание, что эти миниатюры теперь должны иметь класс «GalleryImg».
    Я добавил Это к версии Turnip, чтобы убедиться, что не включать ваши назад и вперед кнопки в петле, потому что они также являются изображениями.

    Для кнопок назад и вперед я добавил скрытый вход, который я использую в качестве слота памяти, содержащего фактическое изображение, отображаемое в модальном режиме.
    Обратите внимание, что все миниатюры должны иметь идентификатор «zero based» : первый идентификатор миниатюры-img-0.
    Начиная с этой информации, кнопки назад и вперед могут вычитать идентификационный номер изображения, которое вы хотите отобразить, в зависимости от того, какую кнопку Вы нажмете.

    Эй… Я также предвидел ваш следующий вопрос, который наверняка был бы перезапустить с первого изображения, когда последний был достигнут, и наоборот.
    Попробуйте найти, какие линии делают трюк!

    Вот код:

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">×</span>
      <div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left"></div>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
      <div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;"></div>
      <input type="hidden" id="mem">
    </div>
    
    <img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div>
    <img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div>
    <img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div>
    <img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div>
    <!-- and so on... -->
    
    <script>
    var modal = document.getElementById('myModal');
    
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() { 
        modal.style.display = "none";
    }
    
    var backButton = document.getElementById('bckBtn');
    var forwardButton = document.getElementById('fwdBtn');
    var images = document.getElementsByClassName('GalleryImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    var i;
    for (i = 0; i < images.length; i++) {
       images[i].onclick = function(){
           modal.style.display = "block";
           var src = this.src;
           var filename = src.substring(src.lastIndexOf('/')+1);
           var filepath = src.substring(0, src.lastIndexOf('/')+1);
           modalImg.src = filepath + 'large-' + filename;
           modalImg.alt = this.alt;
           captionText.innerHTML = this.nextElementSibling.innerHTML;
           document.getElementById("mem").value=this.id;
       }
    }
    
    backButton.onclick = function(){
        ImageId = document.getElementById("mem").value.split("-");
        PreviousImage = parseInt(ImageId[1])-1;
        if(PreviousImage<0){PreviousImage=images.length-1;}
        images[PreviousImage].click();
    }
    
    forwardButton.onclick = function(){
        ImageId = document.getElementById("mem").value.split("-");
        NextImage = parseInt(ImageId[1])+1;
        if(NextImage>=images.length-1){NextImage=0;}
        images[NextImage].click();
    }
    </script>
    

    EDIT (2016-05-03)

    «Реверсировать» нумерацию идентификаторов, как предложено в комментариях ниже, чтобы быть похожим на это:

    <!-- Future images to be added here-->
    <img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div>
    <img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div>
    <img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div>
    <img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div>
    

    Необходимо создать обратный массив элементов изображений… Так как идентификационные номера связаны с положением целевого изображения в массиве элементов.
    А затем вы обращаетесь к логике кнопок назад и вперед.

    Использовать этот код :

    // Create a "reversed" images array
    var imagesReversed = [];    
    var i = images.length;
    while(i--){
        imagesReversed.push(images[i]);
    }
    
    // Adds 1 from the actual id to get the target image position in the reversed array.
    backButton.onclick = function(){
        ImageId = document.getElementById("mem").value.split("-");
        PreviousImage = parseInt(ImageId[1])+1;
        if(PreviousImage>images.length-1){PreviousImage=0;}
        imagesReversed[PreviousImage].click();
    }
    
    // Substracts 1 from the actual id to get the target image position in the reversed array.
    forwardButton.onclick = function(){
        ImageId = document.getElementById("mem").value.split("-");
        NextImage = parseInt(ImageId[1])-1;
        if(NextImage<0){NextImage=images.length-1;}
        imagesReversed[NextImage].click();
    }