Hotel Photo Gallery used in Events template

Hi!
I want to use a photo gallery from the Template Hotel Villa Bellucci in Events template.
I moved css code , but can not deal with js ( pop-up window does not work )
Please tell me what code i need

Could you please post an url to your site?

Could you please post an url to your site?

The site is located on the local server
investing in two screen shots
1 picture. This page thumbnail - with her all is well
2 shot - After I clicked on the thumbnail

Sorry but I will not be able to help you without seeing what you did and what you didn't do.

Hi, Now the site is available online ! I want to make on my site http://www.test.vperemen.com/foto Photo Gallery.
The sample that I want to build on - Photo Gallery On "Hotel" template. I have made ​​changes only in css. Please tell me what changes should be made to js and php?
Thank you in advance!

Lets start by adding this 2 js files:
js/photoswipe-ui.min.js
js/photoswipe.min.js
You need to attach them in templates/gk_hotel/layouts/blocks/head.php file this way:

Code: Select all

// Optional PhotoSwipe loading
if($this->API->get('js_photoswipe', '1') == '1') {
   $this->API->addJS($this->API->URLtemplate() . '/js/photoswipe.min.js');
   $this->API->addJS($this->API->URLtemplate() . '/js/photoswipe-ui.min.js');
}


just under this part:

Code: Select all

$this->API->addJS($this->API->URLtemplate() . '/js/modernizr.js');
$this->API->addJS($this->API->URLtemplate() . '/js/gk.scripts.js');
$this->API->addJS($this->API->URLtemplate() . '/js/gk.menu.js');
$this->API->addJS($this->API->URLtemplate() . '/js/scrollreveal.js');
$this->API->addJS($this->API->URLtemplate() . '/js/fitvids.jquery.js');


Thanks for the help! I did everything you said, but nothing has changed ...

It will not work as it is still some things to cover.
Next step would be to import code from footer.php (its on the bottom, starting with html comment).

Well, do it! What's next?

I'm pretty sure you could do a little bit by yourself. You must understand that we don't support such customisations

Ok, lets do one more step...
In file:
templates/gk_events/js/gk.scripts.js
you need to initialise photoswipe script. So please find this part:

Code: Select all

jQuery(document).ready(function() {
   if(jQuery('#gkHeaderNav').length > 0 && !jQuery('#gkHeaderNav').hasClass('active')) {      
      jQuery(window).scroll(function() {
         var currentPosition = jQuery(window).scrollTop();

         if(
            currentPosition >= jQuery('#gkHeader').outerHeight() &&
            !jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').addClass('active');
         } else if(
            currentPosition < jQuery('#gkHeader').outerHeight() &&
            jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').removeClass('active');
         }
      });
   }
   
   // FAQ
   jQuery('.gk-faq').each(function(i, faq) {
      var dt_list = jQuery(faq).children('dt');
      dt_list.each(function(i, dt) {
         dt = jQuery(dt);
         dt.click(function() {
            dt_list.each(function(j, dt_element) {
               if(i !== j) {
                  jQuery(dt_element).removeClass('active');
               }
            });
            dt.toggleClass('active');
         });
      });
   });
});


and change it to:

Code: Select all

