Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][Java][JavaScript]Przyciski do szablonu galerii javascript
Myszowaty23
post 18.10.2016, 05:41:18
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 18.10.2016

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <title>Prosta galeria w JavaScript</title>
  5.   <link rel="stylesheet" type="text/css" href="style.css">
  6.   <meta charset="utf-8">
  7. </head>
  8.  
  9. <body>
  10.  
  11. 	<p><img id="duze_zdjecie" src="obr1.jpg" alt="Duze zdjecie"></p>
  12.  
  13. 	<ul id="miniaturka">
  14. 		<li><a href="obr1.jpg" title="Obraz 1"><img src="obr1.jpg"></a></li>
  15. 		<li><a href="obr2.jpg" title="Obraz 2"><img src="obr2.jpg"></a></li>
  16. 		<li><a href="obr3.jpg" title="Obraz 3"><img src="obr3.jpg"></a></li>
  17. 		<li><a href="obr4.jpg" title="Obraz 4"><img src="obr4.jpg"></a></li>
  18. 		<li><a href="obr5.jpg" title="Obraz 5"><img src="obr5.jpg"></a></li>
  19. 	</ul>
  20.  
  21. 	<script>
  22. 		var duze_zdjecie = document.getElementById('duze_zdjecie');
  23.  
  24. 		var miniaturka = document.getElementById('miniaturka');
  25.  
  26. 		miniaturka.onclick = function(e) {
  27. 			e = e || window.event;
  28. 			var target = e.target || e.srcElement;
  29.  
  30. 			while(target != this) {
  31.  
  32. 				if (target.nodeName == 'A') {
  33. 					PokażMiniaturki(target.href, target.title);
  34. 					return false;
  35. 				}
  36.  
  37. 				target = target.parentNode;
  38. 			}
  39. 		}
  40.  
  41. 		function PokażMiniaturki(href, title) {
  42. 			duze_zdjecie.src = href;
  43. 			duze_zdjecie.alt = title;
  44. 		}
  45.  
  46. 		var imgs = miniaturka.getElementsByTagName('img');
  47.  
  48. 		for(var i=0; i<imgs.length; i++) {
  49. 			var url = imgs[i].parentNode.href;
  50. 			var img = document.createElement('img');
  51. 			img.src = url;
  52. 		}
  53. 	</script>
  54.  
  55. </body>
  56. </html>
[HTML] pobierz, plaintext

Szablon galerii jest tu: http://tmall.com.pl/prosta-galeria-w-javascript/
Go to the top of the page
+Quote Post
szczemp
post 18.10.2016, 07:26:07
Post #2





Grupa: Zarejestrowani
Postów: 149
Pomógł: 9
Dołączył: 9.12.2010

Ostrzeżenie: (0%)
-----

Dodaj gdzieś przyciski nawigacyjne
[HTML] pobierz, plaintext 
  1. <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 
  1. duze_zdjecie.src
[HTML] pobierz, plaintext

Potem tego samego poszukaj w miniaturkach np coś w stylu
[HTML] pobierz, plaintext 
  1. 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.
Go to the top of the page
+Quote Post
Myszowaty23
post 21.10.2016, 08:55:54
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 18.10.2016

Ostrzeżenie: (0%)
-----

Nie idzie mi. Za mało rozumiem kod JS, który sam wrzuciłem.
Go to the top of the page
+Quote Post
szczemp
post 21.10.2016, 10:24:16
Post #4





Grupa: Zarejestrowani
Postów: 149
Pomógł: 9
Dołączył: 9.12.2010

Ostrzeżenie: (0%)
-----

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 
  1. 		for(var i=0; i<imgs.length; i++) {
  2. 			var url = imgs[i].parentNode.href;
  3. 			var img = document.createElement('img');
  4. 			img.src = url;
  5. 		}
[HTML] pobierz, plaintext
więc u siebie zakomentowałem linię 
[HTML] pobierz, plaintext 
  1. //img.src = url;
[HTML] pobierz, plaintext
Jakby coś nie działało to ją odkomentuj.
Go to the top of the page
+Quote Post
Myszowaty23
post 21.10.2016, 11:22:53
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 18.10.2016

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 1.05.2025 - 04:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn