Véletlen képek áttűnéssel, galériából

Egyszerű feladat egyszerű megoldása következik. Szerettem volna a galéria képeiből kis „válogatást” a kezdőlapon, a lehető legegyszerűbb módon. A javascriptek között keresgélve sok érdekes volt, de egyik sem felelt meg igazán. Szerettem volna, ha a képek véletlen sorrendben, és valami „simított” képváltással, nem olyan kocka módon odadobva jelennek meg. A következőt hegesztettem össze megoldásként:

Külső  .js file-ba, vagy a html-kód head részébe a következő kis scriptet kell elhelyezni:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var slidesmax=55
var slidehely='http://www.honlapom/galeria/'  //a végén kell a /
function runSlideShow()
{
var slim=Math.round(Math.random()*(slidesmax-1));
if (document.all)
{
document.images.SlideShow.style.filter="blendTrans(duration=3)"
document.images.SlideShow.style.filter="blendTrans(duration=5)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src=slidehely+[slim]+".jpg";
if (document.all)
{
document.images.SlideShow.filters.blendTrans.Play()
}
t=setTimeout('runSlideShow()', 9000)
}

természetesen ha head-be kerül, akkor kell elé a

1

script type="text/javascript"

illetve ennek a záró tagja is </script>.

Ha külső .js-t használunk, akkor az arra vonatkozó hivatkozást kell a head-ben elhelyezni:

1

<script src="hivatkozás/file.js" type="text/javascript"></script>

Itt figyeljünk arra, hogy néhány szolgáltató csak relatív hivatkozást enged megadni.

A JavaScript röviden:

Az elején megadjuk a lényeges változókat:

  • slidesmax: képek száma (0 tól indítva kell számozni a képeket, és ha pl. 11 képünk van, az utolsó lesz a 10, ez a slidesmax értéke is)
  • slideshely: képek helye, itt a mappát kell megadni. Csak azért van itt külön, hogy változtatáskor ne kelljen keresgélni. Minden kisbetű, ékezetek nélkül, így biztosan működni fog. Fontos a mappa megadása után a / jel!
  • slideshow funkciónk generál egy véletlen számot, majd a html-ben lévő képen alkalmazza az áttűnést.
  • az első duration a megjelent kép eltűnésének idejét, a második a következő kép megjelenítési idejét jelenti.

Kísérletezzetek…

Ezután megadjuk, hogy pontosan hol is vannak a képek a slideshow.src sorral.
A slidehely változóban megadott helyről a generált számú (slim kódnevű…) számhoz biggyeszt egy .jpg kiterjesztést, és már indul is a blendtrans… Fontos az elérési út, és a kis/nagybetű is ugye pl. a kiterjesztésnél.

A következő a timeout, vagyis időzítünk. Millisecundumot kell megadni, a 9000 érték 9 másodpercet jelent. Túl alacsony értéknél levágja az effektet, de kísérletezni, állítgatni kötelező! :)

Valamit kihagytam? Hát persze…

A html body részébe a kívánt helyen a képnek így kell kinéznie:

1

<img src="honlap/galeria/0.jpg" alt="Véletlen képek a galériából" name="SlideShow"/>

A  képekből egyet kitesz, mert ha nem engedi az oldal a Javascriptet, akkor nem lesz üres a hely. A legjobban akkor mutat, ha a képek egyforma méretűek, és nem túl nagyok.
És nem árt a body onLoad=”runSlideShow()” sem…

Ezt lehet még fokozni, másik effectel kísérletezni, több mappából tölteni, etc.

Egy működő példához katt a „Véletlen képek áttűnéssel galériából” demo oldalra.

Hátha vki ilyesmire vágyott :)
További jó munkát!
ViZion

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