jQuery(document).ready(function() {
   if(jQuery('#gkHeaderNav').length > 0 && !jQuery('#gkHeaderNav').hasClass('active')) {      
      jQuery(window).scroll(function() {
         var currentPosition = jQuery(window).scrollTop();

         if(
            currentPosition >= jQuery('#gkHeader').outerHeight() &&
            !jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').addClass('active');
         } else if(
            currentPosition < jQuery('#gkHeader').outerHeight() &&
            jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').removeClass('active');
         }
      });
   }
   
   // FAQ
   jQuery('.gk-faq').each(function(i, faq) {
      var dt_list = jQuery(faq).children('dt');
      dt_list.each(function(i, dt) {
         dt = jQuery(dt);
         dt.click(function() {
            dt_list.each(function(j, dt_element) {
               if(i !== j) {
                  jQuery(dt_element).removeClass('active');
               }
            });
            dt.toggleClass('active');
         });
      });
   });
   // PhotoSwipe script
   var initPhotoSwipeFromDOM = function(gallerySelector) {
       // parse slide data (url, title, size ...) from DOM elements
       // (children of gallerySelector)
       var parseThumbnailElements = function(el) {
           var thumbElements = jQuery(el).find('a'),
               numNodes = thumbElements.length,
               items = [],
               figureEl,
               linkEl,
               size,
               item;
   
           thumbElements.each(function(i, link) {
               link = jQuery(link);
               size = link.attr('data-size').split('x');
   
               // create slide object
               item = {
                   src: link.attr('href'),
                   w: parseInt(size[0], 10),
                   h: parseInt(size[1], 10)
               };
   
               if(link.attr('data-title') || link.attr('data-desc')) {
                   item.title = '';
                  
                   if(link.attr('data-title')) {
                      item.title += '<h3>' + link.attr('data-title') + '</h3>';
                   }
                  
                   if(link.attr('data-desc')) {
                      item.title += '<span>' + link.attr('data-desc') + '</span>';
                   }
               }
   
               item.msrc = link.find('img').first().attr('src');
               item.el = link; // save link to element for getThumbBoundsFn
               // Detect the data-order attribute
               if(
                  jQuery(window).outerWidth() > jQuery(document.body).attr('data-mobile-width') &&
                  link.attr('data-order')
               ) {
                  items[parseInt(link.attr('data-order'), 10) - 1] = item;
               } else {
                  items.push(item);
               }
           });
   
           return items;
       };
   
       // find nearest parent element
       var closest = function closest(el, fn) {
           return el && ( fn(el) ? el : closest(el.parentNode, fn) );
       };
   
       // triggers when user clicks on thumbnail
       var onThumbnailsClick = function(e) {
           e.preventDefault();   
           // find root element of slide
           var clickedListItem = closest(e.target, function(el) {
               return (el.tagName && el.tagName.toUpperCase() === 'A');
           });
   
           if(!clickedListItem) {
               return;
           }
   
           // find index of clicked item by looping through all child nodes
           // alternatively, you may define index via data- attribute
           var clickedGallery = jQuery(clickedListItem).parents('.gk-gallery'),
               childNodes = clickedGallery.find('a'),
               numChildNodes = childNodes.length,
               nodeIndex = 0,
               index;
   
           for (var i = 0; i < numChildNodes; i++) {
               if(childNodes[i] === clickedListItem) {
                   index = nodeIndex;
                   break;
               }
               nodeIndex++;
           }

         if(
            jQuery(window).outerWidth() > jQuery(document.body).attr('data-mobile-width') &&
            clickedListItem.hasAttribute('data-order')
         ) {
            index = parseInt(clickedListItem.getAttribute('data-order'), 10) - 1;
         }

           if(index >= 0) {
               // open PhotoSwipe if valid index found
               openPhotoSwipe( index, clickedGallery );
           }
           return false;
       };
   
       // parse picture index and gallery index from URL (#&pid=1&gid=2)
       var photoswipeParseHash = function() {
           var hash = window.location.hash.substring(1),
           params = {};
   
           if(hash.length < 5) {
               return params;
           }
   
           var vars = hash.split('&');
           for (var i = 0; i < vars.length; i++) {
               if(!vars[i]) {
                   continue;
               }
               var pair = vars[i].split('='); 
               if(pair.length < 2) {
                   continue;
               }           
               params[pair[0]] = pair[1];
           }
   
           if(params.gid) {
               params.gid = parseInt(params.gid, 10);
           }
   
           if(!params.hasOwnProperty('pid')) {
               return params;
           }
           params.pid = parseInt(params.pid, 10);
           return params;
       };
   
       var openPhotoSwipe = function(index, galleryElement, disableAnimation) {
           var pswpElement = document.querySelectorAll('.pswp')[0],
               gallery,
               options,
               items;
   
           items = parseThumbnailElements(galleryElement);
   
           // define options (if needed)
           options = {
               index: index,
               showHideOpacity: true,
               hideAnimationDuration: 0,
               showAnimationDuration: 0,
              
   
               // define gallery index (for URL)
               galleryUID: jQuery(galleryElement).attr('data-pswp-uid'),
   
               getThumbBoundsFn: function(index) {
                   // See Options -> getThumbBoundsFn section of documentation for more info
                   var thumbnail = items[index].el.find('img').first(), // find thumbnail
                       rect = {
                          "left": thumbnail.offset().left,
                          "top": thumbnail.offset().top,
                          "width": thumbnail.outerWidth()
                       };
                   return {x:rect.left, y:rect.top, w:rect.width};
               }
   
           };
   
           if(disableAnimation) {
               options.showAnimationDuration = 0;
           }
   
           // Pass data to PhotoSwipe and initialize it
           gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
           gallery.init();
       };
   
       // loop through all gallery elements and bind events
       var galleryElements = jQuery(gallerySelector);
   
       for(var i = 0, l = galleryElements.length; i < l; i++) {
           galleryElements[i].setAttribute('data-pswp-uid', i+1);
           galleryElements[i].onclick = onThumbnailsClick;
       }
   
       // Parse URL and open gallery if it contains #&pid=3&gid=1
       var hashData = photoswipeParseHash();
       if(hashData.pid > 0 && hashData.gid > 0) {
           openPhotoSwipe( hashData.pid - 1 ,  galleryElements[ hashData.gid - 1 ], true );
       }
   };
   
   // execute above function if the gallery elements exists
   if(jQuery('.gk-gallery').length) {
      initPhotoSwipeFromDOM(jQuery('.gk-gallery'));
   }
});


The addition goes just before las closing:

Code: Select all

});


you need to place it in right place .

I did everything as you said...
I really did not understand what and where I need to add ... If you can, help me get the result

I guess you did something wrong:
http://www.test.vperemen.com/templates/ ... scripts.js
gives 404

Thank you for your patience
I think it turned out!
THANK YOU !!!!!!!

Hi Another small question ...
I copied the font "hotel-pixellove" folder in my template with fonts . And stuck ) I can not understand what the selectors need to specify in the settings of the template. Please help last time ) ) )

This question doesn't correspond to original topic.
Please create a separate forum thread.