Einfache Jquery Fotogalerie

Question

Ich baue eine sehr einfache Fotogalerie mit html5 und jquery. Die Galerie funktioniert gut, indem Sie die Bilder sequentiell mit 2 Pfeil-Tasten verschieben, aber das Schwierige für mich ist, ein Foto direkt von seinem Thumbnail zu erreichen. Jemand kann mir helfen?

Das System funktioniert auf diese Weise:

HTML (MINIATURBILD 1,2,3) muss ich diese Verknüpfung sichtbar ihre große Version auf Galerie setzen

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

Mit dem gleichen Galerie-Skript habe ich diese Aktion mit einem Galerie-Eröffnungs-System gelöst. Ich habe zu jedem Thumbnail einen Link hinzugefügt, der die Funktion slide mit der Foto Nummer -1 gesetzt hat. Also hier eine einfache Fotogalerie. Jetzt muss ich den Wert von imagecount var zurücksetzen, wenn ich ein Foto schließe, um danach das richtige Foto zu öffnen. Also habe ich ein Skript auf Klick auf eine Schaltfläche zum Schließen hinzugefügt, um die imagecount variabLe

THUMBNAILS zurück:

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

GALERIE GEÖFFNET

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

OPEN UND SCHLIESSEN GALERIE

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

GALERIE SYSTEM