34 HOZZÁSZÓLÁS

  1. Úgy nézem, hogy a simított képváltás nem működik Firefox(3.0.4), Opera(9.62) illetve
    Google Chrome(0.4.154.25) alatt. De lehet hogy csak nálam.
    A képeket rendesen cserélgeti.

  2. Nem csak nálad. Az FF 3.0.4 és az Opera 9.52 alatt is csak simán váltogatja a képeket. IE 7 alatt szépek az áttűnések.

  3. Upsz… igen, ez IE7 tudja sajnos… ehh, elnézést kérek ezt valóban kihagytam.
    Az IMG után esetleg még az id=”SlideShow” segíthet a bajon, ha az sem, akkor elgondolkozom a css-el kombinált megoldáson…

  4. Hát igen, ez is csak IE függő megoldás.
    Javasolnám, hogy használj pl jQuery-t. Abban böngészőfüggetlen áttűnés benne van.
    http://docs.jquery.com/Effects/fadeIn#speedcallback
    De körülnézhetsz az oldalon, hátha találsz ezt azt még magadnak.

    Én tuti ezzel esnék neki, és valami hasonlót készítenék. Talán még azt is megoldanám, hogy egy php előbb feldolgozza könyvtárban lévő fájlokat, aztán kiválaszt letöltésenként random pl 10-et és váltogatja. Így azt is meg lehetne úszni, hogy ne 0.jpg, 1.jpg, stb legyen a file neve, mert úgy bármi lehet.

    Dani

  5. Sajnos a honlap motorjához én nem férek hozzá, és php ismeretem valamint hozzáférésem is korlátozott…
    Sajnos az egész portálmotor IE-re épül, más böngésző „belemerevedik” ha pl. oldalt akarok szerkeszteni… Viszont készül az új (elvileg) am már smarty template rendszeres lesz, azért ott több a lehetőség. A „fejlesztés” részemről véget ért, mivel a cégvezető szerint ezek nem plusz munkák, és az oldal jó is így, etc… szóval nem nagyon mozog a neten :)

  6. sziasztok! egy kérdésem lenne. Olyanhoz tudnátok-e valami forrást adni, hogy bejön az oldal és a képek egymás után váltják magukat? nemtudom, hogy minek nevezik. segítsetek :) az oldal címét ahol láttam gondolom nem írhatom be, vagy igen? köszi

  7. Szia! ez is azt csinálja… Lehet véletlen sorrend helyett fix sorrendben is, ha érdekel leírom hogyan.

  8. szia! igen érdekelne. ha van időd leírhatod, nagyon köszönöm előre is!

  9. A fenti kódot módosítjuk, a véletlen helyett sorba olvassa be a képeket.
    az első sor után új sorba megadjuk a változót: var slim= -1 az ötös sort töröld, azt a következőkre cseréljük:
    slim++
    if(slim>slidesmax)
    slim=0

    ezzel a fenti változó értékét egyel növeljük (a -1 miatt a 0. képpel kezdi), ha a változó értéke nagyobb lenne, mint a maximum képek száma, akkor újra a 0. képet teszi ki. Ennyi, remélem segítettem.

  11. bocs kezdő vok. „megadjuk, hogy pontosan hol is vannak a képek a slideshow.src sorral.” nem igazán értem.. megnéztem a demot és ott az src nél ami van (tehát a js fájlt is)és nem igazán értem..vki mondana pár szót arról, hogyan működik az???

  12. Ott a képek helyét rakja össze a script, abból amit már megadtál a slidehely változóval, plusz hozzátoldja ehhez a következő kép számát. Nem neked kell beírni.
    A kisérletezzetek… után írt rész a script működését írja le, abban a részben nem kell piszkálni semmit (ha nem akarsz). Gyakorlatilag csak a két első változót kell módosítanod, hogy a Te galériádra mutasson, illetve beírni a képek számát.

  13. Én is most kezdenék javascriptel variálni. Ezzel a slideshowal csak annyi gondom lenne, hogy nem tudom miként tudnék a scriptben más, nem http-s elérési utat megadni a képekhez. Én a honlap gyökérkönyvtárába szeretnék egy kepek könyvtárat létrehozni és onnan „diavetíteni”. Valaki tudna segíteni?

  14. „más, nem http-s elérési utat megadni a képekhez” ha a scriptben szertnél ilyet, azt is lehet, az a relatív hivatkozás. Itt az érthetőség miatt nem használtam, de azt is lehet.

  15. Köszi a szkriptet, nagyon hasznos volt. Annyi problémám van, hogy néha 1-1 képet nem tölt be, és akkor x másodpercig a hiányzó kép ikon látható. Esetleg nem tudjátok, ez mitől lehet?

    Valamint az volna még a kérdésem, hogy egy oldalra több ilyet be lehet -e rakni valahogy? Tehát ha van több galéria, és ezekre ugró hivatkozásnak szánom ezeket a random boxokat.

    Gondolom ez nem lehet olyan bonyolult, csak én kb most kísérletezek először ilyennel, eddig csak sima randomot használtam, abba meg nem nagyon kellett belepiszkálni

  16. A script nem olvassa be előre a képeket, tehát ha a képek nagyok, vagy pl. megy egy torrent mellette, akkor előfordulhat, h nem látni a képet.
    Mai ADSL korszakban nem látom jelentőségét a preloadereknek, de tetszés szerint dobhatsz hozzá.
    Többet is lehet rakni egy oldalra, csak akkor a hozzá tartozó scripteket más-más nevű function-ba pakold, illetve a cserélendő kép legyen slideshow1, slideshow2, etc…

  18. Sziasztok! Mit csináltam rosszul, ha nem indul a képváltás IE-ben sem? Kinn van az első kép, de semmi nem történik! Kérlek segítsetek, mire kell nagyon figyelnem! Előre is köszönöm!

  19. Szia!
    A body tag-hoz hozzáraktad a runslideshow-t? JS engedélyezve van a böngésződön? Linkek, stb. jók? Esetleg a kiterjesztéseknél és a html-ben kisbetű-nagybetű eltérés? Nézd meg firefoxal is, annál is működik, igaz nincs átmenet, csak képváltás.
    linket dobhatnál, ha lehet, úgy könnyebb segíteni :)

  20. Sziasztok!
    Hogy tudom azt megoldani, hogy egy lapon több ilyen átmenetes kép is legyen, és el tudjam őket helyezni oda, ahova akarom?

  21. Tbo23:
    A változóknak más nevet adsz meg, ill. más mappát, ahol a képek vannakl…

  22. Köszönöm
    Csak az a kérdésem lenne még, hogy hogy lehet mozgati ezeket? (nekem nem sikerült)
    Igazából egymásra szeretném rakni félig őket.

  23. uhh, hát pl. css-el, külön div-be rakod, és azokat pozicionálod.
    Ha ilyen komplikáltabb dolgokat tervezel, akkor lehet, h jobb lenne flash-el.

  24. próbáltam div-vel de csak a programban mutatja, hogy rárakja a képet a másikra, de a böngészőben nem. Nem lehet hogy a javascript miatt? JS-ben nem lehet megmondani a helyét?

  25. Köszi sikerült (div-vel). Valamit nem jól csináltam xhtml-ben és átállítottam sima html-re.

  26. 1. A php-m head részében már van script nyitó és záró parancs, közte function-ok. Én a script záró sora után szúrtam be az általad fent közölt, head részbe kellő dolgokat, új script nyitó és záró sorral. Talán ez/itt lehet hiba?
    2. Aztán: nem teljesen értem a body onLoad=”runSlideShow()” sornak a kellő megjelenését. Ezt hogyan pontosan és hova kell beszúrnom? Már van egy body onLoad kezdetű sorom, kacsacsőrrel megnyitva, lezárva. Ezt kell kibővítsem? Vagy írjak egy új sort, pontosan mit is?
    3. Valamint: azt a sort beírtam, amit írtál, a bodyba, ahol a kép megjelenítését akarom. De azzal a sorral a 0-s jpg jelenik meg.

    Tudsz segíteni? Ötlet? Hol szúrhattam el?

  27. Valamiért lemaradt az elejéről a köszöntő szöveg… :) Szóval valami ilyesmi volt: baromira örülök, hogy rátaláltam, Kedves Kódmegosztó erre a leírásra. Már régóta keresek, de úgy látszik, rossz szavakat írtam be a keresőmbe. De végre. :) Gondoltam, hogy a képváltós elképzelésemet megoldom flash animációval, de biz. okok miatt html kóddal szerettem volna. A leírtaknak megfelelően eljártam, de nem sikerült. A 0-ás képem jelenik meg az oldalamon. Leírok néhány kérdést, talán ezek közül rontottam el valamit:

  28. Háát… én nem látom a kérdéseket, de van válaszm :)
    IE alatt működik, FF-hez hegeszteni kell rajta. Fontos a kisbetű/nagybetű és az ékezetmentes elérési út, mert az is hiba oka lehet. Ezen kívül lehet elgépelés is, ha hiányzik egy / jel, vagy ilyesmi…

  29. Valamiért lemaradt, nem rajtam múlt… :)
    Szóval a külső .js fájlban elhelyeztem a scriptet. A php-ban, ahol meg akarom hívni a külső .js fájlt, a head-ben való elhelyezéssel kapcsolatban kérdésem lenne: a head-ben már van egy script nyitó és záró sorom, közte function-ok. A záró script sorom után kell beszúrnom az általad írt script-es sort? Valamint a body részben hogyan kell beszúrnom a scriptre való hivatkozást, hogy egy adott helyen a dolog el kezdjen élni? Illetve mit jelent a „body onLoad=”runSlideShow()”” a leírásodba, pontosan mit és hova kell beírnom ezzel kapcsolatban? Köszi a segítséget.

  30. A head részben több külső scriptet is megadhatsz. a body onload azt jelenti, h akkor futtatja a scriptet, amikor az oldal betöltődött.
    Sorba véve: ha külső file-t adsz meg, akkor az elérési útját helyesen add meg, lehet, h ott van elírás, azért nem fut. Mivel a 0. kép megjelenik, gondolom nem indul el a script…
    Ez lehet az onload miatt is. Azt hagyd ki, helyette valahova a body végére írd be:
    runSlideShow();

  31. Helo, köszi a galéria kódot, megpróbáltam,csak valami nem stimmel. Nem jelenik meg a galéria. Küldöm a kódot, kijavítanád? Előre is köszi.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    script type="text/javascript"
 
