How to add button prev and next in image slidershow?

Question

I create an image grid, when to clicking an image; it shows this image, and I want to add more button to navigation quickly include: previous , next and exit button.

Currently, I only write javascript base on Jquery to click an image and show it.

 // Create a lightbox var $lightbox = $("<div class='lightbox'></div>"); var $img = $("<img>"); $lightbox .append($img) // Add lighbox to document $('body').append($lightbox); $('.portfolio-imgs a').click(function (e) { e.preventDefault(); // Get image link and description var src = $(this).children('img').attr("src"); // Add data to lighbox $img.attr('src',src); // Show lightbox $lightbox.fadeIn('fast'); $lightbox.click(function () { $lightbox.fadeOut('fast'); }); }); var interval = undefined; $(document).ready(function () { interval = setInterval(getNext, 2000); // milliseconds $('#next').on('click', getNext); $('#prev').on('click', getPrev); }); function getNext() { var $curr = $('.slideshow img:visible'), $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first(); transition($curr, $next); } function getPrev() { var $curr = $('.slideshow img:visible'), $next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last(); transition($curr, $next); } function transition($curr, $next) { clearInterval(interval); $next.css('z-index', 2).fadeIn('slow', function () { $curr.hide().css('z-index', 0); $next.css('z-index', 1); }); } 

 .portfolio-imgs { clear: both; display: block; } .portfolio-imgs img { position: relative; margin: 1em 0; padding: 0; z-index: 1; display: block; width: 100%; } .portfolio-imgs { margin: 0 auto; } .portfolio-imgs a { position: relative; margin: 0; padding: 0; display: block; float: left; text-decoration: none; overflow: hidden; vertical-align: middle; width: 100%; } .gallery-text{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50%; text-align: center; background-color: rgba(215, 81, 107, .5); opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; vertical-align:middle; line-height:200px; } .gallery-text:hover{ opacity: 1; } .gallery-text h3{ color: white; font-family: 'Lato', arial, helvetica, sans-serif; display: inline-table; vertical-align:middle; line-height:100%; } .portfolio-imgs h3:hover { opacity: 1; transition: .25s ease-in-out; } @media (min-width: 500px) { .portfolio-imgs a { width: 50%; display: block; } .portfolio-imgs img { margin: .25em .5em; } } @media (min-width: 800px) { .portfolio-imgs a { width: 33.33333333%; } .portfolio-imgs img { margin: .7em 1.5em; } .portfolio-imgs { margin: 0 auto; max-width: 90%; } .portfolio-imgs h3 { top: 40%; } } @media (min-width: 1020px){ .portfolio-imgs { max-width: 80%; } } /*Lighbox CSS*/ .lightbox{ display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); position: fixed; top: 0; left: 0; z-index: 20; padding-top: 30px; box-sizing: border-box; } .lightbox img{ max-width: 80%; margin-right: auto; margin-left: auto; display: block; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="portfolio-imgs"> <a href="#"><img src="http://images.fineartamerica.com/images-medium/why-so-glum-square-dog-photography.jpg" alt="Cute Frenchie" /> <div class="gallery-text"> <h3>BOOM!</h3> </div> </a> <a href="#"><img src="http://images.fineartamerica.com/images-medium/why-so-glum-square-dog-photography.jpg" alt="Cute Frenchie" /> <div class="gallery-text"> <h3>BOOM!</h3> </div> </a> <a href="#"><img src="http://images.fineartamerica.com/images-medium/why-so-glum-square-dog-photography.jpg" alt="Cute Frenchie" /> <div class="gallery-text"> <h3>BOOM!</h3> </div> </a> <a href="#"><img src="http://images.fineartamerica.com/images-medium/why-so-glum-square-dog-photography.jpg" alt="Cute Frenchie" /> <div class="gallery-text"> <h3>BOOM!</h3> </div> </a> <a href="#"><img src="http://images.fineartamerica.com/images-medium/why-so-glum-square-dog-photography.jpg" alt="Cute Frenchie" /> <div class="gallery-text"> <h3>BOOM!</h3> </div> </a> <a href="#"><img src="http://images.fineartamerica.com/images-medium/why-so-glum-square-dog-photography.jpg" alt="Cute Frenchie" /> <div class="gallery-text"> <h3>BOOM!</h3> </div> </a> </div> 

Answer 1

you will need to add a span with correct class like here: http://ashleydw.github.io/lightbox/

or you can check this example