A honlap készítés során sokszor akadnak meg az alap html ismeretekkel rendelkező emberek a képgaléria elkészítésénél. Ha egyenként kell behívogatni és paraméterezni az oldalon a képeket, ráadásul még valami tetszetős megjelenítéssel is szeretnék megjeleníttetni a képeket, az hosszadalmas programozást, hozzáértést igényel.

Nekik lehet segítség a következő ingyenes script, melynek telepítése, használata a végletekig le van egyszerűsítve.

A képgaléria demója megtekinthető itt.

Az ingyenes IG képgaléria script egyszerűen beüzemelhető képgaléria készítő script.

A galériába a képek feltöltése ftp kapcsolaton keresztül a script “kepek” könyvtárába.

A script installálása nagyon egyszerű:

  1. a script letöltése
  2. a script kicsomagolása
  3. a config.php fájl valamilyen text-editorral történő módosítása (pl.: notepad++)
  4. a config.php fájl elmentése
  5. a képek bemásolása a “kepek” mappába
  6. a “galeria” mappa feltöltése ftp-n keresztül a tárterületre

készen is van

A script automatikusan generálja a thumbnaileket képeinkről, amelyek rájuk kattintva lightbox effektel nyit meg a kép teljes méretére.
AZ IG script, képgaléria kategóriák kezelésére is képes korlátlan számú galériával és algalériával.

Az algalériák létrehozása végtelenül egyszerű, a “kepek” mappában új mappát hozunk létre és elnevezzük. Korlátlan mélységben hozhatunk létre galériákat ily módon, a script automatikusan kezeli a mappákban lévő almappákat és képeket.

Figyeljünk oda, hogy feltöltés előtt méretezzük át képeinket, mert a script nem méretezi át azokat, így a lightbox megjelenítéskor a teljes méretben nyílnak meg a képek.

A képgaléria testreszabása nagyon egyszerű, a config fájlban megadható paraméterekkel testreszabható.

  • Ha megnyitjuk a config.php fájlt texteditorral, a következőt találjuk benne:

// Galéria testreszabása

$thumbs_pr_page = “12″; //egy oldalon hány miniatűr jelenjen meg?

$gallery_width = “612px”; //a képgaléria szélessége. megadható px vagy % módon is

$backgroundcolor = “#dbfaff”; //a galéria háttérszíne. megadható színnévvel és hex kóddal is, pl #FFF

$templatefile = “igalery”; //a kinézetért felelős fájl neve

$title = “IG képgaléria script”; // A galéria neve ami a címsorban megjelenik

$slogan = “képgaléria weboldalra”; //a galéria tulajdonosának URL címe, vagy neve

$label_home = “Kezdőlap”; //A navigációs sorban megjelenő nyitólap neve

$label_page = “Oldal”; //Oldalnavigáció szövege

$label_noimages = “Nincs kép a mappában”; //Üres mappa szövege

$label_loading = “kép betöltése…”; //miniatűr képek betöltési szövege

$thumb_size = 120; //miniatűr képek magasság és szélesség maximális mérete.

$label_max_length = 30; //mappák nevének maximális karakterszáma, szóköz esetén használj alsóvonást: _ Ne használj ékezetes karaktereket!

// Ne tölts fel olyan képeket, melyeknek a nevében ékezetes karakter, vagy szóköz szerepel!

A mennyiben nem egyértelmű a beállítások leírása, írj nekem egy levelet és segítek a beállításban.

Vállalkozó szellemű html tudorok saját designt is készíthetnek a képgalériájuknak. Ehhez segítséget találnak

A script megjelenéséért felelős fájl nevét átírjuk és készítsünk egy ilyen névvel egy .html fájlt majd helyezzük el a szerveren az “igalery.html” fájl mellett.

A kinézet elkészítésénél a <head> szekciónak tartalmaznia kell a következő kódrészletet:

<title><% title %></title>

<script type=”text/javascript” src=”<% gallery_root %>js/jquery.min.js”></script>

<script type=”text/javascript” src=”<% gallery_root %>js/slimbox2.js”></script>

<link rel=”stylesheet” href=”<% gallery_root %>css/slimbox2.css” type=”text/css” media=”screen” />

<link rel=”stylesheet” href=”<% gallery_root %>css/css.css” type=”text/css” media=”screen” />

<style type=”text/css”>

body {

margin: 0 auto;

padding: 0;

width: <% gallery_width %>;

font: 14px Georgia, “Times New Roman”, Times, serif;

background: <% bgcolor %>;

}

</style>

Ezzel a kódrészlettel a a képek litebox jellegű megjelenítését és az oldalunk középre rendezését, emellett a config.php fájlban megadott galéria szélességet és az oldal háttérszínét adjuk meg.

A <body> szekcióban a

a <% title %>kódrészlet a galéria címét, mely megjelenik a böngésző címsorában jeleníti meg
a<% slogan %>kódrészlet a szlogenünket, akár egy rövid leírást, vagy a galéria tulajdonosának nevét tudjuk megjeleníteni.

a<% navig %>kódrészlet a breadcrumb-ot jeleníti meg, mely biztosítja a kényelmes közlekedést a galériák közt és megmutatja éppen hol tartózkodunk az oldalon.

a
<% thumbnails %>kódrészlet jeleníti meg a képgalériánk miniatűrjeit

a<% navigation %>kódrészlet biztosítja azt, hogy több oldalon megjelenő képlistánkban közlekedni tudjunk az egyes oldalak közt.

Amennyiben ezt az ingyenes scriptet módosítjuk tiszteljük meg a fejlesztő munkáját azzal, hogy a<% credit %>kódrészletet elhelyezzük az oldalon!

Mindezek után már csak a CSS fájlunk elkészítése van hátra, amelyben a weboldal készítés során a szerkezetében használt elemek formázását adjuk meg.