Галлерея изображений

[DynkanMaclaud]

Ссылка

Нажмите на менюшку --> фото--> там 3 фотки, кликните на первую появится она же в увеличенном изображении, не могу понять как сделать так чтобы при клике на вторую фотку появлялась вторая фотка... чтобы это реализовывалось через одну функцию... а то так для каждой фотки функции писать чтото не очень хорошее решение я так думаю...

вот скрипт который отвечает за открытие большого изображения при клике на маленькое

function foto(){


  
   document.getElementById("img_main").src = images[0]; (Так вставляется изображение из массива номером 0  см. ниже функцию 'number')


var bg=document.getElementById('background');//Получили div с id bg
		button=document.getElementById('test');// Копка на которую кликать
		exit=document.getElementById('close');//Кнопка на закрытие
		paper=document.getElementById('wrapper');
		many=document.getElementById('hoverClose');
		bg.style.display='block';
		exit.style.display='block';
		paper.style.display='block';
		many.style.display="block";
	
	many.onclick= function closer(){
	bg.style.display='none';
	exit.style.display='none';
	paper.style.display='none';
	many.style.display='none';
	
	};
	
	

}

вот функция 'number' для смены изображений при клике

var images = new Array();
    var i = 0;
     
    images[0] = 'images/1.jpg';
    images[1] = 'images/3.jpg';
    images[2] = 'images/4.jpg';
     
  
	
	   function lol() {
        i = i-1;
        if (i < 0) {
            i = images.length-1;
        }
        document.getElementById("img_main").src = images[i];
    };   
	
	 function viewImages() {
        i = i+1;
         if (i == images.length) {
            i = 0;
        }
        document.getElementById("img_main").src = images[i];
        
    };

<div id ="test"class="gallery" onclick="foto()"><div class="inline"><div id ="zoomer"class="zoom"><img id="test2"src="images/search.png"/></div><img id="test2"src="images/1.jpg"/></div></div>

HELP!

[Viral]

не проще ли сделать все на готовом lightbox'e?

[DynkanMaclaud]

да хотелось бы свой создать)) я же учусь... это у меня не заказ если бы делал сайт за деньки то конечно бы использовал готовое решение, а тут хочется своё когда делал свой лайтбокс не думал что такая проблема возникнет((((

[DynkanMaclaud]

есть какие нибудь мысли Viral?)

[Viral]

на второй фотографии у вас стоит onclick="foto2();"
функции foto2() у вас нет, поэтому оно и не работает.
вам надо передавать в функцию foto() переменную с id дива, из которого надо вытащить фотографию, или переменную с именем файла.
вообще вы очень интересно, на мой взгляд написали))

не хочу оскорбить, но если вдруг вы не в курсе, переменная в функцию передается так:

<script>
function alertVar(peremennaya){
    alert(peremennaya);
}
</script>
<input type="button" onclick="alertVar('передаваемая переменная')" value="clickme">

[DynkanMaclaud]

function foto2(){

 foto();
  document.getElementById("img_main").src = images[1];
  
  
};

функцию 'foto2()'; я не написал специально так как если выбирать такой метод то для каждого изображения нужна свой отельная функция 'foto3()'; 'foto4()';... в скрипте выше таким образом я добиваюсь что при клике появляется лайтбокс с нужной фоткой , но почемуто рпиходится кликать два раз по кнопке next... НО это плохой метод так как прийдется использовать много функций((( хотелось бы чтобы всё в одной реализовывалось щас буду пробовать то о чем ты написал

[Viral]

function foto(el){
  var imgSrc = el.getElementsByTagName('img')[1].getAttribute('src');
  
   document.getElementById("img_main").src = imgSrc;


var bg=document.getElementById('background');//Получили div с id bg
		button=document.getElementById('test');// Копка на которую кликать
		exit=document.getElementById('close');//Кнопка на закрытие
		paper=document.getElementById('wrapper');
		many=document.getElementById('hoverClose');
		bg.style.display='block';
		exit.style.display='block';
		paper.style.display='block';
		many.style.display="block";
	
	many.onclick= function closer(){
	bg.style.display='none';
	exit.style.display='none';
	paper.style.display='none';
	many.style.display='none';
	
	};
	
	

}

Вот пример для вашей ситуации, но можно гораздо меньшей кровью обойтись и меньшим кодом..


onclick="foto(this)" - везде поставьте вместо foto(), foto2() и т.д.
И нельзя присваивать нескольким элементам одинаковые id

[DynkanMaclaud]

ДА работает, Viral только проблема в том что когда кликаешь кнопку Nazad или Next то по первому клику ничего не происходит а когда второй раз кликаешь то норм работает Ссылка

var images = new Array();
    var i = 0;
     
    images[0] = 'images/1.jpg';
    images[1] = 'images/3.jpg';
    images[2] = 'images/4.jpg';
     
  
	
	   function lol() {
        i = i-1;
        if (i < 0) {
            i = images.length-1;
        }
        document.getElementById("img_main").src = images[i];
    };   
	
	 function viewImages() {
        i = i+1;
         if (i == images.length) {
            i = 0;
        }
        document.getElementById("img_main").src = images[i];
        
    };

[Viral]

это потому что i после того, как функция foto() отработает, остается неизменным.

[DynkanMaclaud]

блин я вообще ничего не понимаю надо за учебники садиться((((