Простая JQuery фотогалерея

Question

Я строю очень простую фотогалерею с html5 и jquery. В галерее работают хорошие скользящие картинки последовательно с помощью 2 стрелок botton, но трудным для меня является достижение фотографии непосредственно из ее миниатюры. Кто-то может мне помочь?

Система работы таким образом:

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> 

ГАЛЕРЕЯ ОТКРЫТА

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

СИСТЕМА ГАЛЕРЕЯ

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