Add next and previous buttons when the I open the modal

Question

I am a newbie and I wanted to ask if you can help me add next and previous buttons to my modal. The pictures are not in gallery form. Do I add div or just like this and add some javascript? Can you suggest some?

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>

Should look like this:

Answer 1

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";
}

.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;
}

<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>

Please check the working code with Prev and Next button. I have used the index of the image storing tag and changed the image on pop-up according to that. You can design the button as you want

thanks hope it will help you

Answer 2

Here you have it...

<!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>

Answer 3

By finding the next/previous source of image, you can navigate through the images using the .next() and .prev() function in js.

First get the source attribute of your current image in your modalImg then find the next image from the parent of your image, which is the <li>, and get the source attribute of the image and replace it to your modalImg to display the next/previous image.

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

In your modal, add next and previous buttons

<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>

You can see how it works in this jsFiddle.