Mérei Tamás webdesigner

Tutorial: jQuery – egyszerű képváltó

Szerző:   |   2011-02-04

Egyszerű képváltogató megoldás jQuery-vel. Megint belefutottam a jó öreg IE last-child problémába, úgyhogy erre is mutat megoldást a videó. Felejtsétek el amit a toggle-ról mondtam, ehhez a feladathoz nem jó megoldás, ki is vettem a videóból. Majd csinálok erre is egy értelmes példát.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


<div id="container">
	<ul id="navigation">
		<li>első</li>
		<li>második</li>
		<li>harmadik</li>
		<li>negyedik</li>
		<li>ötödik</li>
		<li>hatodik</li>
	</ul>
	<div class="clear"></div>
	<div id="main">
		<div><img src="1.jpg"></div>
		<div><img src="2.jpg"></div>
		<div><img src="3.jpg"></div>
		<div><img src="4.jpg"></div>
		<div><img src="5.jpg"></div>
		<div><img src="6.jpg"></div>
	</div>
</div>

CSS forráskód


body {
	background: url('bg_body.png') repeat-x #ddd;
	font-family: tahoma;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
}
div#container {
	width: 600px;
	margin: 100px auto;
	border: 4px solid #fff;
	background: #fff;
	-webkit-box-shadow: 10px 10px 0px #8d8d8d;
	-moz-box-shadow: 10px 10px 0px #8d8d8d;
	box-shadow: 10px 10px 0px #8d8d8d;
}
div#main {
	margin: 0;
	width: 600px;
	height: 400px;
	overflow: none;
}
div#main div {
	width: 600px;
	height: 400px;
	margin-bottom: -400px;
	display: none;
}
/* megjeleníti az első blokk tartalmát */
div#main div:first-child {
	display: block;
}
ul#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul#navigation li {
	float: left;
	width: 97px;
	text-align: center;
	padding: 15px 0;
	background: #000;
	color: #fff;
	margin-right: 4px;
	margin-bottom: 4px;
	cursor: pointer;
}
ul#navigation li:last-child {
	margin-right: 0;
	width: 95px;
}
ul#navigation li:hover {
	background: #0a8d20;
}
div.clear { clear: both; }

jQuery forráskód


$(document).ready(function() {

	var nav_last = {
	  'width' : '95px',
	  'margin-right' : '0',
	}

	$("#navigation li:last-child").css(nav_last);

	$("#navigation li").click(function(){
		var nav = $(this).index()+1;
		$("#main div").css("display","none");
		$("#main div").css("opacity","0");
		$("#main div:nth-child("+(nav)+")").fadeTo('slow', 1);
	});

});

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

