jQuery – képgaléria

Szerző:   |   2011-02-16

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

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

Videó

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

});

65 hozzászólás

  1. 2016. szeptember 2. péntek - 09:47

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

  2. 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á)

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

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

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

      Nem tudom.

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

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

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

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

      Szia, kiraktam az oldalra.

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

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

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

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

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

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

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

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

      Megoldotttam, működik már 😀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • 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. 2011. március 11. péntek - 12:05

    Leszedtem egy jqeryt, de nem a legjobb.

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

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

      A jQuery be van húzva?

    • 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á 🙁

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

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

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

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

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

      Milyen infókra gondolsz?

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

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

    • 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. 2011. február 18. péntek - 09:01

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

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

    • 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. 2011. február 16. szerda - 21:26

    Köszönöm!!!

Hozzászólás

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

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

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