Tutorial: jQuery – képgaléria
2011. február 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.
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.
Ü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)
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!
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?
Forrás nélkül nem igazán. Ez így elég sovány.
Üdv! Ha még meg van a fájl légyszíves kiírnád a forráskódokat? jquery már megvan
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);
});
});
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!
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.
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!
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.
Siasztok!
Arra lennék kiváncsi, van-e olyan összeállitástok, hogy milyen háttére milyen szinű betű a legmutatósabb?
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
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.
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
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.
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.
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!
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.
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.
Leszedtem egy jqeryt, de nem a legjobb.
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
A jQuery be van húzva?
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á
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.
Heló megint! már megoldottam a problémát köszi a tutorialt
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 .
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.
Milyen infókra gondolsz?
pl Nick név
számitógép adatok.stb
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
Üdv.
Ez nagyon jó képgaléria
Köszi!
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
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.
Köszönöm!!!