Question

我是新手，我想问你是否可以帮助我在我的模态中添加下一个和上一个按钮。图片不是图库形式。我是否添加div或者像这样添加一些javascript？你能建议吗？

var modal = document.getElementById('myModal');


var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    captionText.innerHTML = this.alt;
});
 

var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}


.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}



.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}


.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
.nvgt{
    position:absolute;
    top: 120px;
    height: 50px;
    width: 30px;
    opacity: 0.6;
}
.nvgt:hover{
    opacity: 0.9;
}
#prev{
    background: #000 url('./image/prev.png') no-repeat center;
    left: 0px;
}
ul {
  list-style-type: none;

  }
 ul li {
	display: inline-block;
	background:white;
  margin-bottom:10px;
}

<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li></li><img class="myImg" src="https://media.giphy.com/media/28XGOLkn9HIXK/giphy.gif" alt="Grumpy Cat Paintball" width="300" height="200">
<li><img class="myImg" src="https://g.twimg.com/blog/blog/image/Cat-party.gif" alt="DJ Cat" width="300" height="200"></li>
<li><img class="myImg" src="https://media.giphy.com/media/26FPCXdkvDbKBbgOI/giphy.gif" alt="Sorcerer Supreme" width="300" height="200"></li>
<li><img class="myImg" src="https://media.giphy.com/media/f2fVSJWddYb6g/giphy.gif" alt="Rambo" width="300" height="200"></li>
<li><img class="myImg" src="http://24.media.tumblr.com/tumblr_lg3i47epIK1qght7mo1_500.gif" alt="Laser Vision" width="300" height="200"></li>
</ul>
<div id="myModal" class="modal">
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
</div>

应该是这样的：

Answer 1

＆＃13;

var modal = document.getElementById('myModal');


var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    captionText.innerHTML = this.alt;
});

$('.change_btn').click(function(){
	var btn_click = $(this).find('a').html();
	var current_src = $('#img01').attr('src');
	$('.myImg').each(function(){
  	if($(this).attr('src') == current_src){
    	current_index = $(this).parent().index();
      if(btn_click == 'prev'){
     	var new_index =	current_index - 1;
$('#img01').attr('src',$('li:eq('+new_index+')').find('img').attr('src'));
      }
      else if(btn_click == 'Next'){
      	var new_index =	current_index + 1;
$('#img01').attr('src',$('li:eq('+new_index+')').find('img').attr('src'));
      }
      	
    }
  });
});

var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

＆＃13;

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}


.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}



.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}


.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
.nvgt{
    position:absolute;
    top: 120px;
    height: 50px;
    width: 30px;
    opacity: 0.6;
}
.nvgt:hover{
    opacity: 0.9;
}
#prev{
    background: #000 url('./image/prev.png') no-repeat center;
    left: 0px;
}
ul {
  list-style-type: none;

  }
 ul li {
	display: inline-block;
	background:white;
  margin-bottom:10px;
} 	
.change_btn {
  text-align:center;
  font-size:30px;
  float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><img class="myImg" src="https://media.giphy.com/media/28XGOLkn9HIXK/giphy.gif" alt="Grumpy Cat Paintball" width="300" height="200"></li>
<li><img class="myImg" src="https://g.twimg.com/blog/blog/image/Cat-party.gif" alt="DJ Cat" width="300" height="200"></li>
<li><img class="myImg" src="https://media.giphy.com/media/26FPCXdkvDbKBbgOI/giphy.gif" alt="Sorcerer Supreme" width="300" height="200"></li>
<li><img class="myImg" src="https://media.giphy.com/media/f2fVSJWddYb6g/giphy.gif" alt="Rambo" width="300" height="200"></li>
<li><img class="myImg" src="http://24.media.tumblr.com/tumblr_lg3i47epIK1qght7mo1_500.gif" alt="Laser Vision" width="300" height="200"></li>
</ul>
<div id="myModal" class="modal">
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <span class="change_btn"><a href="#">prev</a></span>
  <div style="width: 70%; float:left;">
  <img class="modal-content" id="img01">
  </div>
  <span class="change_btn"><a href="#">Next</a></span>
  <div id="caption"></div>
</div>

＆＃13;

请使用上一页和下一步按钮检查工作代码。我已经使用了图像存储标记的索引，并根据它在弹出窗口中更改了图像。您可以根据需要设计按钮

感谢希望它会帮助你

Answer 2

通过查找下一个/上一个图像源，您可以使用js中的.next()和.prev()函数浏览图像。

首先在modalImg中获取当前图像的source属性，然后从图像的父级找到下一个图像，即<li>，并获取图像的source属性并替换它将modalImg显示下一张/上一张图片。

$('.next').click(function() {
  var curr = $(modalImg).attr('src');
  var next = $('img[src="' + curr +'"]').parent('li').next().find('img').attr('src');
        modalImg.attr('src', next);   
});

$('.prev').click(function() {
  var curr = $('modalImg').attr('src');
  var prev = $('img[src="' + curr + '"]').parent('li').prev().find('img').attr('src');
    modalImg.attr('src', prev);
});

在你的模态中，添加下一个和上一个按钮

<div id="myModal" class="modal">
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <div class="next">Next</div>
  <div class="prev">Prev</div>
<img class="modal-content" id="img01">
  <div id="caption"></div>

</div>

您可以在此jsFiddle中查看其工作原理。

Answer 3

在这里，你有......

<!doctype html>
<html>
<head>
<title>Boostrap modal prev and next button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
      $(document).ready(function(){
        $('ul.first').bsPhotoGallery({
          "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
          "hasModal" : true,
          // "fullHeight" : false
        });
      });
    </script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
    background: #ebebeb;
}

