Fancybox 3 + Fotorama - Не работает, нужна помощь.
Здравствуйте, вот столкнулся с проблемой, в JS полный профан, как и в php, имею лишь азы в html и css. Суть проблемы следующая, есть CMS, там было установлены Fancybox 2 и Fotorama. То есть, фоторама обеспечивала слайдер с фото, а фансибокс обеспечивал галерею этих же фото, только увеличенных. Не знаю, зачем так было придумано разработчиками, возможно, что фоторама для полноценной галереи слаба. И вот, fancybox 2 уже старый, адаптации для мобильников нормальной нет, решил переехать на 3 версию, заменил JS и CSS файлы и инициализация fancybox 3 не срабатывает.
Вот так выглядит блок с фотографиями (html)
<div class="ad-images fotorama" id="j-view-images" data-auto="false" data-controlsonstart="false">
<div data-img="//amzze.com/files/images/items/0/1v64fa5165.jpg" data-thumb="//amzze.com/files/images/items/0/1s64fa5165.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 1"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1z64fa5165.jpg" data-index="0"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1v45867000.jpg" data-thumb="//amzze.com/files/images/items/0/1s45867000.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 2"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1z45867000.jpg" data-index="1"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1va34d7412.jpg" data-thumb="//amzze.com/files/images/items/0/1sa34d7412.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 3"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1za34d7412.jpg" data-index="2"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1vd5080cd8.jpg" data-thumb="//amzze.com/files/images/items/0/1sd5080cd8.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 4"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1zd5080cd8.jpg" data-index="3"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1v307cec32.jpg" data-thumb="//amzze.com/files/images/items/0/1s307cec32.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 5"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1z307cec32.jpg" data-index="4"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1v1796b606.jpg" data-thumb="//amzze.com/files/images/items/0/1s1796b606.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 6"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1z1796b606.jpg" data-index="5"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1v12f2db4d.jpg" data-thumb="//amzze.com/files/images/items/0/1s12f2db4d.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 7"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1z12f2db4d.jpg" data-index="6"><i
class="fa fa-search"></i></a>
</div>
<div data-img="//amzze.com/files/images/items/0/1v8e27fb68.jpg" data-thumb="//amzze.com/files/images/items/0/1s8e27fb68.jpg" data-alt="Купить Audi A6 2009г в Москве Москва - изображение 8"
class="j-view-images-frame">
<a href="javascript:;" class="ad-images-zoom j-zoom" data-zoom="//amzze.com/files/images/items/0/1z8e27fb68.jpg" data-index="7"><i
class="fa fa-search"></i></a>
</div>
<a href="https://youtu.be/6cvEL2rF1z8" data-video="true" class="j-view-images-frame"></a> <div data-thumb="//amzze.com/img/map_marker.gif" class="j-view-images-frame j-map">
<div id="j-view-map" style="height:450px; width: 100%;"></div>
</div> </div>
Вот JS код, отвечающий за вызов Fancybox 2, однако на 3 версии не хочет работать...
var jView = (function(){
var inited = false, $container, o = {lang:{},
geoMapZoom:12,
fotorama: {
width: '100%', maxwidth: '100%', maxheight: 450, minheight: 250,
nav: 'thumbs', fit: 'contain',
keyboard: true,
loop: true, click: true, swipe: true
},
fancybox: {
enabled: true, padding: 0, title: false,
helpers: { thumbs: {width:50, height:50}, overlay: {locked: false} }
}
},
images = {$block:0,viewer:0,mapIndex:0,lastIndex:0},
map = {$block:0,map:0,marker:0};
function init()
{
$container = $('#j-view-container');
// images
images.$block = $container.find('#j-view-images');
if (o.fancybox.enabled) {
var zoomImages = [];
images.$block.find('.j-zoom').each(function(){ zoomImages.push({href:$(this).data('zoom')}); });
images.$block.on('click', '.j-zoom', function(e){ nothing(e);
o.fancybox.index = $(this).data('index');
$.fancybox(zoomImages, o.fancybox);
return false;
});
}
var $imagesFrames = images.$block.find('.j-view-images-frame');
if ($imagesFrames.length > 1 || $imagesFrames.is(':not(.j-map)')) {
images.viewer = (images.$block.fotorama(o.fotorama)).data('fotorama');
}
// map
map.$block = $container.find('#j-view-map');
if( map.$block.length ) {
var mapCenter = [parseFloat(o.addr_lat), parseFloat(o.addr_lon)];
map.map = app.map(map.$block.get(0), o.addr_lat+','+o.addr_lon, function(map){
if (this.isYandex()) {
map.controls.remove('searchControl');
map.options.set('autoFitToViewport', 'ifNull');
}
}, {marker:true, zoom: o.geoMapZoom});
images.mapIndex = (images.viewer.size - 1);
var _map_showed = false;
images.$block.on('fotorama:showend', function(e, fotorama, extra){
if( ! extra.user ) return;
var opts = false;
if( images.viewer.activeIndex == images.mapIndex ) {
if( ! _map_showed ) {
map.map.panTo(mapCenter, {delay: 10, duration: 200});
}
opts = {click: false, swipe: false}; _map_showed = true;
} else if( _map_showed ) {
opts = {click: true, swipe: true}; _map_showed = false;
}
if( opts!==false ) {
images.viewer.setOptions(opts);
}
});
}
// hook: init
bff.hook('bbs.view.init', $container, o);
}
}());
|
aarka,
по обрывкам кода можно только гадать строка 29 уберите параметр , o.fancybox сработает или нет? |
рони,
Убрал... Не помогло, все равно в консоли в JS ошибка " Uncaught TypeError: $.fancybox is not a function". Почему не понимаю, на Fancybox 2 все работало, просто до разработчиков CMS хрен достучишься, а кусок кода я вставил лишь по тому, что весь не влезает( Я его там посмотрел и понял, что все другие функции отвечают за другие разделы сайта... |
Проблему решил, изменив код...
if (o.fancybox.enabled) {
var zoomImages = [];
images.$block.find('.j-zoom').each(function(){ zoomImages.push({src:$(this).data('zoom')}); });
images.$block.on('click', '.j-zoom', function(e){ nothing(e);
o.fancybox.index = $(this).data('index');
$.fancybox.open(zoomImages, o.fancybox);
return false;
});
Надеюсь кому-то это поможет) |
| Часовой пояс GMT +3, время: 02:48. |