Sprawdź najnowsze wpisy:

[jQuery] Galeria z podmianą obrazków

By Websta wtorek 20 Październik , 2009

[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

Dodaj do:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • LinkedIn
  • Technorati
  • Wykop
  • RSS
  • Twitter
  • BLIP - Bardzo Lubię Informować Przyjaciół
  • Wrzuć to na Flakera - powiadom swoich Znajomych
  • grono.net - internetowa społeczność przyjaciół
  • Dodaj link - Linkr.pl - tylko ciekawe linki

Tagi: , , , ,


15 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…?


Dodaj komentarz