ul {
    padding: 0 0 0 0;
    margin: 0 0 40px 0;
}

ul li {
    list-style: none;
    margin-bottom: 10px;
}

.text {
    /*font-family: 'Bree Serif';*/
    color: #666;
    font-size: 11px;
    margin-bottom: 10px;
    padding: 12px;
    background: #fff;
}


#bsPhotoGalleryModal .modal-content {
border-radius:0;
}
#bsPhotoGalleryModal .modal-dialog img {
text-align:center;
margin:0 auto;
width:100%;
}
#bsPhotoGalleryModal .modal-body {
padding:0px !important;
}
#bsPhotoGalleryModal .bsp-close {
position: absolute;
right: -14px;
top: -11px;
font-size: 30px;
color:#fff;
text-shadow: 1px 1px 18px #000;
}

#bsPhotoGalleryModal .bsp-close:hover {
cursor: pointer;
opacity:.6;
text-shadow: none;

}
.bspHasModal {
cursor: pointer;
}
.bspHasModal .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.imgWrapper {
overflow: hidden;
max-height: 99px;
}

a.bsp-controls,
a.bsp-controls:visited,
a.bsp-controls:active {
position: absolute;
top: 44%;
font-size: 26px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
a.bsp-controls.next {
right:-10px;
}
a.bsp-controls.previous {
left:-10px;
}
a.bsp-controls:hover {
opacity:.6;
text-shadow: none;
}
.bsp-text-container {
clear:both;
display:block;
padding-bottom: 5px;
}
#bsPhotoGalleryModal h6{
margin-bottom: 0;
font-weight: bold;
color: #000;
font-size: 14px;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 5px;
}
#bsPhotoGalleryModal .pText {
font-size: 11px;
margin-bottom: 0px;
padding: 0 12px 5px;
}


@media screen and (max-width: 380px){
.col-xxs-12 {
 width:100%;
}
.col-xxs-12 img {
 width:100%;
   }
}   
</style>

</head>
<body>

     <div class="container">
     <br /><br />

        <ul class="row first">

            <li><img class="myImg" src="https://media.giphy.com/media/28XGOLkn9HIXK/giphy.gif" alt="Grumpy Cat Paintball" width="300" height="200">
            <div class="text">Description</div>
            </li>

            <li>
          <img class="myImg" src="https://g.twimg.com/blog/blog/image/Cat-party.gif" alt="DJ Cat" width="300" height="200">
          <div class="text">Description</div>
      </li>
      <li>
          <img class="myImg" src="https://media.giphy.com/media/26FPCXdkvDbKBbgOI/giphy.gif" alt="Sorcerer Supreme" width="300" height="200">
          <div class="text">Description</div>
      </li>

      <li>
          <img class="myImg" src="https://media.giphy.com/media/f2fVSJWddYb6g/giphy.gif" alt="Rambo" width="300" height="200">
         <div class="text">Description</div>
      </li>


      <li>
         <img class="myImg" src="http://24.media.tumblr.com/tumblr_lg3i47epIK1qght7mo1_500.gif" alt="Laser Vision" width="300" height="200">
        <div class="text">Description</div>
      </li>

        </ul>
    </div>

