Galerija Highslide

Dragan Filipović Kurs, Treći deo - Skripta Comments (0)

Veoma popularna skripta za galerije.

http://highslide.com/

1. Preuzmemo fajlove

Obzirom da skripta u sebi sadrži desetine vrsta galerija, bolje je staviti je u poseban folder. Za razliku od jednostavnijih skripti gde smo odgovarajuće fajlove stavljali u odgovarajuće foldere, ovde ćemo kopirati folder ‘highslide’ u naš root folder.

highslide-kurswebdizajna

U njemu se nalaze svi potrebni .js i .css fajlovi, kao i dodatni fajlovi.

Slike iz foldera ‘images’ kopiraćemo u folder ‘galerija’ koji ćemo napraviti u našem folderu ‘images’, kako ne bi pretrpali naš folder sa slikama.

2. Povezivanje fajlova:

U folderu ‘examples’ koji smo preuzeli, nalaze se primeri vrsta galerija koje ova skripta nudi. Pregledajte ih u browseru i izaberite svoju galeriju. Npr. gallery-floating-caption.html

Izabranu galeriju implementiraćemo u naš sajt u stranu galerija.html.

Pregledaćemo kod izabrane galerije (desni klik, view page source ili prikaži izvor stranice)

Kopiraćemo deo iz HEAD taga  u naš HEAd tag

<!--
 1 ) Reference to the files containing the JavaScript and CSS.
 These files must be located on your server.
-->
<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--
 2) Optionally override the settings defined at the top
 of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
 hs.graphicsDir = '../highslide/graphics/';
 hs.align = 'center';
 hs.transitions = ['expand', 'crossfade'];
 hs.wrapperClassName = 'dark borderless floating-caption';
 hs.fadeInOut = true;
 hs.dimmingOpacity = .75;
// Add the controlbar
 if (hs.addSlideshow) hs.addSlideshow({
 //slideshowGroup: 'group1',
 interval: 5000,
 repeat: false,
 useControls: true,
 fixedControls: 'fit',
 overlayOptions: {
 opacity: .6,
 position: 'bottom center',
 hideOnMouseOut: true
 }
 });
</script>

3. HTML:

Deo iz BODY taga kopiraćemo u desnu kolonu, ispod naslova (odnosno na mesto na sajtu gde želimo da se galerija prikaže)

<!--
 3) Put the thumbnails inside a div for styling
-->
<div class="highslide-gallery">
<!--
 4) This is how you mark up the thumbnail image with an anchor tag around it.
 The anchor's href attribute defines the URL of the full-size image.
-->
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
 <img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
 title="Click to enlarge" />
</a>
<!--
 5 (optional). This is how you mark up the caption. The correct class name is important.
-->
<div class="highslide-caption">
 Caption for the first image.
</div>

<!-- Repetionion of the above -->
<a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
 <img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
 title="Click to enlarge" /></a>
<div class="highslide-caption">
 Caption for the second image.
</div>
<a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
 <img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
 title="Click to enlarge" /></a>
<div class="highslide-caption">
 Caption for the third image.
</div>
</div>

4.Aktiviranje:

Obzirom da smo HTML kod kopirali sa sajta gde je skripta bila aktivna, u samom kodu se već nalaze komande za aktivaciju skripte.

5. Provera putanja linkova:

Uvek kada nešto kopiramo sa drugih sajtova moramo proveriti linkove. Putanje linkova zavise od strukture naših foldera, imena fajlova isl.

Više o putanjama i linkovima podsetite se iz predhodnih časova:

http://kurs.frontenddot.com/blog/linkovi/

U ovom slučaju proverićemo sve što smo kopirali u HEAD delu:

<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>

Za naš sajt ispravna putanja je src=“highslide/highslide-with-gallery.js“, odnosno

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>

To ćemo uraditi i u sledećim linkovima:

<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

i

<script type="text/javascript">
 hs.graphicsDir = 'highslide/graphics/';

Sada su fajlovi dobro povezani u HEAD delu. To isto ćemo ispraviti i u BODY delu.

<a href="../images/gallery1.jpg" onclick="return hs.expand(this)">
 <img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
 title="Click to enlarge" />
</a>

Treba da promenimo u:

<a href="images/galerija/gallery1.jpg" onclick="return hs.expand(this)">
 <img src="images/galerija/gallery1.thumb.jpg" alt="Highslide JS"
 title="Click to enlarge" />
</a>

Ovde ćemo iskoristiti opciju find and replace (desni klik – find and replace). Veoma korisna komanda kada treba da promenimo veći broj istih grešaka na sajtu.

U našem slučaju ../images treba da promenimo u images/galerija.

Desni klik – find and replace, u find ukucamo ../images, a u replace with images/galerija. Kliknemo replace all i uspešno smo implementirali skriptu na naš sajt.

6. Podešavanja

Većina skripti sadrži dodatna podešavanja i formatiranja.

Podešavanja radimo u JS fajlu. Pronađemo fajl koji koristi naša izabrana galerija (pogledamo u HEAD delu koji js fajl je povezan sa našom stranom), u ovom primeru to je highslide-with-gallery.js. Otvorimo taj fajl i izvršimo željene izmene. Podešavanja jezika su na početku fajla ( lang ) – jednostavno prevedemo izraze s engleskog. Ispod podešavanja jezika nalaze se ostala podešavanja: Brzina slajdova, boje, show credits isl.

Formatiranje radimo u CSS fajlu. Klasa class=“highslide-caption“ služi za formatiranje opisa slike. Opis može da sadrži i linkove, kao i druge sličice.

Za izmene ostalih elemenata prvo je potrebno da preko inspect element komande u browseru pronažemo odgovarajući element i liniju u CSS-u koja se na njega odnosi.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.