如何在圖像滑塊顯示中添加按鈕prev和next？

Question

我創建圖片網格，何時點擊圖片;它顯示這個圖像，並且我想添加更多的按鈕來快速導航包括：previous，next和exit按鈕。

目前，我只寫基於jquery的JavaScript點擊圖像並顯示它。

// Create a lightbox 
 

 
var $lightbox = $("<div class='lightbox'></div>"); 
 
var $img = $("<img>"); 
 

 

 
$lightbox 
 
\t .append($img) 
 

 
// Add lighbox to document 
 

 
$('body').append($lightbox); 
 

 

 
$('.portfolio-imgs a').click(function (e) { 
 
\t e.preventDefault(); 
 

 
\t // Get image link and description 
 
\t var src = $(this).children('img').attr("src"); 
 
\t // Add data to lighbox 
 

 
\t $img.attr('src',src); 
 

 
\t // Show lightbox 
 

 
\t $lightbox.fadeIn('fast'); 
 

 
\t $lightbox.click(function() { 
 
\t \t $lightbox.fadeOut('fast'); 
 
\t }); 
 
}); 
 

 
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%;    
 
\t } 
 

 
.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{ 
 
\t display: none; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: rgba(0,0,0,.7); 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 20; 
 
\t padding-top: 30px; 
 
\t box-sizing: border-box; 
 
} 
 

 
.lightbox img{ 
 
\t max-width: 80%; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t 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

，你將需要與正確的類添加一個跨度喜歡這裏：http://ashleydw.github.io/lightbox/

，或者你可以在我的情況下，檢查了這example