Photoswipe configuration

The Hotel contains template support for the PhotoSwipe gallery.

Gallery demo 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-gk cols-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 two adding additional CSS class- gk-gallery. This class is necessary for the PhotoSwipe script.

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

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

Every link contains few important elements:

  • Full URL to the 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 date-title attribute of the link.
  • Description of the slide (optional) as the date-desc attribute of the link.

Full gallery code is visible below:

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

showHideOpacity: true,
hideAnimationDuration: 0,
showAnimationDuration: 0,
Last modification: Tue 30 Jun 2015

NOTE! This site uses cookies and similar technologies.

If you not change browser settings, you agree to it. Learn more

I understand

COOKIE POLICY

www.milini.it COOKIE POLICY strives to protect and respect your privacy.
Check out the following information how we protect your information.
If you are using our website, you consent to the use and storage of cookies on your device.
You can still browse our website without cookies. (please visit our section of "HOW to DISABLE cookies").

WHAT ARE COOKIE

cookies are text strings that small sites visited by the user to send his Terminal (usually the browser), where they are stored and then transmitted to the same sites the next time they visit the same user. In the course of navigation on a site, you can receive on their terminals even cookies that are sent to web sites or from different servers (the "third party"), which may reside some elements (such as images, maps, sounds, links to specific pages on other domains) on the site that it is visiting.

TYPE OF COOKIE

Technical cookie

cookies are those used solely for the purpose of "making the transmission of a communication over an electronic communications network, or as strictly necessary for the service provider of the information society explicitly requested by the Subscriber or user to provide such service" (see art. 122, paragraph 1, of the code).They are not used for further purposes and are normally installed by the owner or operator of the web site. Can be divided into navigation cookie or session that guarantee normal browsing and using the website.For the installation of these cookies is not required the prior consent of the user, while it is understood the obligation to give notice pursuant to art. 13 of the code, that the site manager by using only those devices, can provide you with the terms it considers more appropriate.

Profiling cookies

profiling cookies are intended to create user profiles and are used in order to send advertising messages in line with the preferences expressed by the same in the context of browsing the net. Because of the particular invasion that these devices can have within the private sphere of the users, the European and Italian legislation provides that the user should be adequately informed about their use and express the right valid consent.

Applies to them art. 122 of the code provides that "where the storage of information in the terminal equipment of a contractor or user or access to information already stored are only allowed on condition that the contractor or the user has given consent after being informed with the simplified mode under art. 13, paragraph 3 "(article 122, paragraph 1, of the code).

HOW TO DISABLE COOKIE

cookies you can disable cookies by following the directions provided by major browsers:

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