Mérei Tamás webdesigner

Tutorial: jQuery – képgaléria

Szerző:   |   2011-02-16

Dinamikus képgaléria, mely kiírja képek számát és azt, hogy éppen hányadik képnél tartunk. A galérián belül lehet lépkedni jobbra-balra, ha elértük az utolsó elemet, utána visszaugrik az első képre.

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

Videó

HTML forráskód


<html>
<head>
	<title>jQuery gallery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/slideshow.js"></script>
	<link rel="stylesheet" href="style.css"/>
</head>
<body>

	<div id="container">
		<div id="gallery">
			<img src="images/01.jpg" alt="Mező"/>
			<img src="images/02.jpg" alt="Fodros hullámok"/>
			<img src="images/03.jpg" alt="Esőcseppek"/>
			<img src="images/04.jpg" alt="Téli táj"/>
			<img src="images/05.jpg" alt="Naplemente"/>
			<img src="images/06.jpg" alt="Vízcsepp"/>
			<img src="images/07.jpg" alt="Őszi falevelek"/>
		</div>
		<div id="navigation">
			<div id="navigation_left">
				<a id="prev_image">előző</a>
			</div>
			<div id="navigation_title">
				<div id="current_image_title"></div>
				<span id="all_images_num"></span> / <span id="current_image_num"></span>
			</div>
			<div id="navigation_right">
				<a id="next_image">következő</a>
			</div>
			<div class="clear"></div>
		</div>
	</div>

</body>
</html>

CSS forráskód


* {
	padding :0;
	margin: 0;
	font-family: tahoma;
	font-size: 11px;
}
a {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	text-decoration: underline;
}
body {
	background: #ddd;
}
div.clear {
	clear: both;
}
div#container {
	width: 600px;
	margin: 100px auto;
	background: white;
	padding: 10px;
	-webkit-box-shadow: 5px 5px 0 #999;
	-moz-box-shadow: 5px 5px 0 #999;
	box-shadow: 5px 5px 0 #999;
}
div#gallery {
	width: 600px;
	height: 400px;
}
div#gallery img {
	position: absolute;
}
div#navigation {
	padding: 10px 0;
}
div#navigation_left {
	width: 140px;
	float: left;
}
div#navigation_title {
	float: left;
	width: 320px;
	text-align: center;
}
div#navigation_right{
	float: left;
	width: 140px;
	text-align: right;
}
div#current_image_title {
	font-weight: bold;
	margin: 0 0 5px 0;
}

jQuery forráskód


