如何在引导程序中添加上一个和下一个链接以更改引导程序模式中的图像

【问题标题】：How to add prev and next link in bootstrap to change image in bootstrap modal如何在引导程序中添加上一个和下一个链接以更改引导程序模式中的图像
【发布时间】：2017-05-20 19:27:23
【问题描述】：

大家好，我正在尝试在引导模式弹出窗口中显示图像和视频，并带有上一个和下一个链接以获取下一个图像，或者我想返回查看图像。

这与下面的代码完美配合，但这里的箭头用于向前或向后移动图像。

但我不想要那个箭头而不是那个我需要上一个和下一个链接更改图像

我参考这个链接http://michaelsoriano.com/next-and-previous-buttons-bootstrap-photo-gallery/ 来添加上一个和下一个链接而不是箭头它不起作用

以同样的方式显示视频我要做的更改是什么

(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));
#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%;
  }
}
**Html page**


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Bootstrap Photo Gallery Demo</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="jquery.bsPhotoGallery.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="jquery.bsPhotoGallery.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;
  }
</style>

<body>
  <div class="container">
    <div class="row" style="text-align: center; border-bottom: 1px dashed #ccc; padding: 0 0 20px 0; margin-bottom: 40px;">
      <h3 style="font-family: 'Bree Serif', arial; font-weight: bold; font-size: 30px;">
        <a style="text-decoration: none; color: #666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap
        					Photo Gallery jQuery plugin <span style="color: red;">Demo</span>
        				</a>
      </h3>
      <p>
        Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a
        					style="color: red"
        					href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial
      </p>
    </div>

    <ul class="row first">

      <li><img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"></li>

      <li>
        <img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
        <div class="text">Eiusmod tempor enim ad minim veniam</div>
      </li>
      <li>
        <img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
        <div class="text">Ut enim ad minim veniam</div>
      </li>

      <li>
        <img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
        <div class="text">Do eiusmod tempor</div>
      </li>



    </ul>
  </div>
  <!-- /container -->

  <body>

</html>

另一种方式 https://jsfiddle.net/vrgy0vs2/

【问题讨论】：

    标签： jquery twitter-bootstrap bootstrap-modal


    【解决方案1】：

    通过删除默认的bsControls，您可以定义自己的控件。请参阅下面使用引导网格实现的示例。

    (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='row'><div class='text-left col-md-2 col-lg-2 col-sm-2 col-xs-2'>";
      html += '<a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span>Prev</span></a>';
      html += "</div><div class='col-md-8 col-lg-8 col-sm-8 col-xs-8'>";
      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 += "</div><div class='text-right col-md-2 col-lg-2 col-sm-2 col-xs-2'>";
      html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span>Next</span></a>';
      html += "</div></div>";


      $('#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));
    #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%;
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Bootstrap Photo Gallery Demo</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="jquery.bsPhotoGallery.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="jquery.bsPhotoGallery.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;
  }
</style>

<body>
  <div class="container">
    <div class="row" style="text-align: center; border-bottom: 1px dashed #ccc; padding: 0 0 20px 0; margin-bottom: 40px;">
      <h3 style="font-family: 'Bree Serif', arial; font-weight: bold; font-size: 30px;">
        <a style="text-decoration: none; color: #666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap
        					Photo Gallery jQuery plugin <span style="color: red;">Demo</span>
        				</a>
      </h3>
      <p>
        Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a
        					style="color: red"
        					href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial
      </p>
    </div>

    <ul class="row first">

      <li><img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"></li>

      <li>
        <img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
        <div class="text">Eiusmod tempor enim ad minim veniam</div>
      </li>
      <li>
        <img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
        <div class="text">Ut enim ad minim veniam</div>
      </li>

      <li>
        <img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
        <div class="text">Do eiusmod tempor</div>
      </li>



    </ul>
  </div>
  <!-- /container -->

  <body>

</html>

    【讨论】：

    • 用video标签替换img标签
    【解决方案2】：

    您只需要对 Javascript 代码进行两处更改：

    替换

    <span class="' + settings.iconRight + '"></span> with Next

    和

    replace <span class="' + settings.iconLeft + '"></span> with Prev

    Schroll 右查看包含 html 定义的两行的替换。

    您的 Javascript 代码

     (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>Next</span></a>';
  html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span>Prev</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));

    【讨论】：

      【解决方案3】：

      您可以检查显示 Next-Prev 链接实现的更新代码。

      (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 += '<p style="clear: both;display: flow-root;"><a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span >Next</span></a>';
      html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span>Prev</span></a></p>';

      $('#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));
      #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%;
  }
}

a.bsp-controls, a.bsp-controls:visited, a.bsp-controls:active{
 position:relative;
}

.bsp-controls.next{
    float:right;
    margin-right:50px;
    color:blue;
}

.bsp-controls.previous{
    float:left;
    margin-left:50px;
    color:blue;
}
      **Html page**


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Bootstrap Photo Gallery Demo</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="jquery.bsPhotoGallery.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="jquery.bsPhotoGallery.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;
  }
</style>

<body>
  <div class="container">
    <div class="row" style="text-align: center; border-bottom: 1px dashed #ccc; padding: 0 0 20px 0; margin-bottom: 40px;">
      <h3 style="font-family: 'Bree Serif', arial; font-weight: bold; font-size: 30px;">
        <a style="text-decoration: none; color: #666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap
        					Photo Gallery jQuery plugin <span style="color: red;">Demo</span>
        				</a>
      </h3>
      <p>
        Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a
        					style="color: red"
        					href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial
      </p>
    </div>

    <ul class="row first">

      <li><img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"></li>

      <li>
        <img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
        <div class="text">Eiusmod tempor enim ad minim veniam</div>
      </li>
      <li>
        <img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
        <div class="text">Ut enim ad minim veniam</div>
      </li>

      <li>
        <img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
        <div class="text">Do eiusmod tempor</div>
      </li>



    </ul>
  </div>
  <!-- /container -->

  <body>

</html>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2016-05-19
        • 2014-07-19
        • 1970-01-01
        • 2013-06-13
        • 2021-12-16
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode