シンプルな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の値をリセットする必要があります。

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

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

開閉GALLERY

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

：だから私はimagecount変数

サムネイルをリセットするには、[閉じる]ボタンをクリックするだけでスクリプトを追加しました

ギャラリーシステム

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