在这里，你拥有它......
<!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 = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
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>
https://jsfiddle.net/grave349/juwsym8p/ –