$(document).ready(function() {
	var first_image = $("#gallery img:first-child");
	var last_image = $("#gallery img:last-child");

	$("#gallery img").css("opacity",0);

	// megszámoljuk, hogy hány kép van összesen
	$("#all_images_num").text($("#gallery img").length);

	// az első elemet megjelenítjük
	first_image.addClass("current").css("opacity",1);
	
	// kiírjuk az első elem ALT attribútumát
	$("#current_image_title").text(first_image.attr("alt"));

	$("#current_image_num").text(1);

	$("#next_image").click(function() {
		var current_image = $("#gallery img.current");
		current_image.removeClass("current").animate({opacity: 0},1000);
		if(!current_image.is("#gallery img:last-child")) {
			current_image = current_image.next().addClass("current").animate({opacity: 1},1000);
		} else {
			current_image = first_image.addClass("current").animate({opacity: 1},1000);
		}
		$("#current_image_title").text(current_image.attr("alt"));
		$("#current_image_num").text(
			$("#gallery img").index(current_image)+1
		);
	});

	$("#prev_image").click(function() {
		var current_image = $("#gallery img.current");
		current_image.removeClass("current").animate({opacity: 0},1000);
		if(!current_image.is("#gallery img:first-child")) {
			current_image = current_image.prev().addClass("current").animate({opacity: 1},1000);
		} else {
			current_image = last_image.addClass("current").animate({opacity: 1},1000);
		}
		$("#current_image_title").text(current_image.attr("alt"));
		$("#current_image_num").text(
			$("#gallery img").index(current_image)+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!

65 hozzászólás

  1. Kovács Olivér
    2016. szeptember 2. péntek - 09:47

    Köszönöm, nagyon jó tutorial!

  2. Varesz
    2014. október 22. szerda - 21:29

    Szia!

    Ha képgalériának használnám, akkor azt hogyan adhatnám meg, hogy ne az első, hanem mondjuk a 4.képpel kezdődjön? (phpban paraméterben átadnám és onnan folytatná)

    • cyrex
      2014. november 23. vasárnap - 20:45

      Akkor ne az első elemre tedd a current class-t, hanem a negyedikre, és akkor onnan fogja indítani. Legalábbis elvileg, de nem emlékszem már pontosan hogyan működött, mert három éve írtam.

  3. Chris
    2014. június 12. csütörtök - 15:20

    Üdv Tamás!

    Régóta nézem a videóidat, nagyjából ebből tanultam meg webszerkeszteni. 😀

    Az lenne a kérdésem, hogy hogyan tudnám megcsinálni azt, hogy ne egy külön ablakban nyíljon a galéria hanem egy ilyen popup ablakban, és a háttér pedig sötétüljön el. Remélem érthetően írtam le 🙂

    A másik kérdés: hogyan tudnám megoldani a képfeltöltés az oldalra, úgy hogy ne kelljen mindig hozzáírni a forráskódban egy újabb img tag-et. Hogyan tudnám “dinamikusabban” megoldani?

    Előre is köszönöm a választ, egyébként nagyon hasznos videó volt, így tovább! 😀

    • cyrex
      2014. június 29. vasárnap - 19:02

      Sokféle képmegjelenítő JS plugin létezik. Én FancyBox és ShadowBox párti vagyok.

  4. Bence
    2014. június 3. kedd - 18:26

    Szia!
    Nekem az lenne a bajom hogy, JQuerivel az addClass és a removeClass nem működik.
    De 1.8 -as jquerim van.
    Miért?
    A válaszod előre is köszi!

    • cyrex
      2014. június 3. kedd - 20:00

      Nem tudom.

  5. Viktor
    2013. november 11. hétfő - 23:55

    Szia Tamás!

    Az alábbi probléma megoldásában kérném a segítséged (amit tudnod kell, nem vagyok sem programozó, sem webdesigner, másrészt – szerintem – nem szégyen az okosabbat kérdezni, hisz abból tanul az ember). Rendszergazdaként végeztem, de csatolt tárgyként tanultunk egy kis webfejlesztést, melynél az első félévi vizsgamunka egy saját készítésű weblap bemutatása volt (egyszerű lap, egyszerű megoldásokkal). Nem vagyok egy nagy webszakértő, de azért a HTML és a CSS azért nagyjából megy. Az oldal egy lapján jQuery-t is használtam (leszedtem, betettem, meghivatkoztam). Tökéletesen működik azóta is (nem szóltak, hogy gond lenne vele), ellenben szeretném egy kicsit fejleszteni a dolgot néhány új tartalommal, mivel egy élő honlapról van szó (http://tápai.hu/hun/private.html). A változtatások már nagyrészt el is készültek a gépemen, de sajnos egy folyamatosan visszatérő problémába futok bele minden jQuery-s képkezelő esetén, ez pedig a pozíciók. Ha ránézel a weblapra, akkor látod, hogy a fejléc együtt mozog a mindennel. A újabb variációban a fejlécet fixálni szeretném. Ezt position:fixeddel CSS-ben megoldottam és hibátlanul működik csak az a gondom, hogy az általam végignézett és számomra is tetszetős jQuery-s képváltók CSS-ében -szinte mindegyikben, úgy ahogy az általad megírt kódban is – a képek absolute pozícióban vannak és ezért a képek nem a fejléc alá csúsznak, hanem felette mennek el az oldal görgetése közben. Megróbáltam mindenféle pozíció egyvelegét, de vagy a fix fejléc felett megy el a kép vagy teljesen szétesik a dolog. Tudsz valami megoldást rá vagy mondjak le a fix fejlécről?
    Válaszod előre is köszönöm!
    Üdvözlettel:
    Viktor

    • cyrex
      2013. december 15. vasárnap - 16:40

      Használj z-index beállításokat! Annak legyen a legmagasabb indexe amit legfelülre szeretnél tenni, tehát jelen esetben a menüdnek.

  6. Anna
    2013. április 24. szerda - 15:48

    Szia!
    Nagyon jó ez a képgaléria. Szépen át is tudtam alakítani a saját oldalamhoz a megjelenését, az előző-következő felirat helyett pl. nyilakat raktam be. Viszont, szükségem lenne még egy ettől a képgalériától jobb oldalon elhelyezkedő miniatűröket tartalmazó “filmszalagra” is (jelen pillanatban kb. 4-5 kép férne nekem ki), amit lehet tekerni, és ha a kis képekre kattintok, akkor a nagy vetítőn az jelenik meg, de attól a nagyot is lehessen külön lapozni.
    Dreamweaverben dolgozom, ami megcsinálná nekem automatikusan scrollosra, de akinek csinálom, szintén nyilakkal szeretné. (nem mondom jobban néz ki, mint a szürke scroll görgő)
    Nem tudom mennyire volt érthető. (Még nem foglalkozom olyan régóta ilyen dolgokkal, igyekszem autodidakta módon, amit lehet megtanulni, megérteni.)

    • Anna
      2013. április 25. csütörtök - 12:45

      Tegnap óta sikerült megoldanom a problémát. Most már csak a kis képeket kellene “összekötni” a nagyokkal.
      Ha ebben tudnátok segíteni, annak nagyon örülnék! Előre is köszi.

  7. Krapu
    2013. február 6. szerda - 18:03

    Azzal indokolnám ezt a kérdést, (bocsi, hogy 2x írok) mert a honlapon php s képméretező van beépítve, és az álló képek eltorzulnak.

  8. Krapu
    2013. február 6. szerda - 17:58

    Szia Cyrex.

    Kérdésem az lenne, hogy meg lehetne e oldani az egészet úgy, hogy a kép ha netalán álló (pl. 600 x 800) akkor kövesse a méreteket.

    köszi.

  9. anonymus
    2012. december 6. csütörtök - 16:54

    Üdv nekem ezt írja:
    Uncaught ReferenceError: $ is not defined
    GET file:///D:/htdocs/js/jquery.js
    Mi lehet a gond?

  10. anonymus
    2012. december 6. csütörtök - 16:23

    Üdv!
    Nekem ezt írja a console…
    Uncaught ReferenceError: $ is not defined
    file:///D:/htdocs/js/jquery.jsFailed to load resource

    mi lehet a baj?

  11. Kundli
    2012. szeptember 10. hétfő - 19:01

    Hello! Megkaphatnám a tutorial video alatt készített weboldal forráskódját a style forráskódjával együtt?

    • cyrex
      2012. szeptember 10. hétfő - 20:57

      Szia, kiraktam az oldalra.

  12. Adorján
    2012. június 12. kedd - 10:59

    Hali! A videók alapján akarom megoldani a képgalériát, de valami nem jó! 🙁 A képek méretének kötelezően egyformának kell lennie?

  13. Adorján
    2012. június 12. kedd - 10:58

    Hali! A videók alapján akarom megoldani a képgalériát, de valami nem jó! 🙁 A képek méretének kötelezően egyformának kell lennie???

    • Adorján
      2012. június 12. kedd - 11:35

      Amúgy meg mindent megcsináltam és nem reagál a jquery.re! 🙁 Mi lehet az ok?

    • cyrex
      2012. június 12. kedd - 19:32

      Nem kötelező egyforma méretűnek lenniük, de könnyen belátható, csak akkor mutat szépen.

  14. gmka
    2012. június 6. szerda - 16:39

    Üdv, megint én. Vajon miért nem írja ki az összkép és kép értékeket és a képek neveit? Biztosan ugyanúgy csináltam mindent, ahogy a videón van. Kinyomtattam, átnéztem lépésről-lépésre, de semmit nem látok… Nekem nem akar működni…

    • cyrex
      2012. június 6. szerda - 22:29

      Konzol nem ír hibát? Class nevek azonosak a js fájlban és a HTML-ben?

  15. gmka
    2012. június 6. szerda - 00:28

    Sziasztok!
    Jól jönne egy kis segítség: már többször átnéztem, hogy nem rontottam-e el valahol, szerintem ugyanígy csináltam. De… Amikor indítom, minden képet végigpörget magától 2x, majd az utolsónál megáll, onnan pedig se előre, se hátra nem lehet lapozni. Már nem tudom, mit csináljak!

  16. tomi92
    2012. május 28. hétfő - 17:47

    Az mért van hogy teljesen ugy irtam a következő kódot ahogy te amikor az első elemet megjelenítjük:

    first_image.addClass(“current”).css(“opacity”, 1);

    semmi hibát nem ir ki a console.ba sem és mégsem jeleníti meg a képet..
    Tudnál segíteni, vagy valaki?

    • tomi92
      2012. június 5. kedd - 11:23

      Megoldotttam, működik már 😀

    • mrd
      2012. október 13. szombat - 16:49

      nos nekem valami ehhez hasonló problémám volna, csak annyival másabb, hogy hiába kattintok a feliratok egyikére hogy előre hátra, ugyan úgy az első képet látom csak, de alul írja ugyan úgy a fájl neveket.

  17. lockx
    2012. április 11. szerda - 21:52

    Üdv!
    Nagyon tetszett a videód és szerettem volna megvalósítani de nekem a jQuery valamiért nem működik.
    Mi lehet a hiba? (firefox-om van xp-n)

    • cyrex
      2012. június 6. szerda - 22:33

      A jQuery működik, kismillióan használják világszerte.

  18. Adam
    2012. április 10. kedd - 13:06

    hello!
    valaki el tudná küldeni a teljes projektet, mert mindent a video alapján csináltam mégsem működik

    a művem a megadott weboldalon megtekinthető

    előre is köszönöm!

  19. Laci
    2012. február 16. csütörtök - 19:33

    Sziasztok!

    Próbálom ezt a scriptet megvalósítani, statikus tartalommal tökéletes, de ha dinamikusan hozom létr az img- tageket akkor már nem működik, a gond, hogy a hozzáadott class hozzáadódik a navigation nevű divmenhez és utánna semmit nem csinál. Valaki tudja mit rontok el?

    • Ventosite.info
      2012. április 1. vasárnap - 08:59

      Forrás nélkül nem igazán. Ez így elég sovány.

  20. danix99
    2011. december 8. csütörtök - 18:34

    Üdv! Ha még meg van a fájl légyszíves kiírnád a forráskódokat? jquery már megvan

    • KMartinR4
      2011. december 18. vasárnap - 16:48

      Tessék, itt a forráskód, de néhány “a” tag-et kicseréltem “span”-re, ezen kívűl beraktam egy első és utolsó gombot is. 🙂

      ITT A KÓD:
      =======
      $(document).ready(function(){
      var first_image = $(‘#slideshow img:first-child’);
      var last_image = $(‘#slideshow img:last-child’);

      // Összes kép átlátszóvá tétele
      $(‘#slideshow img’).css(‘opacity’,0);

      // Első kép számának kiírása
      $(‘#current_pic_num’).text(1);
      // Összes kép számának kiírása
      $(‘#all_pic_num’).text($(‘#slideshow img’).length);

      // Első kép megjelenítése
      first_image.addClass(‘current’).animate({opacity: 1},1000);

      // Első kép ALT attribútumának kiírása
      $(‘#current_pic_title’).text(first_image.attr(‘alt’));

      // FIRST-re kattintás
      $(‘#first’).click(function(){
      var current_image = $(‘#slideshow img.current’);
      // Aktuális képről a CURRENT CLASS levétele
      current_image.removeClass(‘current’).animate({opacity: 0},1000);
      // Első képre ugrás
      current_image = first_image.addClass(‘current’).animate({opacity: 1},1000);
      // Aktuális kép címének kiírása
      $(‘#slideshow #current_pic_title’).text(current_image.attr(‘alt’));
      // Aktuális kép számának kiírása
      $(‘#slideshow #current_pic_num’).text($(‘#slideshow img’).index(current_image)+1);
      });
      // PREV-re kattintás
      $(‘#prev’).click(function(){
      var current_image = $(‘#slideshow img.current’);
      // Aktuális képről a CURRENT CLASS levétele
      current_image.removeClass(‘current’).animate({opacity: 0},1000);
      if(!current_image.is(‘#slideshow img:first-child’)){
      // Előző képre a CURRENT CLASS adása
      current_image = current_image.prev().addClass(‘current’).animate({opacity: 1},1000);
      } else {
      // Utolsó képre ugrás
      current_image = last_image.addClass(‘current’).animate({opacity: 1},1000);
      }
      // Aktuális kép címének kiírása
      $(‘#slideshow #current_pic_title’).text(current_image.attr(‘alt’));
      // Aktuális kép számának kiírása
      $(‘#slideshow #current_pic_num’).text($(‘#slideshow img’).index(current_image)+1);
      });

      // NEXT-re kattintás
      $(‘#next’).click(function(){
      var current_image = $(‘#slideshow img.current’);
      // Aktuális képről a CURRENT CLASS levétele
      current_image.removeClass(‘current’).animate({opacity: 0},1000);
      if(!current_image.is(‘#slideshow img:last-child’)){
      // Következő képre a CURRENT CLASS adása
      current_image = current_image.next().addClass(‘current’).animate({opacity: 1},1000);
      } else {
      // Első képre ugrás
      current_image = first_image.addClass(‘current’).animate({opacity: 1},1000);
      }
      // Aktuális kép címének kiírása
      $(‘#slideshow #current_pic_title’).text(current_image.attr(‘alt’));
      // Aktuális kép számának kiírása
      $(‘#slideshow #current_pic_num’).text($(‘#slideshow img’).index(current_image)+1);
      });
      // LAST-ra kattintás
      $(‘#last’).click(function(){
      var current_image = $(‘#slideshow img.current’);
      // Aktuális képről a CURRENT CLASS levétele
      current_image.removeClass(‘current’).animate({opacity: 0},1000);
      // Utolsó képre ugrás
      current_image = last_image.addClass(‘current’).animate({opacity: 1},1000);
      // Aktuális kép címének kiírása
      $(‘#slideshow #current_pic_title’).text(current_image.attr(‘alt’));
      // Aktuális kép számának kiírása
      $(‘#slideshow #current_pic_num’).text($(‘#slideshow img’).index(current_image)+1);
      });
      });

  21. KMartinR4
    2011. november 24. csütörtök - 18:42

    Heló cyrex! Nagyon jók a videók, sokat segítettek! 🙂

    Nekem a következő a problémám, Internet Explorer. Én IE8-at használok, csupán tesztelés gyanánt, ezért nincs rajta semmilyen bővítmény az alapértelmezetteken és egy avast! WebRep-en kívül.
    Tehát, nem akar működni a képgaléria semmilyen formában. Megjelenik az első kép, de ha az Előzőre vagy a Következőre kattintok, elhalványul a kép, de nem jön be helyette semmi. Mozilla és Google Chrome alatt simán megy minden, mi lehet a baj?

    Válaszodat előre is köszönöm!

    • KMartinR4
      2011. november 24. csütörtök - 18:52

      Ja, még annyit csináltam a képgalériával, hogy az “a” címkéket “span”-ra cseréltem és ezt a jQuery-ben és a CSS-ben is módosítottam. De azt mondtad ez mindegy. Lényegesebb változtatás, hogy beraktam még egy Első és Utolsó gombot, de nem nyúltam hozzá semmi máshoz a fent említetteken kívül, és ennek elvileg nem befolyásolja az Előző és Utolsó gomb működését.

    • KMartinR4
      2011. november 27. vasárnap - 16:21

      Időközben megoldódott a problémám, rossz napjai voltak az IE-nek, most, hogy feltöltöttem a szerverre végre működött. De azért köszi! 🙂

  22. peti
    2011. július 30. szombat - 18:28

    Heló!
    Azt szeretném megkrédezni, hogy azt melehet-e oldani, hogy ezt az index.php felett jelenitse meg. Arra gondolok itt, hogy mögötte minden elhalványul és a képek jönnek elő. Ne újh ablakba nyissa meg az lenne a lényeg.:)
    Előre köszi.

  23. Tamás
    2011. július 23. szombat - 21:28

    Siasztok!
    Arra lennék kiváncsi, van-e olyan összeállitástok, hogy milyen háttére milyen szinű betű a legmutatósabb?

  24. Sunny
    2011. július 10. vasárnap - 20:57

    Szia!
    Azt szeretném kérdezni, hogy ha ezeket a kódokat megírom, hogyan tudom a képgalériát egy másik honlap egy adott menüje alatt megjelentetni?

    Köszönöm a válaszod!

    üdv
    jani

  25. DoubleW
    2011. június 5. vasárnap - 02:22

    Szia!Én csak annyit szeretnék kérdezni hogy hogyan lehetne azt megcsinálni hogy ha pl rákatintok az egyik képre akkor megjelenitje telyes felbontásban??Mivel az én oldlaomon muszály volt ugy megcsinálni hogy 500×350 felbontásban legyenek alapbol.Köszi elöre is a helpet.

    • cyrex
      2012. június 6. szerda - 22:38

      Tegyél egy linket a képre, vagy egy lightboxot. Ja és a helyesírást is gyakorold. FYI: http://muszaj.hu/

  26. pico
    2011. május 3. kedd - 01:17

    Helloka na volt egy kis időm szóval rá feküdtem meg csináltam a kép nézegetőt és bele csempéztem a php es tutorialodat is szóval a képek az a inc mappában lévő php benn vannak sőt ahogy mondtad egy meg is a ciklust is meg oldottam szóval csak egy képet be rakok és kirakja mind a 800 db-ot
    és itt akadtam el meg csinálja rendesen de ha nagyobb a kép akkor az egész cumot betakarja de ha át méretezem mondjuk globálisan az egész img tegeket akkor hülyén néz ki mondjuk egy álitot képnél tudsz valami ötletet adni hogyan tugyam ki küszöbölni ezt a hibát

    • pico
      2011. május 3. kedd - 20:52

      hali tudom már nagyon unsz de kéne a segítséged valószínűleg nem ilyen re tervezted de ebe a tutoriálba bele supesztetem még egy tutoriálodat szóval 3 az egy benn bele préseltem a Flash lejácos tutoriálodat de mivel minden egy helyen van és ha így csinálom meg mint a képeket akkor egyszerre fogja letölteni mindegyik flash videót ami nagyon leterheli a szerot. tudsz valamit mondani nekem ere is.

  27. gaben
    2011. május 2. hétfő - 22:58

    Nekem az lenne a kérdésem hogy hogy lehet a képeket középre igazítani ha nem egyforma szélességűek? A magasságot úgy állítottam be hogy egyformák legyenek. Valahogy nem akar sehogy sem össze jönni. A választ előre is köszönöm.
    Amúgy nagyon jó az anyag.

    • cyrex
      2012. június 6. szerda - 22:39

      Legyenek egyforma szélességűek. Ez a képnézegető egyforma méretű képekhez lett kitalálva, csak úgy mutat szépen.

  28. GZoli79
    2011. április 14. csütörtök - 23:25

    Hello!
    Köszi a tutorialt! Nagyon hasznos volt. Viszont lenne egy kis problémám. Mindent aprólékosan úgy próbáltam csinálni, ahogy mutattad, viszont mikor lépkedek a következőre akkor az utolsóról nem lép az elsőre, mikor pedig az előzőre lépkedek az elsőről nem lép az utolsóra.
    Vagyis kihagyja Őket.
    Pl van 10 képem. A 10.-nél vagyok. Lépnék az elsőre, de csak elhalványul a 10. és nem jelenik meg az első.
    A számláló is marad 10/10-en. Viszont ha megint rányomok a következőre akkor a 2. már bejön.Visszafelé ugyanaz.
    Tudnál segíteni? Már annyit kínlódtam vele 🙂
    Köszi!

  29. kailee
    2011. március 13. vasárnap - 14:44

    helló
    Először is szeretnék gratulálni a videókhoz. nagyon hasznosak. Sokat tanultam belőlük.
    Ennél a videónál a képszerkesztésnél viszont gondom akadt nem akar működni a slideshow.js.
    ugyan az a probléma mint Kodeadnak volt. az első sorba már kiírja a hibát.
    $ is not defined
    $(document).ready(function(){

    a jquery behúz ás alatt nem tudom mit értesz én erre gondoltam, de ez benne van a html-be.
    mi lehet a gond ugyan azt csináltam amit a videóba csináltál.
    előre is köszi a választ.

    • cyrex
      2011. március 14. hétfő - 09:02

      Azért írja ezt ki, mert maga a jQuery keretrendszer nem kerül betöltődésre mielőtt a kódot elkezdené értelmezni a fordító. Ezt okozhatja az, hogy rossz URL-ről akarod behúzni, de az is lehet, hogy lokálban csinálod és a jQuery külső URL-ről jön, és ilyenkor tovább tart betölteni a külső URL-t. Töltsd le a legfrissebbet a gépedre és úgy húzd be script tagek között. jquery.com, főoldal download, a production mode jó lesz, annak a mérete is jóval kisebb.

      Gondolom az alapvető, hogy a jQuery legyen legfelül és csak utána kerüljön betöltésre a saját scripted, mert a jQuery szükséges ahhoz, hogy értelmezni tudja.

    • Krapu
      2013. január 28. hétfő - 22:03

      Sziasztok. Egy jó tanács! Én mindig kimásolom a forrás kódból a jQuery – t, és belső forrásként használom, Ennek oka az, hogy mindig localhost – on (nem internet eléréssel) dolgozom, és másképp nem müxik. Most is azt tettem és lám működik minden tökéletesen. Amúgy nagyon sok minden hasznos dolog van ezen az oldalon.

      Köszi Cyrex!

  30. Kodead
    2011. március 11. péntek - 12:05

    Leszedtem egy jqeryt, de nem a legjobb.

  31. Kodead
    2011. március 10. csütörtök - 20:30

    Helló nekem nem tudom miért de nem működik a javascript. Le ellenőriztem Google Chrome-mal és ezt irta ki: Uncaught ReferenceError: $ is not defined. Nem vagyok valami nagy angolos és lefordítva sem mond semmit 🙁 Az egyik tanárom azt mondta hogy szerinte van egy plusz $ jel de nem ért hozzá (ő mondta).
    Előre is köszi 😀

    Kodead

    • cyrex
      2011. március 10. csütörtök - 20:32

      A jQuery be van húzva?

    • Kodead
      2011. március 11. péntek - 11:55

      Be van húzva, annyira nem értek hozzá, de amúgy a $ változót nem kell definiálni?? beszéltem egy másik tanárral, ő azt mondta hogy nincs definiálva a $(document). De szerintem ő sem nagyon ért hozzá 🙁

    • cyrex
      2011. március 11. péntek - 11:59

      Ha innen közelíted, akkor a $ “változó” a jQuery-ben van “deklarálva”, viszont nálad hiányzik, tehát valószínűleg a jQuery nincs behúzva. Legalábbis én erre tippelek.

    • Kodead
      2011. március 11. péntek - 11:59

      Heló megint! már megoldottam a problémát köszi a tutorialt 😀

  32. pico
    2011. február 27. vasárnap - 19:02

    na végre meg csináltam köszi az egészmindent de van valami igazábol lehet hogy tök egyszerü a meg oldás de valahogy még a jQuery-t még nem látom át anyira ahogy szeretném mint a php a php olyan letisztult szimetrikus a jQ.hoz képest. mondom is mit nem tudok van a név amit az alt bol van kévéve azt hogy lehet meg csinálni hogy linkként fungcionálojon? probáltam rá huzni a gallery idjét de nem muxik .

  33. Tonek
    2011. február 18. péntek - 12:51

    Hello
    Azt hogy lehetne megoldani ha rákattintok egy képre akkor egy ablak megjelenne és abban külömböző infok szerepelnének?
    a válasz elöre is köszi.

    • cyrex
      2011. február 18. péntek - 20:05

      Milyen infókra gondolsz?

    • Tonek
      2011. február 18. péntek - 21:01

      pl Nick név
      számitógép adatok.stb

    • pico
      2011. február 19. szombat - 22:37

      Szerintem ezt nem egy szlájt show skript be kéne keresni bár abba is bele lehet építeni elméletileg csak ahhoz php vagy más nyelvezet kéne bocs, ha rosszul tudom XD

  34. Ps
    2011. február 18. péntek - 09:01

    Üdv.
    Ez nagyon jó képgaléria 🙂
    Köszi!

  35. pico
    2011. február 17. csütörtök - 16:13

    köszi van egy kérdés ha mondjuk több száz képet akarok így meg csinálni akkor tudsz valami scriptet hogy ne keljen mindet egyenként beírogatni hanem mondjuk a file névbe egy php vagy jQuery bele ágyazni és akkor így egy arányt a HTML files is kisebb lenne? vagy valami

    • cyrex
      2011. február 17. csütörtök - 16:16

      A legegyszerűbb, ha elnevezed a képeket 1-től sorszámozva és írsz egy ciklust, amit kiírja a számokat 1-től addig ahány képed van összesen.

  36. Menyus
    2011. február 16. szerda - 21:26

    Köszönöm!!!

Hozzászólás

Legújabb hozzászólások