在圖庫上的圖像之間切換？

我使用jQuery編寫了一個庫，CSS & HTML，我想添加下一個圖像和以前的圖像按鈕，所以我已經將它們添加到頁面中，並且我已經爲它們製作了功能，但我不知道如何我會做的。這裏是我的代碼，如果任何機構知道這樣做的任何好方法，我會很高興！謝謝！編輯我還沒有收到回覆，因此我會嘗試提供更多信息，我正嘗試在圖像的左側和右側獲取箭頭，以便我可以轉到上一張和下一張圖像，而且我不會不知道該怎麼做。在圖庫上的圖像之間切換？

$(document).ready(function(){ 
 
\t $('.thumbnail').click(function(){ 
 
\t \t $('.backdrop').animate({'opacity':'.5'}, 300, 'linear'); 
 
\t \t $('.box').animate({'opacity' : '1.00'}, 300, 'linear'); 
 
\t \t $('.box, .selectors, .backdrop').css('display', 'block'); 
 
\t \t $('.box').html('<img class="boximg" src="' + $(this).attr('src') + '">'); 
 

 
\t \t //$('.box').html('<img class="boximg" src="' + src + '">'); 
 
\t }); 
 
\t $('.nextimg').click(function(){ 
 
\t \t $('.box').html('<img class="boximg" src="' + '">'); 
 
\t }); 
 

 
\t $('.previmg').click(function(){ 
 
\t \t $('.box').html('<img class="boximg" src="'+'">'); 
 
\t }); 
 

 
\t $('.backdrop').click(function(){ 
 
\t \t close_box(); 
 
\t }); 
 
}); 
 

 
$(document).keydown(function(event){ 
 
if (event.keyCode == 27 || event.keyCode == 13){ 
 
\t close_box(); 
 
}; 
 
}); 
 

 
function close_box(){ 
 
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){ 
 
\t $('.backdrop, .box').css('display', 'none'); 
 
\t $('.selectors').css('display', 'none'); 
 
}); 
 
}