var slidesmax=60
var slidehely='http://www.proba/galeria/'  //a végén kell a /
function runSlideShow()
{
var slim=Math.round(Math.random()*(slidesmax-1));
if (document.all)
{
document.images.SlideShow.style.filter="blendTrans(duration=3)"
document.images.SlideShow.style.filter="blendTrans(duration=5)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src=slidehely+[slim]+".jpg";
if (document.all)
{
document.images.SlideShow.filters.blendTrans.Play()
}
t=setTimeout('runSlideShow()', 9000)
}

    a weblap kódom nem jelenik, meg tuja valaki, hogy hogy oldjam meg?

  32. Sziasztok azt hogy lehet megoldani hogy %-osan beállítani a képek méretét.

  33. Kedves Kódmegosztó!
    Nagyon örültem amikor sikerült megtalálnia az oldalt, mert már régóta szeretnék a blogomra egy ilyen stílusú képváltót. A demóban pont azt találtam amit én is szeretnék megvalósítani.Bevallom igen kezdő vagyok a szakmában, ezért nem is igazán tudtam boldogulni a témában.
    A kérdésem az lenne hogy ezek a kódok alkalmazhatóak-e, és hogyan a blogspotomon az ott található beépített HTML/JavaScript vezérlővel. A picassa webalbumom képeit szeretném megjeleníteni valamelyik oldalsávban.Segítségét előre is köszönöm!

  34. Sziasztok!
    Bocs, ritkán nézek be ide…
    Ez egy jó régi script, csak Internet explorer-el működik, abból is csak 7-el volt anno tesztelve.
    Ennél frissebbek vannak már, azokat kellene használni.
    Picassa-ra is vannak scriptek, rá kell keresni és inkább azzal megoldani a képek betöltését, mert ez nem fér hozzá sztem.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét