SMO Blog

Na stránkách SimpleVieweru jsou zdarma ke stažení zdrojové kódy SimpleViewer v1.9. Ukážeme si jak tuto pěknou flashovou fotogalerii upravit k obrazu svému a publikovat jí na webu – třeba v tomto blogu.

1.  Stáhnout soubor http://www.airtightinteractive.com/simpleviewer/simpleviewer.zip

2.  Rozbalit ZIP soubor do vhodného adresáře a seznámit se danými soubory a adresáři.

• adresář images je místo pro fotky s větším rozlišením (doporučuji max. 900 x 670 px)
• adresář thumbs je místo pro fotky s malým rozlišením (doporučuji max. 170 x 130 px)
• soubor gallery.xml je klíčový datový soubor ze seznamem publikovaných fotografií
• soubor index.html je soubor pro spuštění fotogalerie
• swfobject.js je pomocný soubor obsahující JavaScriptové funkce potřební k funkčnosti
• viewer.swf je pomocný flashový soubor tvořící výsledný grafický vzhled v prohlížeči

3. Pomocí grafického editoru vhodně upravit „syrové“ fotky z fotoaparátu a nakopírovat do příslušných adresářů.

Pro práci z fotografiemi používám Zoner Media Photo Studio. Myslím, že práce s fotkami je zde opravdu efektivní. Lze zde jednoduše označit několik fotografií, zadat výsledný rozměr v pixelech a ZMPS za nás všechny fotky přerozměruje.

4.  Vytvořit nebo vygenerovat soubor gallery.xml ze seznamem názvů fotek.

Předtím, než vygenerujeme XML soubor bych vhodně pojmenoval soubory s fotkami. A to ve formátu prefix_cislo.jpg. Konkrétně teda ap_01.jpg. Takovéto hromadné přejmenování hravě zvládne TotalCommander. Akci vyvoláme v menu Soubor > Hromadné přejmenování.

Pro tento případ jsem si napsal v PHPčku skriptík, který XML soubor vygeneruje. Stačí zde vhodně zadat počáteční proměnné jako je: počáteční číslo první fotky, celkový počet fotek a prefix názvu soubor.

<?php
  $cislo   = 1;     // počáteční číslo
  $celkem  = 16;    // celkem fotek 
  $prefix  = 'a&p'; // prefix názvu souborů
  $text    = 'Vygenerováno 1.3.2009 v 20:10 hod. | SMO © 2009';
  for ($i = 1; $i <= $celkem; $i++) {
    if ($cislo < 10) { $cislo = '0'.$cislo; }
    $soubor .= "<image>n";
    $soubor.= "  <filename>".$prefix."_".$cislo.".jpg</filename>n";
    $soubor .= "  <caption><![CDATA[<font color="#ffe21a" size="10">";
    $soubor .= $text."<font>]]></caption>n";
    $soubor .= "</image>n";
    $cislo++;
  }
  $file = fopen("gallery.xml", "w");
  fwrite($file, $soubor);
  fclose($file);
?>

Do záhlaví XML souboru je nutno ještě přidat hlavičku, informace o grafickém vzhledu a maximálních velikostech fotogalerie.

<?xml version="1.0" encoding="UTF-8"?>
<simplevieawergallery maxImageWidth="570" maxImageHeight="550"
   textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="3"
   stagePadding="17" navPadding="17" thumbnailColumns="5"
   thumbnailRows="1" navPosition="top" vAlign="center"
   hAlign="center" enableRightClickOpen="true"
   backgroundImagePath="" imagePath="" thumbPath="">

5. Hotovo. Výsledná fotogalarie vypadá takto.

Fotogaleriie ve větším rozlišení možno shlédnout na: http://zkusmo.cz/fotogalerie/2009/2009-02-28_ajicek_pajicek/