.backdrop{ 
 
position: absolute; 
 
display: none; 
 
top: 0px; 
 
left: 0px; 
 
background-color: #000; 
 
opacity: 0; 
 
height: 100%; 
 
width: 100%; 
 
} 
 

 
.box{ 
 
position: absolute; 
 
display: none; 
 
background-color: white; 
 
opacity: 0; 
 
top: 10%; 
 
left: 10%; 
 
width: 80%; 
 
height: 80%; 
 
border-radius: 13px; 
 
} 
 

 
.close{ 
 
float: right; 
 
margin-right: 5px; 
 
} 
 

 
.boximg { 
 
position: absolute; 
 
top: 3%; 
 
left: 2%; 
 
width: 96%; 
 
height: 94%; 
 
} 
 

 
.thumbnail{ 
 
\t border-radius: 30px; 
 
\t height: 300px; 
 
\t width: 300px; 
 
} 
 

 
.selectors{ 
 
\t display: none; 
 
} 
 

 
.nextimg{ 
 
position: absolute; 
 
right: 3%; 
 
top: 50%; 
 
} 
 

 
.previmg{ 
 
position: absolute; 
 
left: 3%; 
 
top: 50%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
\t </head> 
 
<body> 
 
\t <div class="images"> 
 
\t \t <img class="thumbnail" src="urlttr.jpeg"> 
 
\t \t <img class="thumbnail" src="http://www.hdwallpapers.eu/wp/sci-fi-planet-background-1920x1080.jpg"> 
 
\t \t <img class="thumbnail" src="http://www.wallpapersdb.org/wallpapers/beach/sunrise_1920x1080.jpg"> 
 
\t \t <img class="thumbnail" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg"> 
 
\t </div> 
 
\t <div class="backdrop"></div> 
 
\t <div class="box"></div> 
 
\t <div class="selectors"> 
 
\t \t <image class="nextimg" src="right_arrow.png"> 
 
\t \t <image class="previmg" src="left_arrow.png"> 
 
\t </div> 
 
\t </body> 
 
</html>

來源

2014-10-28 user3910313

以你的代碼的jsfiddle，I came up with this as a solution。

<div class="images"> 
    <!-- In the a-href you put the path to the big sized image. In the image src the small thumb path. --> 
    <a href="/city-q-c-640-480-3.jpg"> 
     <img class="thumbnail" src="/city-q-c-640-480-3.jpg"/> 
    </a> 
    <a href="/sci-fi-planet-background-1920x1080.jpg"> 
     <img class="thumbnail" src="/sci-fi-planet-background-1920x1080.jpg"/> 
    </a> 
    <a href="/sunrise_1920x1080.jpg"> 
     <img class="thumbnail" src="/sunrise_1920x1080.jpg"/> 
    </a> 
    <a href="/New-York-Sunset-1920x1080.jpg"> 
     <img class="thumbnail" src="/New-York-Sunset-1920x1080.jpg"/> 
    </a> 
</div> 

<div class="backdrop"></div> 
<div class="box"></div> 

<div class="selectors"> 
    <img class="nextimg" src="right_arrow.png"/> 
    <img class="previmg" src="left_arrow.png"/> 
</div>

你可以看到那裏，我周圍有一個標籤大拇指 - 你也可以改用數據屬性或類似的東西添加的路徑，圖像的大版。

$(function() { 
    var $currentImageLink; // the current a tag 

    $('.images a').click(function(event){ 
     event.preventDefault(); 

     $currentImageLink = $(this); 

     $('.backdrop').animate({'opacity':'.5'}, 300, 'linear'); 
     $('.box').animate({'opacity' : '1.00'}, 300, 'linear'); 
     $('.box, .selectors, .backdrop').css('display', 'block'); 
     $('.box').html('<img class="boximg" src="' + $(this).attr('href') + '">'); 
    }); 

    $('.nextimg').click(function() { 
     $currentImageLink = $currentImageLink.next('a'); 
     if (0 == $currentImageLink.length) { 
      $currentImageLink = $('.images a:first-child'); 
     } 
     $('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') + '">'); 
    }); 

    $('.previmg').click(function() { 
     $currentImageLink = $currentImageLink.prev('a'); 
     if (0 == $currentImageLink.length) { 
      $currentImageLink = $('.images a:last-child'); 
     } 
     $('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') +'">'); 
    }); 

    $('.backdrop').click(function() { 
     close_box(); 
    }); 
}); 

$(document).keydown(function(event) { 
    if (event.keyCode == 27 || event.keyCode == 13) { 
     close_box(); 
    } 
}); 

function close_box() { 
    $('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function() { 
     $('.backdrop, .box').css('display', 'none'); 
     $('.selectors').css('display', 'none'); 
    }); 
}

而且我增加了變量$ currentImageLink中，我總是把當前的鏈接元素，那就是在您的畫廊那一刻所示。在next和prev的函數中，變量用next/prev link元素填充。如果沒有這樣的元素，它將成爲第一個或最後一個元素。

根據你想要對圖庫做什麼，也許你可以使圖像淡出/ -in或預加載大圖像。

來源

2014-10-28 11:35:05 progsource

謝謝！但是什麼$ currentImageLink = $ currentImageLink.next（'a'）;和$（function（）{}）呢？我想爲$（function（）{}）;你必須使它$（document）.ready（function（）{}）; – user3910313 2014-10-28 11:44:03

$（函數（）{}）是 $（文件）。就緒（函數（）{}）只有很短的版本 - $ currentImageLink.next（ 'A'）搜索下一個一元素 – progsource 2014-10-28 11:50:38

好的，謝謝！：D – user3910313 2014-10-28 11:54:03

在圖庫上的圖像之間切換？

回答

相關問題