</body>
</html>

<script>
(function($) {
"use strict";
$.fn.bsPhotoGallery = function(options) {

var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
var id = generateId();
var classesString = settings.classes;
var classesArray = classesString.split(" ");
var clicked = {};

function getCurrentUl() {
  return 'ul[data-bsp-ul-id="' + clicked.ulId + '"][data-bsp-ul-index="' + clicked.ulIndex + '"]';
}

function generateId() {
  //http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
  var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var ID_LENGTH = 4;
  var out = '';
  for (var i = 0; i < ID_LENGTH; i++) {
    out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
  }
  return 'bsp-' + out;
}

function createModalWrap() {

  if ($('#bsPhotoGalleryModal').length !== 0) {
    return false;
  }

  var modal = '';
  modal += '<div class="modal fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
  modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
  modal += '<div class="modal-dialog modal-lg"><div class="modal-content">';
  modal += '<div class="modal-body"></div></div></div></div>';
  $('body').append(modal);

}

function showHideControls() {
  var total = $(getCurrentUl() + ' li[data-bsp-li-index]').length;

  if (total === clicked.nextImg) {
    $('a.next').hide();
  } else {
    $('a.next').show()
  }
  if (clicked.prevImg === -1) {
    $('a.previous').hide();
  } else {
    $('a.previous').show()
  }
}

function showModal() {

  var src = $(this).find('img').attr('src');
  var largeImg = $(this).find('img').attr('data-bsp-large-src');
  if (typeof largeImg === 'string') {
    src = largeImg;
  }
  var index = $(this).attr('data-bsp-li-index');
  var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
  var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
  var theImg = $(this).find('img');
  var pText = $(this).find('.text').html();
  var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
  var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;

  clicked.img = src;
  clicked.prevImg = parseInt(index) - parseInt(1);
  clicked.nextImg = parseInt(index) + parseInt(1);
  clicked.ulIndex = ulIndex;
  clicked.ulId = ulId;


  $('#bsPhotoGalleryModal').modal();

  var html = '';
  var img = '<img src="' + clicked.img + '" class="img-responsive"/>';

  html += img;
  html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
  html += '<div class="bsp-text-container">';

  if (alt !== null) {
    html += '<h6>' + alt + '</h6>'
  }
  if (typeof pText !== 'undefined') {
    html += '<p class="pText">' + pText + '</p>'
  }
  html += '</div>';
  html += '<a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>';
  html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>';

  $('#bsPhotoGalleryModal .modal-body').html(html);
  $('.bsp-close').on('click', closeModal);
  showHideControls();
}

function closeModal() {
  $('#bsPhotoGalleryModal').modal('hide');
}

function nextPrevHandler() {

  var ul = $(getCurrentUl());
  var index = $(this).attr('href');

  var src = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('src');
  var largeImg = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('data-bsp-large-src');
  if (typeof largeImg === 'string') {
    src = largeImg;
  }

  var pText = ul.find('li[data-bsp-li-index="' + index + '"] .text').html();
  var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
  var theImg = ul.find('li[data-bsp-li-index="' + index + '"] img');
  var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;

  $('#bsPhotoGalleryModal .modal-body img').attr('src', src);
  var txt = '';
  if (alt !== null) {
    txt += '<h6>' + alt + '</h6>'
  }
  if (typeof pText !== 'undefined') {
    txt += '<p class="pText">' + pText + '</p>'
  }

  $('.bsp-text-container').html(txt);

  clicked.prevImg = parseInt(index) - 1;
  clicked.nextImg = parseInt(clicked.prevImg) + 2;

  if ($(this).hasClass('previous')) {
    $(this).attr('href', clicked.prevImg);
    $('a.next').attr('href', clicked.nextImg);
  } else {
    $(this).attr('href', clicked.nextImg);
    $('a.previous').attr('href', clicked.prevImg);
  }
  // console.log(clicked);
  showHideControls();
  return false;
}

function clearModalContent() {
  $('#bsPhotoGalleryModal .modal-body').html('');
  clicked = {};
}

function insertClearFix(el, x) {
  var index = (x + 1);
  $.each(classesArray, function(e) {
    switch (classesArray[e]) {
      //large
      case "col-lg-1":
        if ($(el).next('li.clearfix').length == 0) {
          $(el).after('<li class="clearfix visible-lg-block"></li>');
        }
        break;
      case "col-lg-2":
        if (index % 6 === 0) {
          $(el).after('<li class="clearfix visible-lg-block"></li>');
        }
        break;
      case "col-lg-3":
        if (index % 4 === 0) {
          $(el).after('<li class="clearfix visible-lg-block"></li>');
        }
        break;
      case "col-lg-4":
        if (index % 3 === 0) {
          $(el).after('<li class="clearfix visible-lg-block"></li>');
        }
        break;
      case "col-lg-5":
      case "col-lg-6":
        if (index % 2 === 0) {
          $(el).after('<li class="clearfix visible-lg-block"></li>');
        }
        break;
        //medium
      case "col-md-1":
        if ($(el).next('li.clearfix').length == 0) {
          $(el).after('<li class="clearfix visible-md-block"></li>');
        }
        break;
      case "col-md-2":
        if (index % 6 === 0) {
          $(el).after('<li class="clearfix visible-md-block"></li>');
        }
        break;
      case "col-md-3":
        if (index % 4 === 0) {
          $(el).after('<li class="clearfix visible-md-block"></li>');
        }
        break;
      case "col-md-4":
        if (index % 3 === 0) {
          $(el).after('<li class="clearfix visible-md-block"></li>');
        }
        break;
      case "col-md-5":
      case "col-md-6":
        if (index % 2 === 0) {
          $(el).after('<li class="clearfix visible-md-block"></li>');
        }
        break;
        //small
      case "col-sm-1":
        if ($(el).next('li.clearfix').length == 0) {
          $(el).after('<li class="clearfix visible-sm-block"></li>');
        }
        break;
      case "col-sm-2":
        if (index % 6 === 0) {
          $(el).after('<li class="clearfix visible-sm-block"></li>');
        }
        break;
      case "col-sm-3":
        if (index % 4 === 0) {
          $(el).after('<li class="clearfix visible-sm-block"></li>');
        }
        break;
      case "col-sm-4":
        if (index % 3 === 0) {
          $(el).after('<li class="clearfix visible-sm-block"></li>');
        }
        break;
      case "col-sm-5":
      case "col-sm-6":
        if (index % 2 === 0) {
          $(el).after('<li class="clearfix visible-sm-block"></li>');
        }
        break;
        //x-small
      case "col-xs-1":
        if ($(el).next('li.clearfix').length == 0) {
          $(el).after('<li class="clearfix visible-xs-block"></li>');
        }
        break;
      case "col-xs-2":
        if (index % 6 === 0) {
          $(el).after('<li class="clearfix visible-xs-block"></li>');
        }
        break;
      case "col-xs-3":
        if (index % 4 === 0) {
          $(el).after('<li class="clearfix visible-xs-block"></li>');
        }
        break;
      case "col-xs-4":
        if (index % 3 === 0) {
          $(el).after('<li class="clearfix visible-xs-block"></li>');
        }
        break;
      case "col-xs-5":
      case "col-xs-6":
        if (index % 2 === 0) {
          $(el).after('<li class="clearfix visible-xs-block"></li>');
        }
        break;
    }
  });
}


this.each(function(i) {
  //ul
  var items = $(this).find('li');
  $(this).attr('data-bsp-ul-id', id);
  $(this).attr('data-bsp-ul-index', i);

  items.each(function(x) {
    var theImg = $(this).find('img');
    insertClearFix(this, x);
    $(this).addClass(classesString);
    $(this).attr('data-bsp-li-index', x);
    theImg.addClass('img-responsive');
    if (settings.fullHeight) {
      theImg.wrap('<div class="imgWrapper"></div>')
    }
    if (settings.hasModal === true) {
      $(this).addClass('bspHasModal');
      $(this).on('click', showModal);
    }
  });
})

if (settings.hasModal === true) {
  //this is for the next / previous buttons
  $(document).on('click', 'a.bsp-controls[data-bsp-id="' + id + '"]', nextPrevHandler);
  $(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
  //start init methods
  createModalWrap();
}

return this;
};

/*defaults*/
$.fn.bsPhotoGallery.defaults = {
'classes': 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
'hasModal': true,
'fullHeight': true,
'iconClose': 'glyphicon glyphicon-remove-circle',
'iconLeft': 'glyphicon glyphicon-chevron-left',
'iconRight': 'glyphicon glyphicon-chevron-right'
}


}(jQuery)); 
</script>

我打开模态时添加下一个和上一个按钮

3 个答案: