Úvod > Foto, PHP, Programování > Flash fotogalerie pomocí SimpleViewer

Flash fotogalerie pomocí SimpleViewer

18.03.2009 | Zobrazeno: 14870x Zanechte komentář Přejít na komentáře

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.

image

ZMPS – přerozměrování fotek

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í.

image

TotalCommander – hromadné přejmenování souborů

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/

1 bod2 body3 body4 body5 bodů6 bodů7 bodů (4x hlasováno, průměr: 4,25 ze 7)
Loading...Loading...
  1. 14.09.2009 na 17:40 | #1

    @francesco
    Musí být všechny soubory (hlavně ten XML) v kódování UTF-8.
    Pošli odkaz na výslednou fotogalerii.

  2. francesco
    14.09.2009 na 15:53 | #2

    @francesco
    už jsem na to přišel sám, díky

  3. francesco
    14.09.2009 na 13:40 | #3

    Zdravím Vás, můžete mi prosimvás poradit jak tam dostanu tu češtinu, tak jak to máte Vy ve fotogalerii „Ájíček a Pájíček“.
    Vygenerováno 1.3.2009 v 20:10 hod. | SMO © 2009
    email: smo@centrum.cz, ICQ: 51225108
    Díky

  4. cabadaj
    13.09.2009 na 09:55 | #4

    tak to už se nechytám. zkusím se na to podívat.

Stránky s komentáři
  1. Žádné zpětné odkazy
  • RSS
  • Twitter
  • Facebook
  • LinkedIn
  • Picasa
  • Flickr
  • YouTube