JS - как да укажа картинката, върху която съм кликнала?

[zareva_rositsa]

Здравейте,

искам да си напиша js галерия, която да превърта картинки като се кликне върху малките им изображения. Имам един див "main_pic", в който имам голяма картинка с name="pic", защото за да и задам ново src, трябва да я указвам по име. Под този див имам друг, "main_nav", който има общо 7 thumbnails, като 4 от тях крия при инициализирането за красота .

Кода, който ползвам в началото е:

window.onload=initAll;
  function initAll()
{
	var fill = document.getElementById("main_nav");
	var thumbs = fill.getElementsByTagName("img");
	var place = document.getElementById("foo");
	place.innerHTML = thumbs.length;
	
	for(i=3; i<thumbs.length; i++)
	{
	thumbs[i].style.display = "none";
	
	}	
	for(i=0; i<thumbs.length; i++)
	{
	thums[i].onclick = rollIt;
	}	
}

и сега не знам как във функцията rollIt да укажа картинката, върху която съм кликнала. Бихте ли ме посъветвали ?

 

[shterev]

Държиш да си напишеш галерията? Защо не позлваш нещо готово примерно?

 

[zareva_rositsa]

държа, държа. Искам да схвана концепциите в js, заради това се хващам. Иначе готовите са много по - красиви даже, от това което аз правя, особено тези, писани с jQuery

 

[shterev]

http://www.quirksmode.org/js/events_order.html

 

[I_V_O]

Преди доста време направих един много простичък урок точно за това Сигурен съм, че много ще ти помогне

http://web-tourist.net/login/login/view.php?st=2572

 

[zareva_rositsa]

да, така е, наистина си взех идеи оттам, обаче сега искам да въведа още едно ниво на сложност: src на малките и големите ми картинки не са в масив, а вместо това са именувани по начин, който ще ми позволи да реализирам алгоритъм - с номерцата в името им. Това може да стане, ако се сетя как да взема id - то на картинката върху която кликам. Знам, че обектите имат свойство .id, обаче не улучвам как да го напиша, за да си го ползвам . Правил ли си и такъв урок ?

Между другото, с бутон вече ги превъртам, да се изфукам . Сега само ми остава да направя да се сменя динамично това, което пуска функцията

 

[I_V_O]

function rollId(е){
alert( 'Ти кликна на картинка с id=' + this.id ); // воаля
}

Eлемента, на който е добавена функията rollId като handler за събитие е достъпен, чрез запазената дума this

 

[zareva_rositsa]

this се оказа ключа от бараката ! E, ето плода на колективния ни труд:

http://jsgallery.webuda.com/

соурс код - а се вижда на дясно копче, ако на някой мога да бъда полезна с това . Не се превърта само назад, ама аз този бъг си го знам и някой ден ще си го оправя .

Благодаря ви!

shterev, този сайт дето изпрати се оказа много полезен

 

[shterev]

Сега, добре е но за да не се чака това зареждане на снимките можеш да направиш едно зареждане на снимките като <img /> и да ги скриеш, или да сложиш един прелоудър

 

[zareva_rositsa]

Мии, да прав си, че много бави и за такъв проблем въобще не подозирах .

Бих направила едно зареждане на снимките като <img /> и да ги скрия, стига да знаех как, а за прелоудър само съм чувала

 

[zareva_rositsa]

Здравейте пак .

Продължавам тази тема, защото пишейки си галерията, открих един много странен бъг в js:

Ползвам този код, за да показвам 4 thumbnails под основната картинка:

if(i==num-3 || i==num-2 || i==num-1 || i==num)
		{
			if(thumbs[i].style.border)
				{
					thumbs[i].style.border = "none";
				}
		
				thumbs[i].style.display = "";
				thumbs[num-1].style.border = "2px solid #3e3838";
		}
		else
		{
			thumbs[i].style.display = "none";
		}

и така, от многото картинки, показвам само 4. Забелязах нещо много странно: Ако в if() условието не задавам картинките, които да ми се показват със знак "-", а със "+", например, ако кажа:

if(i==num-1 || i==num || i==num+1 || i==num+2),

, картинките, указани с + няма да ми се покажат. num+1 и i==num+2 не разбират, че трябва да са видими. Вие знаете ли защо това е така?