PhotoSwipe configuration

The Hotel template contains support for the PhotoSwipe gallery.

Demo gallery is available here.

In order to create the gallery, you will need to use a special structure based on the gk-cols structure enhanced by few elements:

<div class="gk-cols gk-gallery" data-cols="3">
<div>
CONTENT OF THE FIRST COLUMN
</div>
<div>
CONTENT OF THE SECOND COLUMN
</div>
<div>
CONTENT OF THE THIRD COLUMN
</div>
</div>

In the above code the structure of the gk-cols is different due adding additional CSS class - gk-gallery. This class is necessary for the PhotoSwipe script.

The content of the columns is generated by adding following links:

<a 
   href="/images/demo/gallery/image1.jpg" 
   data-size="1280x1280" 
   data-title="Modern clock" 
   data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."
>
   <img src="/images/demo/gallery/thumb1.jpg" alt="Thumbnail I" />
</a>

Every link contains few important elements:

  • Url to the full image in the href attribute.
  • Thumbnail image as the img tag inside the link.
  • Dimensions of the full image in the data-size attribute of the link.
  • Title of the slide (optional) as the data-title attribute of the link.
  • Description of the slide (optional) as the data-desc attribute of the link.

Full gallery code is visible below:

<div class="gk-cols gk-gallery" data-cols="3">
<div>
<a href="/images/demo/gallery/image1.jpg" data-size="1280x1280" data-title="Modern clock" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb1.jpg" alt="Thumbnail I" /></a>
<a href="/images/demo/gallery/image2.jpg" data-size="1280x853" data-title="Painting love" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb2.jpg" alt="Thumbnail II" /></a>
<a href="/images/demo/gallery/image3.jpg" data-size="1164x872" data-title="Green Barrel" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb3.jpg" alt="Thumbnail III" /></a>
<a href="/images/demo/gallery/image4.jpg" data-size="1280x853" data-title="Wooden doors" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb4.jpg" alt="Thumbnail IV" /></a>
<a href="/images/demo/gallery/image5.jpg" data-size="852x1280" data-title="Japanese dinner" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb5.jpg" alt="Thumbnail V" /></a>
</div>
<div>
<a href="/images/demo/gallery/image6.jpg" data-size="853x1280" data-title="Photography art" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb6.jpg" alt="Thumbnail VI" /></a>
<a href="/images/demo/gallery/image7.jpg" data-size="1280x853" data-title="Sailing in the fog" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb7.jpg" alt="Thumbnail VII" /></a>
<a href="/images/demo/gallery/image8.jpg" data-size="1280x853" data-title="Travel time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb8.jpg" alt="Thumbnail VIII" /></a>
<a href="/images/demo/gallery/image9.jpg" data-size="960x1280" data-title="For ged" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb9.jpg" alt="Thumbnail IX" /></a>
<a href="/images/demo/gallery/image10.jpg" data-size="1280x853" data-title="Summer time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb10.jpg" alt="Thumbnail X" /></a>
</div>
<div>
<a href="/images/demo/gallery/image11.jpg" data-size="1280x853" data-title="Mobile music" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb11.jpg" alt="Thumbnail XI" /></a>
<a href="/images/demo/gallery/image12.jpg" data-size="1155x1280" data-title="Guitar artist" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb12.jpg" alt="Thumbnail XII" /></a>
<a href="/images/demo/gallery/image13.jpg" data-size="873x1280" data-title="Typewriter" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb13.jpg" alt="Thumbnail XIII" /></a>
<a href="/images/demo/gallery/image14.jpg" data-size="1280x853" data-title="Morning coffee" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb14.jpg" alt="Thumbnail XIV" /></a>
<a href="/images/demo/gallery/image15.jpg" data-size="1280x848" data-title="Fitness time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb15.jpg" alt="Thumbnail XV" /></a>
</div>
</div>

Enabling the animations

As default the animations and transitions are disabled due fact that images have different proportions as thumbnails and as full images. But if you have a similar proportions on the thumbnails and full images you can activate the animations again.

