Sprawdź najnowsze wpisy:

[jQuery] Galeria z podmianą obrazków

By

[jQuery] Galeria z podmianą obrazków

Przy użyciu jQuery zrobienie galerii z podmianą obrazków po kliknięciu to przysłowiowa bułka z masłem. Oczywiście zadbamy o to, żeby osoby z wyłączonym JavaScript(?!) też mogły zobaczyć duże obrazki. W tym przykładzie jako menu posłużą nam miniaturki obrazków, ale przy odrobinie dobrej woli możesz je zamienić na zwykłe menu tekstowe.

demo | pobierz(.zip)

Materiały

Użyję czterech fotografii z http://sxc.hu przedstawiających Paryż nocą. Oczywiście bez problemu może być ich dowolna ilość. Ważną sprawą jest, żeby zarówno obrazki jak i miniaturki miały tą samą wysokość i szerokość. W moim przypadku jest to 620px na 441px, natomiast miniaturki mają 140px na 100px. Nazwy obrazków nie mają żadnego znaczenia. Dobrze mieć porządek w projekcie, więc swoim miniaturką dodałem „-mini” na końcu nazwy. Ja użyłem po prostu:
1.jpg
2.jpg
3.jpg
4.jpg
oraz
1-mini.jpg
2-mini.jpg
3-mini.jpg
4-mini.jpg

Do dzieła

Zaczniemy od prostego szablonu dokumentu xHTML, takiego samego jak w [jQuery] Wysuwany boczny panel menu (tam jest opisany kod – jeśli czegoś nie rozumiesz). JavaScript na potrzeby tego tutka umieścimy w znaczniku <script>. W prawdziwych projektach lepiej umieszczać js w osobnym pliku np. skrypt.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
	<title>Galeria z podmianą obrazków w jQuery</title>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
	<link rel="stylesheet" href="galeria.css" type="text/css" />
 
	<script type="text/javascript">
	<!-- skrypt jQuery -->
	</script>
 
 
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
	<![endif]-->
</head>
<body>
 
 
<!-- treść strony -->
 
</body>
</html>

Teraz dodamy naszą galerię do kodu.

<div id="kontener">
 
	<div class="galeria">
		<img class="duzy" src="obrazki/1.jpg" alt="Duże zdjęcie Obrazek 1" />
	</div>
 
	<div class="miniatury">
		<ul>
			<li><a href="obrazki/1.jpg" title="Obrazek 1"><img src="obrazki/1-mini.jpg" alt="miniaturka Obrazek 1"/></a></li>
			<li><a href="obrazki/2.jpg" title="Obrazek 2"><img src="obrazki/2-mini.jpg" alt="miniaturka Obrazek 2" /></a></li>
			<li><a href="obrazki/3.jpg" title="Obrazek 3"><img src="obrazki/3-mini.jpg" alt="miniaturka Obrazek 3" /></a></li>
			<li><a href="obrazki/4.jpg" title="Obrazek 4"><img src="obrazki/4-mini.jpg" alt="miniaturka Obrazek 4" /></a></li>
		</ul>
	</div>
 
</div>

Jak widzisz kod jest bardzo prosty. kontener to pojemnik na całą galerię, posłuży do wyśrodkowania galerii. <div> galeria to pojemnik na powiększony obrazek i nazywa się po prostu duzy, zawiera pierwszy obrazek z listy. Kolejny div to miniatury tam znajduje się lista <ul> z miniaturami naszych obrazków. Mamy tam linki <a> prowadzące do oryginalnych obrazków, a ich zawartość to obrazki odpowiednich miniaturek.

CSS

Czas nadać wygląd naszej galerii. Na początek nadamy tło i wyśrodkujemy kontener.

html, body  {
	background: #2e3547 url(img/bg.jpg) no-repeat 50% 0%; 
	margin: 0px; 
	padding: 0px;
}
 
img {
	border: 0px;
	padding: 0px;
}
 
a:focus { 
	outline:none; /*usuwanie niebieskiej obwódki w FF*/
}
 
#kontener {
	border: 1px solid #4b5673;
	margin: 70px auto 40px auto;
	width: 640px;
}

Moja galeria będzie wyglądać tak, że miniaturki będą pod dużym obrazkiem. Jeśli wolisz mieć je z boku zmodyfikuj odpowiednio swój CSS.

