first commit
This commit is contained in:
879
resources/assets/js/demos/demo-photography.js
Normal file
879
resources/assets/js/demos/demo-photography.js
Normal file
@ -0,0 +1,879 @@
|
||||
/*
|
||||
Name: Photography
|
||||
Written by: Okler Themes - (http://www.okler.net)
|
||||
Theme Version: 12.1.0
|
||||
*/
|
||||
|
||||
// Disable Scroll to Top
|
||||
theme.PluginScrollToTop.initialize = () => {};
|
||||
|
||||
(($ => {
|
||||
// Slider Options
|
||||
const sliderOptions = {
|
||||
sliderType: 'standard',
|
||||
sliderLayout: 'fullscreen',
|
||||
fullScreenOffsetContainer: '#header',
|
||||
delay: 5000,
|
||||
disableProgressBar: 'on',
|
||||
gridwidth: 1170,
|
||||
gridheight: 500,
|
||||
lazyType: "none",
|
||||
shadow: 0,
|
||||
spinner: "off",
|
||||
shuffle: "off",
|
||||
autoHeight: "off",
|
||||
fullScreenAlignForce: "off",
|
||||
fullScreenOffset: "",
|
||||
hideThumbsOnMobile: "off",
|
||||
hideSliderAtLimit: 0,
|
||||
hideCaptionAtLimit: 0,
|
||||
hideAllCaptionAtLilmit: 0,
|
||||
debugMode: false,
|
||||
fallbacks: {
|
||||
simplifyAll: "off",
|
||||
nextSlideOnWindowFocus: "off",
|
||||
disableFocusListener: false,
|
||||
},
|
||||
navigation: {
|
||||
keyboardNavigation: "on",
|
||||
keyboard_direction: "horizontal",
|
||||
mouseScrollNavigation: "on",
|
||||
onHoverStop: "off",
|
||||
touch: {
|
||||
touchenabled: "on",
|
||||
swipe_threshold: 75,
|
||||
swipe_min_touches: 1,
|
||||
swipe_direction: "horizontal",
|
||||
drag_block_vertical: false
|
||||
},
|
||||
arrows: {
|
||||
enable: true,
|
||||
style: "arrows-portfolio-detail-1",
|
||||
left : {
|
||||
container:"slider",
|
||||
h_align:"left",
|
||||
v_align:"center",
|
||||
h_offset:0,
|
||||
v_offset:0,
|
||||
},
|
||||
right : {
|
||||
v_align:"center",
|
||||
container:"slider",
|
||||
h_align:"right",
|
||||
h_offset:0,
|
||||
v_offset:0
|
||||
}
|
||||
}
|
||||
},
|
||||
parallax:{
|
||||
type:"on",
|
||||
levels:[20,40,60,80,100],
|
||||
origo:"enterpoint",
|
||||
speed:400,
|
||||
bgparallax:"on",
|
||||
disable_onmobile:"off"
|
||||
}
|
||||
};
|
||||
|
||||
if( $('.photography-demo-3').get(0) ) {
|
||||
sliderOptions.fullScreenOffsetContainer = null;
|
||||
sliderOptions.navigation.arrows.style = 'arrows-side-header-1';
|
||||
sliderOptions.navigation.arrows.hide_onleave = false;
|
||||
|
||||
if( $(window).width() < 992 ) {
|
||||
sliderOptions.fullScreenOffsetContainer = '#header';
|
||||
}
|
||||
}
|
||||
|
||||
if( $('.photography-demo-2').get(0) ) {
|
||||
sliderOptions.fullScreenOffsetContainer = null;
|
||||
sliderOptions.navigation.arrows.style = 'arrows-transparent-header-photography-1';
|
||||
sliderOptions.navigation.arrows.hide_onleave = false;
|
||||
sliderOptions.navigation.arrows.left.h_offset = 20;
|
||||
sliderOptions.navigation.arrows.right.h_offset = 20;
|
||||
}
|
||||
|
||||
if( $('.rev_about_us').get(0) ) {
|
||||
sliderOptions.navigation.mouseScrollNavigation = false;
|
||||
}
|
||||
|
||||
// Slider Init
|
||||
$(window).on('load', () => {
|
||||
$('#revolutionSlider').revolution(sliderOptions);
|
||||
});
|
||||
|
||||
/*
|
||||
Custom Portfolio Details Load More
|
||||
*/
|
||||
const portfolioDetailLoadMore = {
|
||||
|
||||
pages: 0,
|
||||
currentPage: 0,
|
||||
$wrapper: $('#portfolioDetailLoadMoreWrapper'),
|
||||
$btn: $('#portfolioDetailLoadMore'),
|
||||
$btnWrapper: $('#portfolioDetailLoadMoreBtnWrapper'),
|
||||
$loader: $('#portfolioDetailLoadMoreLoader'),
|
||||
|
||||
build() {
|
||||
|
||||
const self = this;
|
||||
|
||||
self.pages = self.$wrapper.data('total-pages');
|
||||
|
||||
if(self.pages <= 1) {
|
||||
|
||||
self.$btnWrapper.remove();
|
||||
return;
|
||||
|
||||
} else {
|
||||
|
||||
// init isotope
|
||||
self.$wrapper.isotope();
|
||||
|
||||
self.$btn.on('click', () => {
|
||||
self.loadMore();
|
||||
});
|
||||
|
||||
// Lazy Load
|
||||
if(self.$btn.hasClass('btn-portfolioDetail-lazy-load')) {
|
||||
theme.fn.intObs( '#portfolioDetailLoadMore', "$('#portfolioDetailLoadMore').trigger('click');", {
|
||||
rootMargin: '0px 0px 0px 0px'
|
||||
} );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
loadMore() {
|
||||
|
||||
const self = this;
|
||||
|
||||
self.$btn.hide();
|
||||
self.$loader.show();
|
||||
|
||||
// Ajax
|
||||
$.ajax({
|
||||
url: 'ajax/demo-photography-portfolio-ajax-on-page-load-more.html',
|
||||
complete({responseText}) {
|
||||
|
||||
const $items = $(responseText);
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
self.$wrapper.append($items)
|
||||
|
||||
self.$wrapper.isotope('appended', $items);
|
||||
|
||||
self.$wrapper.isotope('layout');
|
||||
|
||||
self.currentPage++;
|
||||
|
||||
if(self.currentPage < self.pages) {
|
||||
self.$btn.show().blur();
|
||||
} else {
|
||||
self.$btnWrapper.remove();
|
||||
}
|
||||
|
||||
self.$wrapper.on( 'layoutComplete', laidOutItems => {
|
||||
|
||||
// Carousel
|
||||
$(() => {
|
||||
$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
|
||||
const $this = $(this);
|
||||
let opts;
|
||||
|
||||
const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginCarousel(opts);
|
||||
setTimeout(() => {
|
||||
$this.owlCarousel('refresh');
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Ajax On Page
|
||||
ajaxOnPagePortfolioDetails.build();
|
||||
|
||||
self.$loader.hide();
|
||||
|
||||
// Refresh Parallax
|
||||
$(window).trigger('scroll');
|
||||
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if($('#portfolioDetailLoadMoreWrapper').get(0)) {
|
||||
portfolioDetailLoadMore.build();
|
||||
}
|
||||
|
||||
/*
|
||||
Custom Portfolio Infinite Scroll
|
||||
*/
|
||||
const portfolioInfiniteScroll = {
|
||||
|
||||
pages: 0,
|
||||
currentPage: 0,
|
||||
$wrapper: $('.portfolioInfiniteScrollWrapper'),
|
||||
$btn: $('#portfolioInfiniteScrollLoadMore'),
|
||||
$btnWrapper: $('#portfolioInfiniteScrollLoadMoreBtnWrapper'),
|
||||
$loader: $('#portfolioInfiniteScrollLoadMoreLoader'),
|
||||
|
||||
build() {
|
||||
|
||||
const self = this;
|
||||
|
||||
self.pages = self.$wrapper.data('total-pages');
|
||||
|
||||
if(self.pages <= 1) {
|
||||
|
||||
self.$btnWrapper.remove();
|
||||
return;
|
||||
|
||||
} else {
|
||||
|
||||
// init isotope
|
||||
self.$wrapper.isotope();
|
||||
|
||||
self.$btn.on('click', () => {
|
||||
self.loadMore();
|
||||
});
|
||||
|
||||
// Lazy Load
|
||||
if(self.$btn.hasClass('btn-portfolioInfiniteScroll-lazy-load')) {
|
||||
theme.fn.intObs( '#portfolioInfiniteScrollLoadMore', "$('#portfolioInfiniteScrollLoadMore').trigger('click');", {
|
||||
rootMargin: '0px 0px 0px 0px'
|
||||
}, true );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
loadMore() {
|
||||
|
||||
const self = this;
|
||||
|
||||
self.$btn.hide();
|
||||
self.$loader.show();
|
||||
|
||||
// Ajax
|
||||
$.ajax({
|
||||
url: 'ajax/demo-photography-portfolio-infinite-scroll-load-more.html',
|
||||
complete({responseText}) {
|
||||
|
||||
const $items = $(responseText);
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
self.$wrapper.append($items)
|
||||
|
||||
self.$wrapper.isotope('appended', $items);
|
||||
|
||||
self.$wrapper.isotope('layout');
|
||||
|
||||
self.currentPage++;
|
||||
|
||||
if(self.currentPage < self.pages) {
|
||||
self.$btn.show().blur();
|
||||
} else {
|
||||
self.$btnWrapper.remove();
|
||||
}
|
||||
|
||||
self.$wrapper.on( 'layoutComplete', laidOutItems => {
|
||||
// Add new items to gallery
|
||||
self.$wrapper.find('.item-appended').each(function(){
|
||||
const imgsrc = $(this).find('.thumb-info-background').attr('data-src'), imgThumbsrc = $(this).find('.thumb-info-background').attr('data-thumb-src'), clone = $('#thumbGalleryDetail .owl-item > div').first().clone(), cloneThumb = $('#thumbGalleryThumbs .owl-item > div').first().clone();
|
||||
|
||||
// Create images
|
||||
clone.find('img').attr('src',imgsrc);
|
||||
cloneThumb.find('img').attr('src',imgThumbsrc);
|
||||
|
||||
// Add images
|
||||
$('#thumbGalleryDetail').owlCarousel().trigger('add.owl.carousel', [clone]);
|
||||
$('#thumbGalleryThumbs').owlCarousel().trigger('add.owl.carousel', [cloneThumb]);
|
||||
|
||||
$(this).removeClass('item-appended');
|
||||
});
|
||||
|
||||
// Carousel
|
||||
$(() => {
|
||||
$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
|
||||
const $this = $(this);
|
||||
let opts;
|
||||
|
||||
const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginCarousel(opts);
|
||||
setTimeout(() => {
|
||||
$this.owlCarousel('refresh');
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
// Lightbox - Clicked Item
|
||||
$('a[href="#photographyLightbox"]').on('click', function(){
|
||||
if($('.grid-sizer').get(0)) {
|
||||
clickedItem = $(this).parent().parent().index() - 1;
|
||||
} else {
|
||||
clickedItem = $(this).parent().parent().index();
|
||||
}
|
||||
});
|
||||
|
||||
// Lightbox
|
||||
$('.popup-with-move-anim').magnificPopup(portfolioLightboxOptions);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
self.$loader.hide();
|
||||
|
||||
// Refresh Parallax
|
||||
$(window).trigger('scroll');
|
||||
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if($('.portfolioInfiniteScrollWrapper').get(0)) {
|
||||
portfolioInfiniteScroll.build();
|
||||
}
|
||||
|
||||
/*
|
||||
* Ajax on Page
|
||||
*/
|
||||
var ajaxOnPagePortfolioDetails = {
|
||||
|
||||
pages: [],
|
||||
$ajaxBox: $('#porfolioDetailsAjaxBox'),
|
||||
$ajaxBoxContent: $('#porfolioDetailsAjaxBoxContent'),
|
||||
|
||||
build() {
|
||||
|
||||
const self = this;
|
||||
|
||||
$('a[data-ajax-on-page]').each(function() {
|
||||
self.add($(this));
|
||||
});
|
||||
|
||||
$(document).on('mousedown', 'a[data-ajax-on-page]', ev => {
|
||||
if (ev.which == 2) {
|
||||
ev.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
add($el) {
|
||||
|
||||
const self = this, href = $el.attr('data-href');
|
||||
|
||||
self.pages.push(href);
|
||||
|
||||
$el.on('click', e => {
|
||||
e.preventDefault();
|
||||
self.show(self.pages.indexOf(href));
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
events() {
|
||||
|
||||
const self = this;
|
||||
|
||||
// Slider
|
||||
sliderOptions.navigation.mouseScrollNavigation = false;
|
||||
$('#revolutionSlider').revolution(sliderOptions);
|
||||
|
||||
// Carousel
|
||||
if ($.isFunction($.fn['themePluginCarousel'])) {
|
||||
|
||||
$(() => {
|
||||
$('[data-plugin-carousel]:not(.manual), .owl-carousel:not(.manual)').each(function() {
|
||||
const $this = $(this);
|
||||
let opts;
|
||||
|
||||
const pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
|
||||
if (pluginOptions)
|
||||
opts = pluginOptions;
|
||||
|
||||
$this.themePluginCarousel(opts);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
show(i) {
|
||||
|
||||
const self = this;
|
||||
|
||||
self.$ajaxBoxContent.empty();
|
||||
self.$ajaxBox.removeClass('ajax-box-init').addClass('ajax-box-loading');
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: self.$ajaxBox.offset().top - 100
|
||||
}, 300, 'easeOutQuad');
|
||||
|
||||
// Ajax
|
||||
$.ajax({
|
||||
url: self.pages[i],
|
||||
complete({responseText}) {
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
self.$ajaxBoxContent.html(responseText);
|
||||
self.$ajaxBox.removeClass('ajax-box-loading');
|
||||
|
||||
self.events();
|
||||
|
||||
}, 1000);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if($('#porfolioDetailsAjaxBox').get(0)) {
|
||||
ajaxOnPagePortfolioDetails.build();
|
||||
}
|
||||
|
||||
/*
|
||||
* Portfolio Grid - Init isotope
|
||||
*/
|
||||
$(window).on('load', () => {
|
||||
const $portfolioGrid = $('#portfolioGrid'), $ourBlog = $('#ourBlog'), gridSizer = $portfolioGrid.attr('data-grid-sizer');
|
||||
|
||||
// Portfolio Grid
|
||||
if( $portfolioGrid.get(0) ) {
|
||||
$portfolioGrid.isotope({
|
||||
itemSelector: '.isotope-item',
|
||||
masonry: {
|
||||
columnWidth: gridSizer,
|
||||
gutter: 0
|
||||
}
|
||||
});
|
||||
|
||||
$portfolioGrid.isotope('layout');
|
||||
}
|
||||
|
||||
if( $ourBlog.get(0) ) {
|
||||
$ourBlog.isotope({
|
||||
itemSelector: '.isotope-item',
|
||||
masonry: {
|
||||
gutter: 0
|
||||
}
|
||||
});
|
||||
|
||||
$ourBlog.isotope('layout');
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Horizontal Scroll
|
||||
*/
|
||||
const $horizontalScroll = {
|
||||
$horizontalScrollWrapper : $('#horizontalScrollBox'),
|
||||
$horizontalScrollContent : $('#horizontalScrollBox .content'),
|
||||
$horizontalScrollItem : $('#horizontalScrollBox .content .horizontal-scroll-item-wrapper'),
|
||||
|
||||
build() {
|
||||
const self = this;
|
||||
|
||||
self.setContentWidth();
|
||||
self.buttonNavigation();
|
||||
self.disableEnableButtons();
|
||||
},
|
||||
setContentWidth() {
|
||||
const self = this;
|
||||
let totalWidth = 0;
|
||||
|
||||
$(self.$horizontalScrollItem).each(function(e){
|
||||
const boxImageWidth = $(this).outerWidth(true);
|
||||
|
||||
totalWidth = (totalWidth + boxImageWidth);
|
||||
});
|
||||
|
||||
self.$horizontalScrollContent.width( totalWidth );
|
||||
},
|
||||
isElementInView(element, fullyInView) {
|
||||
const pageLeft = $(window).scrollLeft(), pageRight = pageLeft + $(window).width(), elementLeft = $(element).offset().left, elementRight = elementLeft + $(element).width();
|
||||
|
||||
if (fullyInView === true) {
|
||||
return ((pageLeft < elementLeft) && (pageRight > elementRight));
|
||||
} else {
|
||||
return ((elementLeft <= pageRight) && (elementRight >= pageLeft));
|
||||
}
|
||||
},
|
||||
buttonNavigation() {
|
||||
const self = this;
|
||||
const nextButton = self.$horizontalScrollWrapper.find('.custom-portfolio-navigation .next');
|
||||
const prevButton = self.$horizontalScrollWrapper.find('.custom-portfolio-navigation .prev');
|
||||
const totalItems = self.$horizontalScrollItem.length - 1;
|
||||
let screen = 0;
|
||||
let distance = 0;
|
||||
let index = 0;
|
||||
let flag = false;
|
||||
let atualItem;
|
||||
|
||||
prevButton.on('click', () => {
|
||||
if( !flag ){
|
||||
flag = true;
|
||||
|
||||
if( index > 0 ) {
|
||||
index--;
|
||||
}
|
||||
atualItem = self.$horizontalScrollItem.eq(index);
|
||||
|
||||
// Check if Element in View
|
||||
const isElementInView = self.isElementInView(atualItem, false);
|
||||
if( !isElementInView ) {
|
||||
self.$horizontalScrollItem.each(function(){
|
||||
const inView = self.isElementInView($(this), false);
|
||||
|
||||
if( inView ) {
|
||||
atualItem = $(this);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// If Demo 3
|
||||
if($('.photography-demo-3').get(0)) {
|
||||
screen = (($(window).width() - 255 ) - atualItem.outerWidth(true)) / 2;
|
||||
} else {
|
||||
screen = ($(window).width() - atualItem.outerWidth(true)) / 2;
|
||||
}
|
||||
|
||||
distance = (atualItem.position().left - screen);
|
||||
|
||||
$('#horizontalScrollBox').animate({ scrollLeft: distance }, 300, () => {
|
||||
flag = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
nextButton.on('click', () => {
|
||||
if( !flag ){
|
||||
flag = true;
|
||||
|
||||
if( index < totalItems ) {
|
||||
index++;
|
||||
}
|
||||
atualItem = self.$horizontalScrollItem.eq(index);
|
||||
|
||||
// Check if Element in View
|
||||
const isElementInView = self.isElementInView(atualItem, false);
|
||||
if( !isElementInView ) {
|
||||
self.$horizontalScrollItem.each(function(){
|
||||
const inView = self.isElementInView($(this), false);
|
||||
|
||||
if( inView ) {
|
||||
atualItem = $(this);
|
||||
index = $(this).index();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// If Demo 3
|
||||
if($('.photography-demo-3').get(0)) {
|
||||
screen = (($(window).width() - 255 ) - atualItem.outerWidth(true)) / 2;
|
||||
} else {
|
||||
screen = ($(window).width() - atualItem.outerWidth(true)) / 2;
|
||||
}
|
||||
|
||||
distance = (atualItem.position().left - screen);
|
||||
|
||||
$('#horizontalScrollBox').animate({ scrollLeft: distance }, 300, () => {
|
||||
flag = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
disableEnableButtons() {
|
||||
const self = this, nextButton = self.$horizontalScrollWrapper.find('.custom-portfolio-navigation .next'), prevButton = self.$horizontalScrollWrapper.find('.custom-portfolio-navigation .prev');
|
||||
|
||||
self.$horizontalScrollWrapper.on('scroll', function(){
|
||||
if( $(this).scrollLeft() == 0 ) {
|
||||
prevButton.addClass('disable-button');
|
||||
} else {
|
||||
prevButton.removeClass('disable-button');
|
||||
}
|
||||
|
||||
if( $(this).scrollLeft() > ((self.$horizontalScrollContent.width() - $(window).width()) - 1) ) {
|
||||
nextButton.addClass('disable-button');
|
||||
} else {
|
||||
nextButton.removeClass('disable-button');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if($('#horizontalScrollBox').get(0)) {
|
||||
$horizontalScroll.build();
|
||||
|
||||
$(window).trigger('resize');
|
||||
|
||||
const $window = $(window);
|
||||
|
||||
// Mousewheel horizontal scroll
|
||||
$('#horizontalScrollBox').mousewheel(function(event, delta) {
|
||||
if ($window.width() > 991) {
|
||||
this.scrollLeft -= (delta * 60);
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Build $horizontalScroll on resize
|
||||
$window.on('load', () => {
|
||||
$(document).ready(() => {
|
||||
$(window).afterResize(() => {
|
||||
$horizontalScroll.setContentWidth();
|
||||
|
||||
if($('.photography-demo-2').get(0)) {
|
||||
$(".thumb-info-wrapper img").css('transition','ease all 5s');
|
||||
$(".thumb-info-wrapper img").on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", e => {
|
||||
$horizontalScroll.setContentWidth();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if($('.photography-demo-2').get(0)) {
|
||||
$(window).on('resize', () => {
|
||||
$(".thumb-info-wrapper img").css('transition','none');
|
||||
});
|
||||
}
|
||||
|
||||
$(window).trigger('resize');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Lightbox
|
||||
*/
|
||||
var clickedItem;
|
||||
|
||||
let removeShowThumbsTimeout;
|
||||
|
||||
var portfolioLightboxOptions = {
|
||||
type: 'inline',
|
||||
|
||||
fixedContentPos: true,
|
||||
fixedBgPos: true,
|
||||
|
||||
overflowY: 'hidden',
|
||||
|
||||
closeBtnInside: true,
|
||||
preloader: false,
|
||||
|
||||
midClick: true,
|
||||
removalDelay: 300,
|
||||
mainClass: 'photography-portfolio-gallery',
|
||||
|
||||
callbacks: {
|
||||
open() {
|
||||
$('#thumbGalleryDetail').owlCarousel().trigger('refresh.owl.carousel');
|
||||
$('#thumbGalleryDetail').owlCarousel().trigger('to.owl.carousel', [clickedItem, 0]);
|
||||
|
||||
$('#thumbGalleryThumbs').owlCarousel('refresh');
|
||||
|
||||
removeShowThumbsTimeout = setTimeout(() => {
|
||||
$('#thumbGalleryThumbs').removeClass('show-thumbs');
|
||||
}, 3000);
|
||||
|
||||
$(document).on('keydown', ({keyCode}) => {
|
||||
if(keyCode == 37) {
|
||||
$('#thumbGalleryDetail').trigger('prev.owl')
|
||||
}
|
||||
if(keyCode == 39) {
|
||||
$('#thumbGalleryDetail').trigger('next.owl')
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
close() {
|
||||
clearTimeout(removeShowThumbsTimeout);
|
||||
$('#thumbGalleryThumbs').addClass('show-thumbs');
|
||||
$(document).off('keydown');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if($('a[href="#photographyLightbox"]').get(0)) {
|
||||
$('a[href="#photographyLightbox"]').on('click', function(){
|
||||
if($('.grid-sizer').get(0)) {
|
||||
clickedItem = $(this).parent().parent().index() - 1;
|
||||
} else {
|
||||
clickedItem = $(this).parent().parent().index();
|
||||
}
|
||||
});
|
||||
|
||||
$('a[href="#photographyLightbox"]').magnificPopup(portfolioLightboxOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
Thumb Gallery
|
||||
*/
|
||||
if( $('#photographyLightbox').get(0) ) {
|
||||
var $thumbGalleryDetail = $('#thumbGalleryDetail'),
|
||||
$thumbGalleryThumbs = $('#thumbGalleryThumbs'),
|
||||
flag = false,
|
||||
duration = 300;
|
||||
|
||||
$thumbGalleryDetail
|
||||
.owlCarousel({
|
||||
items: 1,
|
||||
margin: 10,
|
||||
nav: true,
|
||||
dots: false,
|
||||
loop: false,
|
||||
navText: [],
|
||||
rtl: (($('html[dir="rtl"]').get(0)) ? true : false),
|
||||
onRefreshed(e) {
|
||||
setTimeout(() => {
|
||||
$('.mfp-wrap.photography-portfolio-gallery').css('opacity',1);
|
||||
}, 300);
|
||||
}
|
||||
})
|
||||
.on('changed.owl.carousel', ({item}) => {
|
||||
if (!flag) {
|
||||
flag = true;
|
||||
$thumbGalleryThumbs.trigger('to.owl.carousel', [item.index-1, duration, true]);
|
||||
|
||||
// add class to active thumb
|
||||
$thumbGalleryThumbs.find('.owl-item').removeClass('active-thumb');
|
||||
$thumbGalleryThumbs.find('.owl-item:eq('+ item.index +')').addClass('active-thumb');
|
||||
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
|
||||
$thumbGalleryThumbs
|
||||
.owlCarousel({
|
||||
margin: 15,
|
||||
items: 15,
|
||||
nav: false,
|
||||
center: false,
|
||||
dots: false,
|
||||
pagination: false,
|
||||
rtl: (($('html[dir="rtl"]').get(0)) ? true : false)
|
||||
})
|
||||
.on('click', '.owl-item', function() {
|
||||
$thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]);
|
||||
|
||||
// add class to active thumb
|
||||
$thumbGalleryThumbs.find('.owl-item').removeClass('active-thumb');
|
||||
$(this).addClass('active-thumb');
|
||||
});
|
||||
|
||||
// Set first item with active-thumb
|
||||
$thumbGalleryThumbs.find('.owl-item:eq(0)').addClass('active-thumb');
|
||||
|
||||
}
|
||||
|
||||
if( $('#portfolioSliderWithThumbs').get(0) ) {
|
||||
var $thumbGalleryDetail = $('#thumbGalleryDetail'),
|
||||
$thumbGalleryThumbs = $('#thumbGalleryThumbs'),
|
||||
flag = false,
|
||||
duration = 300;
|
||||
|
||||
$thumbGalleryDetail
|
||||
.owlCarousel({
|
||||
items: 1,
|
||||
margin: 10,
|
||||
nav: true,
|
||||
dots: false,
|
||||
loop: false,
|
||||
navText: [],
|
||||
rtl: (($('html[dir="rtl"]').get(0)) ? true : false),
|
||||
onRefreshed(e) {
|
||||
setTimeout(() => {
|
||||
$('.mfp-wrap.photography-portfolio-gallery').css('opacity',1);
|
||||
}, 300);
|
||||
}
|
||||
})
|
||||
.on('changed.owl.carousel', ({item}) => {
|
||||
if (!flag) {
|
||||
flag = true;
|
||||
$thumbGalleryThumbs.trigger('to.owl.carousel', [item.index-1, duration, true]);
|
||||
|
||||
// add class to active thumb
|
||||
$thumbGalleryThumbs.find('.owl-item').removeClass('active-thumb');
|
||||
$thumbGalleryThumbs.find('.owl-item:eq('+ item.index +')').addClass('active-thumb');
|
||||
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
|
||||
$thumbGalleryThumbs
|
||||
.owlCarousel({
|
||||
margin: 15,
|
||||
items: 8,
|
||||
nav: false,
|
||||
center: false,
|
||||
dots: false,
|
||||
pagination: false,
|
||||
rtl: (($('html[dir="rtl"]').get(0)) ? true : false),
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
300:{
|
||||
items:3
|
||||
},
|
||||
767:{
|
||||
items:6,
|
||||
},
|
||||
991:{
|
||||
items:7,
|
||||
},
|
||||
1200:{
|
||||
items:8,
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('click', '.owl-item', function() {
|
||||
$thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]);
|
||||
|
||||
// add class to active thumb
|
||||
$thumbGalleryThumbs.find('.owl-item').removeClass('active-thumb');
|
||||
$(this).addClass('active-thumb');
|
||||
});
|
||||
|
||||
// Set first item with active-thumb
|
||||
$thumbGalleryThumbs.find('.owl-item:eq(0)').addClass('active-thumb');
|
||||
|
||||
$(document).on('keydown', ({keyCode}) => {
|
||||
if(keyCode == 37) {
|
||||
$('#thumbGalleryDetail').trigger('prev.owl')
|
||||
}
|
||||
if(keyCode == 39) {
|
||||
$('#thumbGalleryDetail').trigger('next.owl')
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
})).apply(this, [jQuery]);
|
||||
Reference in New Issue
Block a user