56 hozzászólás

  1. Kőrmendi Tamás
    2015. augusztus 17. hétfő - 08:21

    Szia Tamás!
    Sajnálom hogy nem kaptam választ az üzenetemre arra gondolok talán valami technikai problémáról van szó ezért megpróbálom még egyszer feltenni kérdésem kérésem. Nekem hover eseményre cserélődnek a képek, de azt szeretném elérni ha lehúzom a kurzort az li-ről akkor egyik képet se lehessen látni csak akkor legyen látható a megfelelő kép ha ráhúzom az li-re a kurzort. Segítséged előre is köszönöm.

    • cyrex
      2015. augusztus 17. hétfő - 08:56

      Átlag heti 20 kérdés jön, még ilyenkor nyáron is. Jelenleg is van kb. 30 ami sorban áll. Ha mindenkinek megcsinálnám amit kér, egész nap ezzel foglalkoznék.

  2. Vincze Bence
    2015. február 3. kedd - 15:06

    Hello,

    megcsináltam mindent kéne működnie de Elem Megtekintésénél látom hogy berakott a és tagek közé egy #shadow-root ot és azon belülre rakta a et, ami így üres.

    Hogy tudnám azt a a#shadow-rott ot eltüntetni onnan?

    Mert amúgy midnen fájl ugyanúgy néz ki mint nálad.

    annyi a különbség hogy a WP4.1 miatt nem index.html fájlom van hanem kezdolap.php m. de így is működnie kéne nem?

    Köszi előre is

    • cyrex
      2015. február 10. kedd - 19:20

      Nem akad össze valami másik JS-el? A bővítmények is használnak csomó JS-t.

    • kezdő
      2015. június 12. péntek - 13:30

      Szia Tamás.
      Én abba kérném a segítséged, ha én a képváltást már a kurzor ráhúzásánál szeretném megvalósítani akkor mit kell megváltoztatni.

    • cyrex
      2015. július 17. péntek - 15:47

      click helyett hover kell akkor

  3. SWDsoft
    2013. február 10. vasárnap - 17:06

    Szia Cyrex!
    Csak szólok hogy ezt a scriptedet felhasználtam az oldalamhoz. Itt a weboldal: http://nezzedprog.nezzed.hu. Milyen szerinted?

    • cyrex
      2013. február 10. vasárnap - 18:28

      Jó lett 🙂 Használd, azért van.

    • SWDsoft
      2013. február 10. vasárnap - 21:36

      Ja és még egy kérdés, hogy ott vannak a menüpontok a képváltónál. Szerinted mit lenne érdemes ráírni? Ugyanis elég bénán náz ki hogy mindegyiken az van hogy Hírek 😛

    • cyrex
      2013. február 10. vasárnap - 22:43

      Gondolom az adott cikk címét lenne érdemes. Ha nem fér ki, akkor X karakter után elvágni és …-ot mögé tenni.

    • Szobek
      2014. február 20. csütörtök - 08:50

      SWDsoft: szia! megnéztem az oldaladat kiváncsiságból és van egy kis hiba vele, ami miatt valószínűleg a reg sem fog működni meg a beléptetés sem. A session nem indul el. van erre egy egyszerű megoldás, ami kiküszöböli, bár biztos van ennél tisztább is, de átmenetileg használd a nyitó tag után az ob_start() függvényt, és megszűnik a problémád. Elvileg ha jól tudom, akkor ez elkezdi pufferelni, és csak csomagban küldi az adatokat.

  4. beda
    2012. október 21. vasárnap - 12:40

    azt hogylehet megcsinálni hogy automatikusan váltson képet?

    • SWDsoft
      2013. február 10. vasárnap - 17:05

      Úgy hogy megtanulsz programozni.

    • cyrex
      2013. február 10. vasárnap - 18:29

      Van egy jQuery carousel tutorial az oldalon, abban automatikusan történik a képváltás.

  5. horvéth róbert
    2012. április 23. hétfő - 17:07

    body{
    background:#222;
    }
    #dok1{
    margin:auto;
    width:498px;
    border:1px solid #FFF;
    }

    #dok1 a{
    color:#FFF;
    text-decoration:none;
    display:block;
    float:left;
    background:#444;
    padding:10px;
    border:1px solid #FFF;
    }
    #dok1 a:hover{
    background:#777;
    }
    .active{
    background:#FFF;
    color:#000;
    }
    htm:

    Főoldal
    Szolgáltatások
    Vendégkönyv

    nem működik

  6. horvéth róbert
    2012. április 23. hétfő - 16:43

    Megadtam egy class – t és a css – ben hozzárendeltem egy színt és nem működik!!!

    És mielőtt megkérdeznés, igen a html – ben lévő class – nak a neve megegyezik a css – ben lévő class nevéve!

  7. krisztián
    2012. február 5. vasárnap - 12:29

    NAgyon jó, csak széles. Melyik fájlban tudom az egész szélességét megváltoztatni? Köszönöm előre is!

    • cyrex
      2012. február 11. szombat - 23:01

      A CSS-ben.

  8. KMartinR4
    2011. november 20. vasárnap - 16:34

    Nagyon jó, bár azt lehetett volna berakni, hogy amikor először megnyitják az oldalt, akkor az első kép legyen “active” class-ban. Nekem nem okoz gondot, megoldottam egy “:first-child”-dal, csak a végére még belerakhattad volna.
    Amúgy nagyon jó minden, köszi! 🙂

  9. SzaZso
    2011. október 19. szerda - 16:58

    Tök jó ez a képváltó esetleg nem tudnál egy olyat ami magától változtatja meg képet? (Például van egy fejléc aminek a háttere head.png, és meghatározott időnként, vagy az oldalra visszatéréskor átváltozzon head2.png-re)

  10. soma
    2011. szeptember 21. szerda - 18:43

    Helló!

    Lenne egy kérdésem, hogyan tudnám azt megcsinálni, hogy az aktív menüpontra tegyen egy képet? Egy átlátszó PNG-t szeretnék rátenni.

  11. Sunny
    2011. június 3. péntek - 15:13

    Szia!
    Rég írtam már, most szembekerültem egy olyan problémával, hogy az oldalon a középső content rész menüre kattintva változik, a két sidebar tartalma állandó. Az egyik sidebar tetején szerepel egy kép, amit szeretném, ha menüpontonként változna, de csak a kép.

    Segítséged előre is köszönöm!

  12. Bence
    2011. március 3. csütörtök - 19:44

    Szia!
    Én a .addClass miatt írok! Abban kérném segítségedet, hogyha én azt akarom, hogy pl egy HTML-be csinálok egy táblázatot és minden mezőbe bekérek egy adatot és ha nem megfelelő adatot írt be akkor piros lesz a háttere?
    Amúgy jól a videók!!! Köszi!

  13. Stilen
    2011. február 27. vasárnap - 11:26

    $(document).ready(function() {
    var nav_last = {
    “width” : ’95px’
    “margin-right” : ‘0’
    }
    $(“$navigation li:last-child”).css(nav_last);

    $(“#navigation li”).click(function() {
    $(“#navigation li”).removeClass(“active”);
    $(this).addClass(“active”);
    var nav = $(this).index()+1;
    $(“#main div”).css(“display”,”none”);
    $(“#main div:nth-child(“+(nav)+”)”).fadeTO(‘slow’,1);
    });
    });

    ebben mi a hiba mert nekem nem működik…:(

    • Pöti
      2011. március 1. kedd - 20:06

      $(document).ready(function(){
      var nav_last = {
      ‘width’ : ’95px’,
      ‘margin-right’ : ‘0’
      }
      $(“.navigation li:last-child”).css(nav_last);

      $(“.navigation li”).click(function(){
      $(“.navigation li”).removeClass(“active”);
      $(this).addClass(“active”);
      var nav = $(this).index()+1;
      $(“.main div”).css(“display”,”none”);
      $(“.main div:nth-child(“+(nav)+”)”).fadeTo(‘slow’,’1′);
      });
      });

      Tessék, csak én nem id-t írtam a divekhez hanem class-t ezért a .al kezdődő cuccosokat cseréld le # <- ilyenre mert gondolom id-t írtál a divekhez 🙂

    • mori
      2012. július 10. kedd - 22:22

      az a baj, hogy a javascript és jquery betűérzékeny, amikor fadeTO helyett próbáld a fadeTo-t:-) vagyis csak a kezdőbetű nagy! és a ‘slow’ sem jól szerepel, nem aposztróf hanem macskaköröm kellene:-) “slow”

  14. Menyus
    2011. február 7. hétfő - 19:59

    Nagyon szép az új design!

  15. Checco
    2011. február 6. vasárnap - 17:13

    Sziasztok lenne egy kérdésem!
    A wordpress-t szeretném feltenni a tárhelyemre, ez sikerül is de viszont nem sikerül a telepítés után a többi a wp-config-valami-ben megadtam az adatokat de hiába mert a tárhelyen azokat nem fogadta el, legalább is nem mindet! ha valaki tud segíteni akkor kérem segítsen!Nagy szükségem lenne rá. Checco

    • Ps
      2011. február 6. vasárnap - 18:03

      A “wp-config-sample.php” -t nevezd át “wp-config.php” -ra/re
      Akkor jó lesz, ha mégsem akkor rosszul töltötted ki az adatokat.

      Üdv.: Ps

    • cyrex
      2011. február 6. vasárnap - 18:05

      Ezt egyébként jó esetben a WordPress telepítő elvégzi helyetted, elvileg neked nem nagyon kell írogatni a configba.

    • Ps
      2011. február 6. vasárnap - 18:13

      Ez teljesen így van ahogy írtad, ha nincs “wp-config.php” nevű fájl, akkor a telepítés során fogja beadni a WordPress telepítő rendszer, és akkor ott kell kitölteni az adatokat.

  16. Checco
    2011. február 6. vasárnap - 16:57

    Cyrex ez az új dizájn egyszerűen TÖKÉLETES!!!
    Nekem nagyon tetszik! Checco

    • Brien
      2011. február 6. vasárnap - 17:11

      Sztem is nagyon jól néz ki, pont videókat nézegetek…
      Aztán nézem a másikat… és új a desing 🙂

      SZÉÉP

    • Checco
      2011. február 6. vasárnap - 17:14

      Ja sztem is nagyon KIRÁLY!
      Cyrex forever!!!

    • SPiLeR
      2011. február 6. vasárnap - 21:42

      nekem is tetszik csak hiányolom onnan lentről az cyrex lezáró taget az sztem tök vicces/ötletes/ötletes volt 😀 ha valaki

    • SPiLeR
      2011. február 6. vasárnap - 21:43

      a ha valakit azt nem is írtam le csak azt hogy

    • SPiLeR
      2011. február 6. vasárnap - 21:43

      úgy tűnik nem mutatja na minde1 😛

  17. Takasi98
    2011. február 5. szombat - 18:39

    frameset
    erre gondoltam ….

  18. Takasi98
    2011. február 5. szombat - 18:37

  19. Takasi98
    2011. február 5. szombat - 18:15

    JaJ én **** nem IFRAME hanem erre gondoltam :

  20. Takasi98
    2011. február 5. szombat - 18:08

    Ez lehet hogy nem ide tartozik de kéne segítség IFRAME használok az oldal tetejére beleírom a index.php ba e nekem ugy néne hogy ha rámegyünk a Kezdölpara (behozza a index.php-t) akkor a IFRAME ne jelenjen meg …. Ezt hogy

  21. Patricio
    2011. február 5. szombat - 13:23

    Rá kattintok a dowloadra erre ez jön be http://code.jquery.com/jquery-1.5.min.js

    • SPiLeR
      2011. február 5. szombat - 13:44

      annyi az egész am hgy az egész szöveget lemented egy txt fájlba utána meg a kiterjesztését megváltoztatod txt helyett js-re

    • cyrex
      2011. február 5. szombat - 14:34

      Nem muszáj lementeni, az általad írt linket is behúzhatod a fájlodba, ahogyan én is tettem a videóban.

  22. Ádám
    2011. február 5. szombat - 08:51

    Vagány 🙂

  23. Patricio
    2011. február 5. szombat - 08:45

    Az a jQuery szöveget melyet be kell másolni hol találom?Mert a weboldalon nem találom…

    • cyrex
      2011. február 5. szombat - 10:30

      jQuery.com főoldal, bazi nagy download gomb.

    • SPiLeR
      2011. február 5. szombat - 12:06

      amúgy ezel egy nagyon jó ötletett adtál 😀

    • SPiLeR
      2011. február 5. szombat - 12:08

      elsőnek is nem ide akartam írni ezért bocsánat másodjára meg kicsit bonyolult az ötletem úgyhogy azt inkább hagyom

    • Patricio
      2011. február 5. szombat - 13:22
  24. SPiLeR
    2011. február 4. péntek - 23:18

    zseniális 😀 hogy te ezeket honnan tanulod azt nem tom de nagyon köszi hogy megosztod velünk 😀

    • cyrex
      2011. február 5. szombat - 10:28

      Ott van a dokumentáció a jQuery oldalán, az alapján bármit össze lehet rakni.

    • SPiLeR
      2011. február 5. szombat - 10:54

      ja jó amúgy a vidónak lesz második része mert úgy érzem befejezetlenül hagytad főleg hogy észrevettem egy kis bakit a kódban

    • cyrex
      2011. február 5. szombat - 10:59

      Tudom, hogy nem jó így, eleve a toggle sem működik megfelelően, mert egymásra nyitogatja a képeket. Majd lehet, hogy játszadozok még vele egy kicsit, csak most nincs rá időm. Te milyen hibát találtál?

    • SPiLeR
      2011. február 5. szombat - 11:58

      ezt toggle-ös hibát amit te is mondtál

  25. SPiLeR
    2011. február 4. péntek - 22:53

    ez aztán gyors volt:O 😀

Hozzászólás

Legújabb hozzászólások