In the js/gk.scripts.js file please uncomment the following lines:

showHideOpacity: true,
hideAnimationDuration: 0,
showAnimationDuration: 0,
Last modification: Mar 30 Giu 2015

NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

INFORMATIVA SUI COOKIE

www.milini.it si impegna costantemente per la protezione ed il rispetto della tua privacy.
Scopri con la seguente informativa come tuteliamo i tuoi dati.
Se utilizzi il nostro sito Internet, acconsentite all'uso e alla memorizzazione dei cookies sul tuo dispositivo.
Sarà comunque possibile consultare il nostro sito Internet anche senza cookies. (visita il capitolo di approfondimento "COME DISABILITARE I COOKIE").

COSA SONO I COOKIE

I cookie sono stringhe di testo di piccole dimensioni che i siti visitati dall'utente inviano al suo terminale (solitamente al browser), dove vengono memorizzati per essere poi ritrasmessi agli stessi siti alla successiva visita del medesimo utente. Nel corso della navigazione su un sito, l'utente può ricevere sul suo terminale anche cookie che vengono inviati da siti o da web server diversi (c.d. "terze parti"), sui quali possono risiedere alcuni elementi (quali, ad esempio, immagini, mappe, suoni, specifici link a pagine di altri domini) presenti sul sito che lo stesso sta visitando.

TIPOLOGIA DI COOKIE

Cookies tecnici

I cookie tecnici sono quelli utilizzati al solo fine di "effettuare la trasmissione di una comunicazione su  una  rete  di  comunicazione elettronica, o nella misura strettamente necessaria al  fornitore  di un servizio della societa' dell'informazione esplicitamente richiesto dall'abbonato o dall'utente a erogare tale servizio" (cfr. art.  122, comma 1, del Codice).

Essi non vengono utilizzati per scopi ulteriori e sono  normalmente installati direttamente dal titolare o gestore del sito web.  Possono essere  suddivisi  in  cookie  di  navigazione  o  di  sessione,  che garantiscono  la  normale  navigazione  e fruizione  del  sito   web.

Per l'installazione di tali cookie non e' richiesto  il  preventivo consenso  degli  utenti,  mentre  resta  fermo  l'obbligo   di   dare l'informativa ai sensi dell'art. 13 del Codice, che  il  gestore  del sito, qualora utilizzi soltanto tali dispositivi, potra' fornire  con le modalita' che ritiene piu' idonee. 

Cookies di profilazione

I cookie di profilazione  sono  volti  a  creare  profili  relativi all'utente  e  vengono  utilizzati  al  fine  di   inviare   messaggi pubblicitari in linea con  le  preferenze  manifestate  dallo  stesso nell'ambito della navigazione in rete. In ragione  della  particolare invasivita' che tali  dispositivi  possono  avere  nell'ambito  della sfera privata degli utenti, la normativa europea e  italiana  prevede che l'utente debba  essere  adeguatamente  informato  sull'uso  degli stessi ed esprimere cosi' il proprio valido consenso. 

Ad essi si riferisce l'art. 122  del  Codice  laddove  prevede  che "l'archiviazione delle informazioni nell'apparecchio terminale di  un contraente o di un utente o l'accesso a informazioni gia'  archiviate sono consentiti unicamente a condizione che il contraente o  l'utente abbia espresso il proprio consenso dopo essere stato informato con le modalita' semplificate di cui all'art. 13, comma 3" (art. 122,  comma 1, del Codice).

COME DISABILITARE I COOKIE

E' possibile disabilitare i cookies seguendo le indicazioni fornite dai principali browser:

Chrome
https://support.google.com/chrome/answer/95647?hl=it

Firefox
http://support.mozilla.org/it/kb/Eliminare%20i%20cookie

Internet Explorer
http://windows.microsoft.com/it-it/internet-explorer/delete-manage-cookies#ie=ie-10

Opera
http://www.opera.com/help/tutorials/security/privacy/

Safari
http://support.apple.com/kb/ph11920

 

×

Log in