.galeria {
	margin: 10px;
}
 
.miniatury {
margin: 10px 0px;
}
 
.miniatury ul {
	list-style: none;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}
 
.miniatury li {
	display: inline; /*usuwa podwójne marginesy w IE*/
	float: left;
	margin: 0px 10px;
	padding: 0px;
}
 
.miniatury li a img{
	display: block;
}

Wygląda to tak:
Galeria z podmianą obrazków w jQuery

jQuery

Zostało nam już tylko kilka linijek kodu js i finisz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(function() { 
 
	$('.miniatury ul li:first-child a img').css('opacity',0.5);
 
	$(".miniatury a").click(function(){
 
		$('.miniatury a img').css('opacity',1);
		$(this).children().css('opacity',0.5);
 
		var sciezka = $(this).attr("href");
		var tytul = $(this).attr("title");
 
		$(".duzy").attr({ src: sciezka, alt: tytul });
 
		return false;
	});
 
});

Linia1: Początek jQuery.
Linia3: Nadajamy pierwszej miniaturce przezroczystość 50%.
Linia5: Zaczynamy opisywać działanie po kliknięciu w link miniaturki.
Linia7: Musimy ustawić przezroczystosc miniaturek na 100%.
Linia8: Nadajemy klikniętej miniaturce przezroczystosc 50%.
Linia10: Zapisujemy scieżkę podaną w atrybucie href klikniętego linku.
Linia11: Zapisujemy tytuł podany w atrybucie title klikniętego linku.
Linia13: Podmieniamy atrybuty src i alt w obrazku duzy, dzięki temu obrazek zmienia się na nowy wybrany z miniaturek.
Linia15: Oznacza, że przeglądarka nie ma przechodzić pod adres z href w klikanym linku.

Tu możesz zobaczyć końcowy efekt demo, a tu ściągnąć wszystkie pliki pobierz(.zip). Działanie testowałem pod IE 6, IE7, FF, Operą, Safari.

Zapraszam do komentowania i subskrybcji kanału RSS

—
edit:
Można podmienić linię 13 na:

$(".duzy").fadeOut('fast',function () {$(this).attr({ src: sciezka, alt: tytul }).fadeIn('slow');});

żeby uzyskać efekt zanikania i pojawiania się.

Be Sociable, Share!

Zapisz się na newsletter

Nienawidzę spamu tak samo jak Ty, dlatego obiecuję, że nigdy nie sprzedam, ani nie udostępnię nikomu Twojego adresu e-mail.

(W każdej chwili możesz się wypisać, klikając link na końcu każdego maila.)

Tagi: , , , ,


