Hírlevél, képgaléria

November 14, 2006

Front Page-val készítek honlapot. Hogyan tehetek hírlevélküldőt rá? Hogy kell készíteni jó galériát egyszerűen, de nagyszerűen (nem működik a front page-ban ez a funkció). Sürgős lenne! Köszönöm szépen! Viktor

November 14, 2006

A galériára itt találsz megoldást:

Egy általam előre elkészített sablont használva bárki egyszerűen készíthet magának egy ilyen képgalériát, ha követi az alábbi lépéseket.

Először is a galériát tartalmazó weblapunk <HEAD> részébe fel kell vennünk a következő JavaScript függvényt:

KÓD
<script>

  function kepnagyitas(utvonal, kepSzelesseg, kepMagassag) {
    var kepernyo_magassag = screen.height-80;
    var kepernyo_szelesseg = screen.width-80;
    var szeles = kepSzelesseg;
    var magas = kepMagassag;
    if (szeles>kepernyo_szelesseg) {
      szeles = kepernyo_szelesseg;
    }
    if (magas>kepernyo_magassag) {
      magas = kepernyo_magassag;
    }
    if (szeles>magas) {
      magas = (szeles/kepSzelesseg)*kepMagassag;
    }
    else {
      szeles = (magas/kepMagassag)*kepSzelesseg;
    }

    utvonal = "nagykep.php?magas=" + magas + "&szeles=" + szeles + "&kep=" + utvonal;
    var ablak_tulajdonsagok = "top=0,left=0,titlebar=0,toolbar=0,width=" + (szeles-10)
      + ",height=" + (magas-10) + ",resizable=yes";
    window.open(utvonal, "nagyablak", ablak_tulajdonsagok);
  }

</script>
Ezután a <BODY> részen belül el kell készítenünk a galériát tartalmazó táblázatot. Az, hogy a táblázatnak hány sora és hány oszlopa lesz, az tőlünk függ... Az a lényeg, hogy a táblázatnak minden cellája az alábbi formában készüljön el:

KÓD
<td>
  <a href="java script:kepnagyitas('nagykepek/nagykep_neve.jpg', szelesseg, magassag)">
    <img src="kiskepek/kiskep_neve.jpg" border="0">
  </a>
</td>
A fenti kód természetesen magyarázatra szorul. Először is el kell készítenünk a fényképeink kicsinyített mását (másnéven a "thumbnail"-t), mégpedig úgy, hogy mindegyik kis képnek a magassága egyforma legyen, mondjuk 80 pixel (a szélességük lehet különböző). A kicsinyítést természetesen bármilyen képszerkesztő programmal elvégezhetjük, de mindenképpen ügyeljünk arra, hogy a kis képeket külön mappába mentsük el, és még véletlenül se írjuk felül az eredeti fényképeket!!!

Egy példa a képek elhelyezésére: tegyük fel, hogy a weblapunk a C:\phpweb\galeria\index.htm útvonalon található. Az eredeti fényképeknek készítsünk egy almappát, így: C:\phpweb\galeria\nagykepek\, a képek kicsinyített mását pedig ide tegyük: C:\phpweb\galeria\kiskepek\.

Miután a fenti módon előkészítettük a fényképeket, illesszük be a táblázat cellájába a KIS KÉPET, majd készítsünk belőle hivatkozást. A hivatkozásnál a "kepnagyitas" nevű függvényt hívjuk meg, aminek három paramétert adunk át: a NAGY KÉP elérési útvonalát, a NAGY KÉP szélességét és a NAGY KÉP magasságát. Természetesen minden cellán belül egy újabb kép adatait kell megadnunk, a hozzá tartozó útvonalakkal, szélességi és magassági értékekkel.

Például így:

KÓD
<td>
  <a href="java script:kepnagyitas('nagykepek/0001.jpg', 640, 480)">
    <img src="kiskepek/0001.jpg" border="0">
  </a>
</td>
<td>
  <a href="java script:kepnagyitas('nagykepek/0002.jpg', 500, 600)">
    <img src="kiskepek/0002.jpg" border="0">
  </a>
</td>
<td>
  <a href="java script:kepnagyitas('nagykepek/0003.jpg', 800, 600)">
    <img src="kiskepek/0003.jpg" border="0">
  </a>
</td>
A szélesség és magasság értékeket azért kell megadni, mert az automatikus nagyítást végző függvény ezen értékek alapján - a képernyő méretét figyelembe véve - a lehető legnagyobb méretre nagyítja majd fel a képeket! :-)

A táblázat celláinak számát természetesen soronként is változtathatjuk, ha a "colspan" tulajdonságot használjuk. Ha ugyanis az egyik kép szélesebb, a másik keskenyebb, akkor nem biztos, hogy jól néz ki ha minden sorba ugyanannyi cellát teszünk. (Persze ez attól is függ, hogy ki mennyire ért a táblázatok használatához... ha úgy egyszerűbb, akkor minden sorban legyen pl. 5 cella.)

Ha elkészült a táblázatunk, akkor már nincs más hátra, mint elkészíteni a nagyításhoz használandó PHP oldalt, melynek a "nagykep.php" nevet adjuk, és ami az alábbi kódot tartalmazza:

KÓD
<html>
  <head>
    <title>A képgaléria címe</title>
  </head>
  <body bgcolor="#D60270" style="margin:0px;border:0px;text-align:center">
    <?
    if ($szeles>$magas) {
      ?>
      <img src="<?= $kep?>" width="<?= $szeles?>">
      <?
    }
    else {
      ?>
      <img src="<?= $kep?>" height="<?= $magas?>">
      <?
    }
    ?>
  </body>
</html>
Ezt a PHP fájlt természetesen ugyanabba a mappába kell elhelyeznünk, mint ahol a galériát tartalmazó weblapunk van.

Ez viszont már máshol is megvan, de inkább beírom ide. Nézelődj először. a hírlevélhez pedig a mail() függvényt kell használni, de ezzel irány a PHP topic.

Edited November 16, 2006 by Spányik Balázs

November 14, 2006

Esetleg ha lusta vagy, és egy kevésbé profi, és modolható megoldás is megfelel, látogass el a >>>X3.hu<<<-ra.

Egy képgalériát (ha nélkülözöl minden csilli-villi effektet, és az egyszerûségre törekszel) pedig percek alatt össze lehet dobni. Sõt, még jobb eredmény érhetsz el, az IrfanView ezen funkciójával, látványos dolgokra képes, és ingyenes!

November 15, 2006

Infranview: a szürke hátteret meg lehet változtatni? És lehet olyan, mint pl. a tv2 galériái (alul kicsiben az összes kép, a kiválasztott nagyban...)?

A http://x3.hu/ -n nem találtam semmi ilyet.

És a kód php nélkül mûködik? Ha nem, akkor valaki tud egy nem php-s kódot galériára?

Amúgy köszi a segítséget:-) :ötlet:

November 15, 2006

Balázs említette egy másik topicban, hogy a PHP dolgait elvileg elvégzi a JS függvény, de ezt még nem próbáltam.

November 15, 2006

Hírlevél

Az X3.hu Hírlevéllel könnyedén kialakíthatsz egy közösséget, akiknek bármikor levelet küldhetsz. Mondjuk, ha frissítetted az oldalad, vagy van egy érdekes híred.

Forrás: x3.hu

A képgalériára vonatkozó kérdés pedig: a forrásban mindent meg lehet változtatni.

Sign In

Hírlevél, képgaléria

Recommended Posts

szv8880

zsoltchelsea

Sanzi

szv8880

zsoltchelsea

Sanzi

Create an account or sign in to comment

Create an account

Sign in

Browse