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

Kapcsolódó bejegyzések:
  • A régebbi “Véletlenszerű reklám, hirdetés megjelenítése a honlapon” cikk egy továbbfejlesztett változatát küldte el BlackPrince, mely immár nem igényel PHP-t, íg …

  • Honlapkészítés során van olyan helyzet, hogy szeretnénk betölteni a lapon 1-1 olyan új szöveget, képet miegymást, hogy az ne járjon az egész oldal újratöltésével …

  • Többen is gondolkodnak azon, hogyan is lehetne gyorsan és megbízhatóan átirányítani az oldalukat más internetes címre. A leírás több módszert is bemutatA …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Ebben az ismertetőben azt próbálom bemutatni, hogyan igazíthatjuk weblapunk kinézetét a felhasználó által használt képernyőfelbontáshoz és böngészőhöz. Javascri …

A cikket beküldte: ViZion (http://)

34 hozzászólás

  1. Munemori says:

    Ú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. BonFire says:

    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. ViZion says:

    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. Kecs says:

    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. ViZion says:

    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. rduke says:

    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. ViZion says:

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

  8. rduke says:

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

  9. ViZion says:

    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.

  10. rduke says:

    köszi! Holnap, vagy a hétvégén tesztelni fogom :)

  11. adddam says:

    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. ViZion says:

    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. Pétej says:

    É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. ViZion says:

    “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. emje says:

    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. ViZion says:

    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…

  17. emje says:

    kösz szépen!

  18. Radványi Anita says:

    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. ViZion says:

    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. Tbo23 says:

    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. ViZion says:

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

  22. Tbo23 says:

    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. ViZion says:

    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. Tbo23 says:

    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. Tbo23 says:

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

  26. mga says:

    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. mga says:

    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. ViZion says:

    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. mga says:

    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. ViZion says:

    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. Sifu says:

    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. gyuri says:

    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. ViZion says:

    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.

Szólj hozzá
a Véletlen képek áttűnéssel, galériából c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>