28 Komentarzy
  1. revert (Reply) poniedziałek 9 Listopad , 2009

    Fajna galeryjka, lubię taki minimalizm. Podoba mi się sposób w jaki prowadzisz tego bloga.
    Pozdrawiam!

    • Websta (Reply) poniedziałek 9 Listopad , 2009

      Dzięki, ciesze się. Pozdrawiam.

  2. Artur (Reply) środa 18 Listopad , 2009

    Bardzo dobry tutek, dlatego że tak prosty.
    Czy dałoby się zrobić tak, aby obrazki nie musiały być wszystkie w takim samym rozmiarze, tylko będzie ustalone, że ich max długość nie może przekroczyć x, a wysokość y?

  3. Artur (Reply) środa 18 Listopad , 2009

    Już nieważne. Poradziłem sobie. Dzięki wielkie za tutorial:)

    Pozdrawiam

  4. luke (Reply) czwartek 17 Grudzień , 2009

    Ładna galeria, a do tego bardzo przystępnie napisana. Szukałem sposobu na podmianę zdjęć i te parę linijek kodu jQuery spadło mi z nieba:)) Dziękuję.

  5. Adam (Reply) czwartek 4 Luty , 2010

    Bardzo fajna i prosta galeria

  6. stachel94 (Reply) sobota 20 Luty , 2010

    a dało by się dodać tekst pod obrazkiem zmienny wraz z obrazkiem?

  7. Dabrow (Reply) wtorek 23 Luty , 2010

    Przekopałem trochę net w poszukiwaniu prostego ale ładnego skryptu JS do galerii, ten mi najbardziej przypasował i nawet taki lamer jak ja poradził sobie z jego implementacją na stronie. Mam tylko 2 pytania (albo może prośby):
    - podobnie jak stachel94 – czy jest możliwość dodania zmiennego tekstu pod ładowanymi zdjęciami? Oprócz klasycznego alt’a nad miniaturą
    - czy jest możliwe wpisanie do JS’a opcji loadera? Chodzi mi o to że mając sporą galerię zdjęć do załadowania trwa to trochę (thumbnail’e nie są duże ale ich ilość tak) – w tym czasie pokazują się niespecjalne efekty budowania listy oraz ładowania pierwszego wyświetlanego obrazka – gdyby w tym czasie pojawiał się jakiś nieduży animowany gif np. byłoby to bardzo fajnym rozwiązaniem – biorę wtedy to w ciemno ((-;
    Pozdrawiam serdelecznie!

  8. Websta (Reply) wtorek 23 Luty , 2010

    @stachel94 i Dabrow:
    Linia 11 w jQuery przechwytuje tytuł linku. Do kodu html można dodać jakiś pojemnik typu:

    <div id="opis">Opis pierwszej fotki</div>

    a w kodzie jQuery po linil 13 dać:

    $("#opis").html(tytul);

    @Dabrow:
    Opcji preloadera nie przewiduje kod pokazany w tutorialu.

    Pozdrawiam.

  9. Dabrow (Reply) wtorek 23 Luty , 2010

    ok, dzięki – jeszcze dziś to posprawdzam – bo jestem w trakcie zmiany z przyciężkawego już Simpleviewer’a na tenże własnie JQuery…

    • Dabrow (Reply) czwartek 25 Luty , 2010

      Z „preloaderem” poradziłem sobie w prosty sposób – wystarczy jako background kontenera z miniaturami wrzucić odpowiednio przygotowanego animowanego gifa. W moim przypadku to pomogło – zanim załadują się wszystkie miniatury „coś tam w tle” się pokazuje. Minus taki że przy odświeżeniu czy powrocie do danej galerii ten „preloader” odpala ponownie – mimo że przeglądarka ładuje obrazki z cache’a więc raczej szybciutko. Ale…. coś się potem wymyśli jeszcze (-;
      Pozdrawiam

      • Websta (Reply) czwartek 25 Luty , 2010

        Nadaj tym miniaturkom wymiary. Nie będzie tego problemu z budowaniem listy.

  10. DUCHu (Reply) niedziela 25 Kwiecień , 2010

    Fajna galeria, a masz moze rozwiazanie na problem jej integracji z jakims lightboxem, np lytebox?
    Tak, zeby po klikcieciu pelnego obrazka, otwieral sie lytebox z opcja przewijania (nastepny, poprzedni).

    • Websta (Reply) niedziela 25 Kwiecień , 2010

      Wiesz to jest przede wszystkim tutorial, który ma pokazać kilka prostych „chwytów”, a jedynie przy okazji wyszło gotowe rozwiązanie.
      Co do połączenia tego z lightboxem to raczej byłby spory problem. Musiałby być jeszcze trzeci rodzaj obrazków, dodatkowo jakaś ich lista do obsługi lightboxa.
      Jest to do zrobienia, ale z pewnością nie 2 linijkami kodu i raczej nie warte zachodu.

  11. cheep (Reply) środa 5 Maj , 2010

    a jak ustawic miniaturki po prawej stronie…?

  12. Mechanik (Reply) środa 20 Październik , 2010

    Witaj, a jakiś skromny efekt fade dla górnego obrazka gdzie należałoby wstawić ? Nie chcę rozgrzebać kodu a widzę że znasz się na rzeczy.
    Pozdrówka.

  13. Mechanik (Reply) środa 20 Październik , 2010

    Dopiero zaczynam…

    $(„.duzy”).attr({ src: sciezka, alt: tytul }).css(„opacity”,”0.0″).animate({„opacity” : „0.99″},(„slow”));

  14. Websta (Reply) środa 20 Październik , 2010

    @Mechanik
    Dobry pomysł, rozwiązanie dodałem na końcu postu.

    Pozdrawiam.

  15. Mechanik (Reply) środa 20 Październik , 2010

    Znacznie lepiej;)

  16. bapraster (Reply) środa 29 Grudzień , 2010

    Udało mi się. Ale super zważywszy, że jestem początkujący jeśli chodzi o skryptowanie. Ale mam już pierwszą galerię na stronce.

    Mam tylko pytanko związane z tym, że chciałbym zrobić krok do przodu i dodać więcej zdjęć. Jak na razie udało mi się to zrobiłem 3 rzędy miniaturek i zmniejszyłem je przez co mieści mi się teraz 9 w wierszu. Chciałbym jednak dodać coś w rodzaju suwaka w sekcji miniaturek tak by widać ich było zaledwie kilka (5-6) i za sprawą tego suwaka odsłaniałaby się reszta. Jak takie coś wykonać? Fajnie by też było gdyby można było dodać przy zdjęciu przyciski „następne” i „poprzednie”. Czy to bardzo skomplikowane, żeby tą galerię tak przerobić?
    Z góry wielkie dzięki

    Nareszcie mam galerię!!! :D

  17. Łukasz (Reply) środa 9 Luty , 2011

    Witam. Oczywiście bardzo fajny skrypt – ale mam pytanie.
    Czy można ustawić aby obrazki przewijały się automatycznie, bez klikania ?

    • Websta (Reply) czwartek 10 Luty , 2011

      Dużo trzeba by dopisać, ale jest wiele wtyczek, które tak działają. Musisz poszukać :)

  18. brylinx (Reply) wtorek 12 Kwiecień , 2011

    Świetny skrypt !
    Pytanie:
    - zamieniłem funkcję click na mouseover. Czy po takiej zmianie da się wprowadzić funkcję, by po kliknięciu miniaturki zdjęcia, oprócz podmiany zdjęcia w galerii przekierowywał na inną stronę?
    Pozdrawiam

    • Websta (Reply) wtorek 12 Kwiecień , 2011

      Jeśli dobrze Cię rozumiem, to da radę. Zdarzenia te nie wykluczają siebie.

      Pozdrawiam.

  19. brylinx (Reply) wtorek 12 Kwiecień , 2011

    Mógłbyś podpowiedzieć jak to zrobić?
    Przykładowe zastosowanie skryptu: http://www.kw.org.pl/galeria/index.html
    Pod pierwszy button podpięty jest adres główny. Chciałbym aby po najechaniu na niego również zmieniało się zdefiniowane wcześniej zdjęcie pod menu. W tej chwili zdjęcia zmieniają się, jeżeli nie będą podpięte pod nie znaczniki href z adresem innym niż obrazka.
    Pozdrawiam i dzięki za pomoc.

    • Websta (Reply) środa 13 Kwiecień , 2011

      Jeśli chodzi o takie menu, to trochę nie tędy droga. Wypadało by to zrobić w samym CSS bez js, a dopiero potem dodać efekt np. fadeIn/Out.

      Można też w samym js, ale musisz wtedy jakoś wygenerować nazwę obrazka, który się pojawi, np. operując na stringach pobieranych z src w img.

      Ogólnie przerabianie tego prostego przykładu galerii na coś zupełnie innego to lekko partyzantka ;)

  20. brylinx (Reply) środa 20 Kwiecień , 2011

    A jednak udało się ;)
    Poniżej skrypt, może się komuś przyda ;)
    html:

    Galeria z podmianÄ… obrazkĂłw w jQuery

    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
57
58
59
60
61
62

     
		$(function() { 
 
			$('.miniatury ul li:first-child a img').css('opacity',0.3);
 
			$(".miniatury a").mouseover(function(){
 
				$('.miniatury a img').css('opacity',1);
				$(this).children().css('opacity',0.5);
 
				var sciezka = $(this).attr("rel");
 
 
				var tytul = $(this).attr("title");
 
				$(".duzy").fadeOut('fast',function () {$(this).attr({ src: sciezka, alt: tytul }).fadeIn('slow');});
 
				return false;
			});
 
		});
 
 
 
	<!--[if lt IE 8]&gt;-->
 
 
 
 
 
 
 
 
 
 
 
 
 
  <a href="1.html" title="1" rel="nofollow">
 
 
 
  </a>
 
 
 
 
 
  <a href="2.html" title="2" rel="nofollow">
 
 
 
  </a>
 
 
 
 
  <a href="3.html" title="3" rel="nofollow">
 
 
 
  </a>
  21. brylinx (Reply) środa 20 Kwiecień , 2011

    css bez zmian