Mega

Responsive Hotel Template

created: 10/11/2015
latest update: 10/11/2015
by: CantoThemes
www.cantothemes.com/
email: cantothemes@gmail.com

"Mega" is HTML5 template so there's no really "installation" required just unzip the main file you've downloaded from Themeforest and after unziping you have your all template ready to be used.

Enjoy!

Main menu used as default bootstrap Navbar structure. Get Bootstrap 3 navbar HTML structure Doc here

Home slider is used same as Bootstrap 3 Carousel. But carousel caption are customly designed. Read Bootstrap 3 Carousel doc here

Carousel Caption

Ccarousel caption html structure will be like this:

<div class="carousel-caption">
  <img src="images/stars.png" alt="">
  <h2>Welcome to Mega Hotel</h2>
  <p>Cogitavisse erant puerilis utrum efficiantur adhuc expeteretur.</p>
</div>

Img tag has 5 star image, H2 Tag is heading and p tag is sub-heading.

For makiing parallax any section. You just need to add .parallax class to section. Section must have background image.

JavaScript

If you need you can change javascript settings for parallax at js/script.js on line 14.

/*
* On Parallax for .parallax class
*/
$('.parallax').parallax("50%", 0.2);

Settings of all Owl Carousels starting form js/script.js on line 154.

/*
* Owl Carousel for Testimonials
*/
$("#mg-testimonial-slider").owlCarousel({
navigation : true,
singleItem : true,
pagination: false,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
transitionStyle : "backSlide"

});

/*
* Owl Carousel for Client Logo (Small 3 items Only)
*/
$("#mg-part-logos").owlCarousel({
items : 3,
itemsDesktop: [1199,3],
navigation : true,
pagination: false,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],

});

/*
* Owl Carousel for Client Logo (Full 5 items Only)
*/
$("#mg-part-logos-full").owlCarousel({
items : 5,
navigation : true,
pagination: false,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],

});

/*
* Owl Carousel for Blog post
*/
$(".mg-post-images-slider").owlCarousel({
singleItem : true,
navigation : true,
pagination: false,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],

});

Owl Carousel for room gallery

/*
* Owl Carousel for Gallery
*/
var sync1 = $("#mg-gallery");
var sync2 = $("#mg-gallery-thumb");
sync1.owlCarousel({
navigation : true,
singleItem : true,
pagination: false,
afterAction : syncPosition,
navigationText: ['<i class="fa fa-long-arrow-left"></i>', '<i class="fa fa-long-arrow-right"></i>'],

});

sync2.owlCarousel({
items : 3,
itemsDesktop: [1199,3],
itemsDesktopSmall: [979,3],
itemsTablet: [768,3],
itemsMobile: [479,3],
navigation : false,
pagination: false,
navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}

});

function syncPosition(el){
var current = this.currentItem;
$("#mg-gallery-thumb")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#mg-gallery-thumb").data("owlCarousel") !== undefined){
center(current)
}
}

sync2.on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});

function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}

if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}

}

Datepicker for room search form.

/*
* Room Search form Check in and out Datepicker
*/
$('.input-group.mg-check-in').datepicker({
startDate: "dateToday",
autoclose: true
});

$('.input-group.mg-check-in').on('hide', function (e) {


if (e.dates.length) {
var strDate = e.date;
strDate.setDate(strDate.getDate() + 1);

// $('.mg-check-out').datepicker('clearDates');
$('.mg-check-out').datepicker('setStartDate', strDate);
}

$(e.currentTarget).removeClass('focus');

});

$('.input-group.mg-check-in').on('show', function (e) {

$(e.currentTarget).addClass('focus');

});

$('.input-group.mg-check-out').on('show', function (e) {

$(e.currentTarget).addClass('focus');

});

$('.input-group.mg-check-out').on('hide', function (e) {

$(e.currentTarget).removeClass('focus');

});


$('.input-group.mg-check-in').on('changeDate', function (e) {

if (e.dates.length) {
var inDate = e.date,
outDate = $('.mg-check-out').datepicker('getDate');

if (outDate && inDate >= outDate) {
$('.mg-check-out').datepicker('clearDates');
}

} else {
$('.mg-check-out').datepicker('clearDates');
}
});

$('.input-group.mg-check-out').datepicker({
startDate: "dateToday",
autoclose: true
});

Setting you Google map at js/script.js on line 394

/*
* Google map for contact form
*/
if ($('#mg-map').length) {

   var map = new GMaps({
el: '#mg-map',
lat: -37.81792,
lng: 144.96506,
zoom: 17
});

map.addMarker({
lat: -37.81792,
lng: 144.96506,
title: 'Map',
infoWindow: {
content: '<strong>Envato</strong><br>Level 13, 2 Elizabeth St, Melbourne<br>Victoria 3000 Australia'
}
});
}

See at every html page, just after body tag starting: