Forum PHP.pl > [CSS][Java][JavaScript]Przyciski do szablonu galerii javascript

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][Java][JavaScript]Przyciski do szablonu galerii javascript

Myszowaty23

18.10.2016, 05:41:18

Witam! Potrzebuję pomocy z dodaniem przycisków NEXT PREV do szablonu galerii. Galeria jest warta uwagi, gdyż nie wymaga tworzenia miniaturek jednak przy dużej ilości zdjęć trzeba zdjęcie na stronie odnaleźć, kliknąć i wrócić do podglądu co jest kłopotliwe. Rozwiązaniem mają być wspomniane przyciski przełączające zdjęcia.

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
  <title>Prosta galeria w JavaScript</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
</head>
 
<body>
 
	<p><img id="duze_zdjecie" src="obr1.jpg" alt="Duze zdjecie"></p>
 
	<ul id="miniaturka">
		<li><a href="obr1.jpg" title="Obraz 1"><img src="obr1.jpg"></a></li>
		<li><a href="obr2.jpg" title="Obraz 2"><img src="obr2.jpg"></a></li>
		<li><a href="obr3.jpg" title="Obraz 3"><img src="obr3.jpg"></a></li>
		<li><a href="obr4.jpg" title="Obraz 4"><img src="obr4.jpg"></a></li>
		<li><a href="obr5.jpg" title="Obraz 5"><img src="obr5.jpg"></a></li>
	</ul>
 
	<script>
		var duze_zdjecie = document.getElementById('duze_zdjecie');
 
		var miniaturka = document.getElementById('miniaturka');
 
		miniaturka.onclick = function(e) {
			e = e || window.event;
			var target = e.target || e.srcElement;
 
			while(target != this) {
 
				if (target.nodeName == 'A') {
					PokażMiniaturki(target.href, target.title);
					return false;
				}
 
				target = target.parentNode;
			}
		}
 
		function PokażMiniaturki(href, title) {
			duze_zdjecie.src = href;
			duze_zdjecie.alt = title;
		}
 
		var imgs = miniaturka.getElementsByTagName('img');
 
		for(var i=0; i<imgs.length; i++) {
			var url = imgs[i].parentNode.href;
			var img = document.createElement('img');
			img.src = url;
		}
	</script>
 
</body>
</html>
[HTML] pobierz, plaintext

Szablon galerii jest tu: http://tmall.com.pl/prosta-galeria-w-javascript/

szczemp

18.10.2016, 07:26:07

Dodaj gdzieś przyciski nawigacyjne

[HTML] pobierz, plaintext 
<span id="prev">prev</span> <span id="next">next</span>
[HTML] pobierz, plaintext

i w oncicku na dany przycisk (np prev) w javascripcie odczytat jakie zdjęcie akurat się wyświetla np po

[HTML] pobierz, plaintext 
duze_zdjecie.src
[HTML] pobierz, plaintext

Potem tego samego poszukaj w miniaturkach np coś w stylu

[HTML] pobierz, plaintext 
imgs[i].parentNode.href == duze_zdjecie.src
[HTML] pobierz, plaintext

I na podstawie tego będziesz wiedział jaki jest poprzednie zdjęcie i go ładować do dużego. Trzeba jeszcze sprawdzić czy nie jest ono pierwsze i wtedy ładować ostatnie.

Myszowaty23

21.10.2016, 08:55:54

Nie idzie mi. Za mało rozumiem kod JS, który sam wrzuciłem.

szczemp

21.10.2016, 10:24:16

W sumie to ja też nie jestem pro, ale coś dopisałem i działa.
Sprawdź
https://jsfiddle.net/7wbvd7r2/

Nie wiem do czego w Twoim kodzie jest ta pętla:

[HTML] pobierz, plaintext 
		for(var i=0; i<imgs.length; i++) {
			var url = imgs[i].parentNode.href;
			var img = document.createElement('img');
			img.src = url;
		}
[HTML] pobierz, plaintext

więc u siebie zakomentowałem linię

[HTML] pobierz, plaintext 
//img.src = url;
[HTML] pobierz, plaintext

Jakby coś nie działało to ją odkomentuj.

Myszowaty23

21.10.2016, 11:22:53

Jesteś Wielki. Bardzo Ci dziękuję. Wszystko działa.
Ja programowania się nieco uczyłem ale nie powiem, że nauczyłem. 10 lat temu to PHP dobrze mi w szkole szło ale potem na studiach miałem tylko język C# i do niego się nie przyłożyłem. Teraz czasami dla zabawy coś pokombinuję. Ostatnio całkiem ładny skrypt w VBA napisałem na potrzeby pracy. Z tą galerią właśnie poległem nie rozumiejąc kodu, który zapożyczyłem. Jeszcze raz wielkie dzięki.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.