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ó.

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

Videó

Videó

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);
	});

});

56 hozzászólás

  1. 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.

    • 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. 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

    • 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.

    • 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.

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

      click helyett hover kell akkor

  3. 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?

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

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

    • 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 😛

    • 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.

    • 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. 2012. október 21. vasárnap - 12:40

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

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

      Úgy hogy megtanulsz programozni.

    • 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. 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. 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. 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!

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

      A CSS-ben.

  8. 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. 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. 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. 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. 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. 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…:(

    • 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 🙂

    • 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. 2011. február 7. hétfő - 19:59

    Nagyon szép az új design!

  15. 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

    • 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

    • 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.

    • 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. 2011. február 6. vasárnap - 16:57

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

    • 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

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

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

    • 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

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

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

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

      úgy tűnik nem mutatja na minde1 😛

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

    frameset
    erre gondoltam ….

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

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

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

  20. 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. 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

    • 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

    • 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. 2011. február 5. szombat - 08:51

    Vagány 🙂

  23. 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…

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

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

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

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

    • 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

    • 2011. február 5. szombat - 13:22
  24. 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 😀

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

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

    • 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

    • 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?

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

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

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

    ez aztán gyors volt:O 😀

Hozzászólás mégsem

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...

  • Bootstrap carousel

    https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery...

  • Bootstrap carousel

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá...