Deshihk ´s Blog ?

Návod jak instalovat Highslide JS na web

Chcete si udělat z vašich fotografií udělat efektní fotogalerii na vašem webu, která vypadá například tak jako zde na této stránce? Není nic snažšího než se řídit tímto návodem. Nejdříve si musíte stáhnout instalační balík z webu Highslide.com. Což máte popsané snad celkem srozumitelně na přilehlých obrázcích.

Highslide Highslide Highslide

Po stáhnutí zazipované složky ji rozbalte a obsah uložte na plochu. Získáte tím složky Highslide, Examples a Images (na složky Examples a Images zapomeňte - nejsou potřebné). Nejdříve musíte zkopírovat obrázky ze složky Graphics, jež se nachází v složce Highslide a umístit je do vaší složky Images.

V CSS kódu souboru highslide.css ( jež je v složce Highslide) musíte upravit cesty k souborům (což nedoporučuji) nebo zkopírovat toto upravené css do vašeho css souboru (většinou je nazván jako default.css nebo style.css a najdete ho ve složce kde máte zdrojové soubory svých stránek).

Celou složku Highslide skopírujte přes ftp do hlavní složky vašeho webu přesně tam kde jsou vaše stránky, ne do podsložky, jinak vám highslide nebude fungovat ! Také tam zkopírujte váš upravený css soubor.

Nyní je na řadě samotná úprava kódu vaší stránky kde budete chtít používat funkce fotogalerie. Do každé stránky, kde chcete využívat funkce Highslide zkopírujte mezi tagy <body> a </body> kód který je v zdrojovém kódu této stránky. Zdrojový kód zobrazíte kliknutím pravým tlačítkem myši na tuto stránku a zvolíte Zobrazit zdrojový kód. Nebo si můžete zkopírovat kód zde.

Zdrojový odkaz na každou vaši fotku (kterou chcete zobrazovat pomocí HS) musíte upravit do této podoby, kterou můžete vidět i na přiloženém obrázku. Místo NÁZEVVAŠÍFOTKY napíšete název vaší fotky a místo VÁŠALTPOPISEK napíšete vlastní alt popisek. Stejně tak atributy height = "50" width = "600" upravíte podle sebe (height je výška miniatury vaší fotky a width je šířka vaší miniatury).

Highslide

Váš pozměněný zdrojový kód nahrajete na vaše ftp, a tímto by měl Highslide JS fungovat. Po tomto celém postupu by se vám měly miniatury fotek plynule a efektně zvětšovat a měla by se zobrazovat navigační lišta v horní části zvětšených fotek. V případě nějakých dotazů mě můžete dát vědět skrze komentáře nebo přes formulář v sekci kontakt a já se vám budu snažit pomoct aby vše fungovalo tak jak má:)

Nakonec chci zmínit licenci pod kterou se může Highslide používat. Pro nekomerční stránky (negenerující žádný zisk) je použití zadarmo, ale při použití na komerčním projektu jsou dvě možnosti, zaplatit 29$ za použití na jedné určité doméně, nebo 179$ za neomezenou licenci na jakýkoliv počet webových stránek. Obě platby platí na neomezený časový údaj, takže se nejedná o měsíční taxu.

Další část tohoto návodu (obsahující doplňkové funkce a fígly) najdete zde.



Můj nový web najdete na OndřejMartinek.cz.

Spolupracuji na Pravopisně.cz - online diktáty tak, jak je neznáte.

Komentáře



Viac skupin galerii
Marcel | 09.09.2009 11:01

Zdravim, mozno by ste mi vedeli pomoct, narazil som na jeden problem s touto galeriou. Podarilo sa mi ju bez problemov nahodit ale mam na stranke viac galerii, ktore by som potreboval rozlisovat, t.j. rozdelit do viacerych skupin. Teraz mi zo vsetkych obrazkov na stranke vytvori jednu slideshow, ale ja ich chcem mat viac a samostatne. Ak viete ako to vyriesit, budem vam vdacny za odpoved.

