«

»

Lis 03

Wydrukuj to Wpis

Prosta galeria w JavaScript

Prosta-galeria-w-JavaScript

Prosta galeria dla twojej strony internetowej, który został zrobiony w JavaScriptie. Skrypt jest bardzo prosty i nie trzeba znać dobrze JavaScript. Na dole jest pokazany przykład.


Plik index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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>

Plik style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#duze_zdjecie {
	border: solid 1px #ccc;
	width: 550px;
	height: 400px;
	padding: 5px;
}
 
#miniaturka a {
	border: solid 1px #ccc;
	width: 100px;
	height: 100px;
	padding: 3px;
	margin: 2px;
	float: left;
}
 
#miniaturka a:hover {
	border-color: red;
}
 
#miniaturka li {
	list-style: none;
}
 
#miniaturka {
	margin: 0;
	padding: 0;
}
 
#miniaturka img {
	width: 100px;
	height: 100px;
}

A to rezultat

Załączniki do pobrania

  • rar galeria
    HTML, JavaScript, CSS Document
    Rozmiar pliku: 239 KB Pobrania: 535

Permalink do tego artykułu: http://tmall.com.pl/prosta-galeria-w-javascript/

2 Komentarze

  1. Marek

    Witam serdecznie, potrzbowalbym troche podobna galerie to tej tkora przedstawiles. Tylko ze zamiast miniaturek pod zdjeciem chcialbym miec suwak ktory zmienialby zdjecia. Serdeczeni dziekuje za kazda pomoc.
    Pozdrawiam
    Marek

  2. Kamiś

    Witam! Jak dodać strzałki przełączające kolejno zdjęcia?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć tych znaczników i atrybutów HTMLa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>