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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...