Highslide JS ako na to
minizoo zilina | 22.10.2009 21:20

Citacia CSS kódu souboru highslide.css ( jež je v složce Highslide) musíte upravit cesty k souborům (což nedoporučuji) nebo zkopírovat toto upravené css do vašeho css souboru (většinou je nazván jako default.css nebo style.css a najdete ho ve složce kde máte zdrojové soubory svých stránek). otazka: Dobry den. Ale ja default mat medzi subormi mat nemozem, pretoze som tam nic take nedal. Moc tomu navodu na tu fotogaleriu nerozumiem. Da sa aplikovat na klasicku html stranku? alebo iba v JOMLA? Dakujem za odpoved

Asi takto
Deshihk | 22.10.2009 23:38

Takže nejprve ten problém se složkou "images". Jedna složka images je v instalačním balíčku s Highslidem a druhý soubor Images se běžně používá při tvorbě html stránek, aby nebyl tolik "nepořádek" v souborech. A zde se dostáváme k jádru problému, protože jak jsem se díval, vaše stránky (které jste mi posílal v emailu) jsou v klasickém html, a já využívám xhtml + kaskádové styly (to jsou ty .css složky).

Asi takto (pokračování)
Deshihk | 22.10.2009 23:39

Určitě by šlo Highslide JS implentovat do vašeho webu, ale nejspíše by to vyžadovalo určité upravení mých zdrojových kódů, které jsou ke stažení v článku.

Z textu obrázek
slay | 20.02.2010 17:03

Nešlo by to nějak udělat, abych při klepnutí na text se mi otevřel takto obrázek?

reakce:
Deshihk | 20.02.2010 20:06

Šlo by to samozřejmě, použil jsem to například v sekci projekty (http://www.deshihk.cz/projekty.htm), jak se zmiňuji ohledně staré verze designu. Pokud ti stačí se inspirovat zdrojovým kódem, tak by to mělo být vše. Případně napiš

přes celou obrazovku
Sariq | 08.07.2010 16:34

Zdravím, děkuju moc za návod na highslide, ale mám jeden problém. Když se klikne na obrázek neztmaví se mi celá stránka a nevyskočí obrázek, ale vyskočí v max. velikostí jako je okno s články. Stránky mám v htm. Vůbec nevím co s tím, jsem strašný amatér :). Obrázek pro lepší vysvětlení: http://sariq.own.cz/123.png

přes celou obrazovku
Sariq | 08.07.2010 16:35

oprava odkazu na obrázek: http://sariq.own.cz/123.PNG

Posuvníky
Petr | 09.08.2010 19:59

Dobrý večer, chtěl bych se zeptat co mám dělat, aby se mi pod fotkami zobrazila lišta s šipkami vpřed a vzad a konec. Při kliknutí na fotku se mi fotka zvětší, ale mohu se mezi fotkami pohybovat pouze šipkami na klávesnici, lišta se mi nezobrazí. Děkuji za odpověď.

Re: posuvníky
Deshihk | 10.08.2010 16:22

Dobré odpoledne Petře, zkuste v zdrojovém kódu změnit funkci useControls. Tedy současné "false" (které předpokládám tam máte) na "true"

Posuvníky
Petr | 11.08.2010 12:22

To tam mám zadané, kód jsem stáhnul podle Vašeho návodu a už to tam bylo.

Posuvníky
Petr | 13.08.2010 08:10

To tam mám zadané, kód jsem stáhnul podle Vašeho návodu a už to tam bylo.

Re: posuvníky
Ondřej Martinek | 14.08.2010 20:21

V tom případě nevím, proč ta lišta nefunguje. Mě fungovala vždy. Případně mi napiště do mailu url té stránky a já se na to podívám.


Autor:

Email:

Nadpis:

Text:


Ano jsem člověk