簡單的jquery照片庫

Question

我正在用html5和jquery構建一個非常簡單的照片庫。這個畫廊使用2個箭頭按鈕連續滑動圖片，但對我來說很難直接從它的縮略圖中獲得照片。有人可以幫助我嗎？

在這樣的系統中工作：

HTML（縮略圖1,2,3）我需要鏈接這些設置可見其大版上畫廊

<img src="img/gallery/1.jpg" style="width:100%;" id="thumb1"/> 
<img src="img/gallery/2.jpg" style="width:100%; id="thumb1"/> 
<img src="img/gallery/3.jpg" style="width:100%;" id="thumb1"/> 

HTML（IMGSLIDE和控制ARROW ）

<img src="img/gallery/1.jpg" id="galleryimages"> 
<img onclick="slide(-1)" src="img/gallery/leftarrow.png" id="gallerybutton"> 
<img onclick="slide(1)" src="img/gallery/leftarrow.png" id="gallerybutton"> 

SCRIPT

var imagecount = 1; 
var total = 9; 

function slide(x) { 
var image = document.getElementById('galleryimages'); 
imagecount = imagecount + x; 
if (imagecount > total){ imagecount = 1; } 
if (imagecount < 1){ imagecount = total; } 
image.src = "img/gallery/" + imagecount + ".jpg"; 
imagecount = imagecount 
}; 

Answer 1

使用相同的圖庫腳本，我已經使用圖庫開放系統解決了此操作。我已經添加到任何縮略圖鏈接誰設置功能幻燈片與照片編號-1。所以這裏有一個簡單的照片庫。現在我需要重置imagecount var的值，當我關閉照片以打開正確的點擊後的照片。所以，我在一個關閉按鈕的點擊添加一個腳本來重置imagecount變量

THUMBNAILS：

<a href="#" onclik="slide(0)" id="opg"> 
<img src="img/gallery/1.jpg" style="width:100%;" id="thumb1"/> 
</a> 
<a href="#" onclik="slide(1)" id="opg2"> 
<img src="img/gallery/2.jpg" style="width:100%;" id="thumb2"/> 
</a> 
<a href="#" onclik="slide(2)" id="opg3"> 
<img src="img/gallery/3.jpg" style="width:100%;" id="thumb3"/> 
</a> 

畫廊OPENED

<img src="img/gallery/1.jpg" id="galleryimages"><!--gallery--> 
<a href="#" onclick="slide(-1)"> Previous </a><!--previctures link--> 
<a href="#" onclick="slide(-1)"> Next </a><!--nextctures link--> 
<a href="#" id="closegallery">Close</a><!--closebutton--> 

打開和關閉畫廊

$('#opg,#opg2,#opg3').click(function(e){  
$('#galleryimages').fadeIn(1000) }); //open gallery clicking tmbn 


//close gallery clicking the close button and reset imagecount to 1 
$('#closegallery').click(function(e){ 
imagecount = null; 
imagecount = 1 ;  
$('#galleryimages').fadeOut(1000) }); 

GALLERY SYSTEM

var imagecount = 1; 
var total = 9; 

function slide(x) { 
var image = document.getElementById('galleryimages'); 
imagecount = imagecount + x; 
if (imagecount > total){ imagecount = 1; } 
if (imagecount < 1){ imagecount = total; } 
image.src = "img/gallery/" + imagecount + ".jpg"; 
imagecount = imagecount 
};