","
"],
responsive:{
0:{
items:1.1,//*留意
center: true,//*留意
nav: false,//*留意
margin:10,
lazyLoadEager:1,//*预加载左右1个 与即时加载配合使用
},
600:{
items:3
},
1000:{
items:4
}
}
});
vf_zoom_image();
var initPhotoSwipeFromDOM = function(gallerySelector) {
var vf_shu = $('#vf_single_p_video').length ? "1" : "0";
var parseThumbnailElements = function(el) {
var thumbElements = el.childNodes,
numNodes = thumbElements.length,
items = [],
figureEl, linkEl, size, item;
////
for (var i = vf_shu; i < numNodes; i++) {
figureEl = thumbElements[i];
if (figureEl.nodeType !== 1) {
continue
}
linkEl = figureEl.children[0];
if(linkEl.hasAttribute('data-size')){
size = linkEl.getAttribute('data-size').split('x');
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if (figureEl.children.length > 1) {
item.title = figureEl.children[1].innerHTML
}
if (linkEl.children.length > 0) {
item.msrc = linkEl.children[0].getAttribute('src')
}
item.el = figureEl;
}else{
item = {
src: "none",
w: "none",
h: "none"
};
item.el = figureEl;
};
items.push(item)
}
return items
};
var closest = function closest(el, fn) {
return el && (fn(el) ? el : closest(el.parentNode, fn))
};
var onThumbnailsClick = function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
var eTarget = e.target || e.srcElement;
var clickedListItem = closest(eTarget, function(el) {
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE')
});
if (!clickedListItem) {
return
}
var clickedGallery = clickedListItem.parentNode,
childNodes = clickedListItem.parentNode.childNodes,
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
for (var i = 0; i < numChildNodes; i++) {
if (childNodes[i].nodeType !== 1) {
continue
}
if (childNodes[i] === clickedListItem) {
index = nodeIndex;
break
}
nodeIndex++
}
if (index >= 0) {
if (vf_shu == 1 ) {
openPhotoSwipe(index - 1, clickedGallery)
}else{
openPhotoSwipe(index, clickedGallery)
}
}
return false
};
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)
}
return params
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
if(index >= 0){
var pswpElement = document.querySelectorAll('.pswp')[0],
gallery, options, items;
items = parseThumbnailElements(galleryElement);
options = {
maxSpreadZoom: 0,
bgOpacity: 0.9,
zoomEl: true,
history: false,
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
getThumbBoundsFn: function(index) {
var thumbnail = items[index].el.getElementsByTagName('img')[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
rect = thumbnail.getBoundingClientRect();
return {
x: rect.left,
y: rect.top + pageYScroll,
w: rect.width
}
}
};
if (fromURL) {
if (options.galleryPIDs) {
for (var j = 0; j < items.length; j++) {
if (items[j].pid == index) {
options.index = j;
break
}
}
} else {
options.index = parseInt(index, 10) - 1
}
} else {
options.index = parseInt(index, 10)
}
if (isNaN(options.index)) {
return
}
if (disableAnimation) {
options.showAnimationDuration = 0
}
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
var psIndex = gallery.getCurrentIndex();
var psIndexSlick = psIndex;
gallery.listen('afterChange', function() {
var psIndex = gallery.getCurrentIndex();
var psIndexSlick = psIndex;
$(".slider-nav").slick("slickGoTo", psIndexSlick)
});
gallery.listen('close', function() {
var psIndex = gallery.getCurrentIndex();
var psIndexSlick = psIndex;
$(".slider-nav").slick("slickGoTo", psIndexSlick)
})
}
};
var galleryElements = document.querySelectorAll(gallerySelector);
for (var i = 0, l = galleryElements.length; i < l; i++) {
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
galleryElements[i].onclick = onThumbnailsClick
}
var hashData = photoswipeParseHash();
if (hashData.pid && hashData.gid) {
alert(hashData.pid);
openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true)
}
};
initPhotoSwipeFromDOM('.my-gallery');
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav',
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
infinite: false,
dots: false,
centerMode: false,
arrows:false,
focusOnSelect: true,
vertical: false,
verticalSwiping: false,
//centerPadding: "0px",
//customPaging: "0px",
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 5,
slidesToScroll: 1
}
},
{
breakpoint: 992,
settings: {
vertical: false,
slidesToScroll: 4,
centerMode: false,
verticalSwiping: false,
asNavFor: '.slider-for',
}
},
{
breakpoint: 767,
settings: {
vertical: false,
slidesToScroll: 4,
centerMode: false,
verticalSwiping: false,
asNavFor: '.slider-for',
}
}]
});
vf_zoom_image();
//$(window).on('resize', function() {
// zoom_mobile()
//})
function vf_zoom_image() {
if (($(window).width()) >= 1024) {
var $counter = $('.zoom_image');
if($counter.length > 0) {
$counter.each(function () {
var $elem = $(this);
$elem.appear(function () {
$(this).zoom();
});
});
};
}
};
});
