Fancybox + Krpano « Форум

Константин 23 ноября 2016 #

Может быть, кто-то имеет опыт использования fancybox (http://fancybox.net/) для вставки контента? Понятно, как вставить, допустим, pdf документ, единичное изображение (однако, не совсем ясно, как запустить allowfullscreen), box для вставки http. Но остается не ясным для меня, как же запустить, например, галерею из нескольких картинок или прикрутить карту. Проблема в том, как это организовать вот, в, например, такой строке:
<hotspot name="foto_1" style="skin_hotspotstyle" url="skin/img.png" ath="5.767" atv="-21.968" onclick="js(openPopup('Памятник Пушкину', 'Puskin.jpg', 1000, 'iframe'))" />

Код в html файле, который подключает fancebox такой :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">

function openPopup(t,linktourl,w,h,type)
{
$.fancybox({
'title' : t,
'width' : w,
'height' : h,
'href' : linktourl,
'type' : type,
'autoScale' : 'true',
'overlayColor' : '#000000',
'overlayAlpha' : '0.3'
});
}

Boris Terentev 24 декабря 2016 #

Для галереи надо передать массив в fancybox. Как-то так:
<hotspot name="foto_1" style="skin_hotspotstyle" url="skin/img.png" ath="5.767" atv="-21.968"
array="[{'href': 'Puskin.jpg','title': 'Памятник Пушкину',},{'href': 'Lermontov.jpg','title': 'Памятник Лермонтову',}]"
onclick="js( openPopup(get(array)) );" />

Константин 28 декабря 2016 #

Борис, спасибо за внимание к этому вопросу! К сожалению, не получилось, на сработало:( Возможно, в строку кода каким-то образом необходимо вставить iframe, чтобы скрипт понимал, что именно ему открывать? Но это чисто методом тыка ненаучного. Пробовал, к стати, не сработало тоже. открыл справочник по Java и увидел, что array используется для массивов с числовыми индексами. Есть еще Object. В прочем, не сработало также....

Boris Terentev 05 января 2017 #

можно подсмотреть у меня исходный код js файла ;) например здесь http://fotopanoram.ru/uploads/panorams/pavlishevo-...
я не программер и на чистоту кода не претендую. работает и хорошо )))

Константин 07 января 2017 #

Под исходным кодом js Вы имеете в виду, вероятно, этот файл, которого у меня и нет - fancybox.options.js - я подключал только по инструкции скрипты, получается, что они для Krpano не адаптированы. Я честно его попробовал украсть:) и прописать у себя. Все равно не заработало (видать, "честно украденное" - все равно не правильно:)) Сохранил с расширением js, скинул в папку, прописал строку

">http://code.jquery.com/jquery-latest.min.js"></scr...
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

Здесь новая строка -<script type="text/javascript" src="fancybox/source/fancybox.options.js"></script> <script type="text/javascript">

function openPopup(t,linktourl,w,h,type)
{
$.fancybox({
'title' : t,
'width' : w,
'height' : h,
'href' : linktourl,
'type' : type,
'autoScale' : 'true',
'overlayColor' : '#000000',
'overlayAlpha' : '0.3'
});
}
function display_box (url) {
$.fancybox({
'href': url,
'width'    : '100%',
'height'   : '100%',
'autoScale'   : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type'    : 'iframe'

});
}
</script>

</script>


Все равно не заработало:( Сам тур вот он - http://panorama.16mb.com/Panoram/ostafievo/ostafievo.html

Boris Terentev 07 января 2017 #

fancybox.options.js не заработает, у меня функция по другому названа и написан этот файлик под свои нужды. но куски оттуда можно подсмотреть ;)

что сделать с xml я уже выше отписал. надо передать массив. уберите 2 хотспота "foro_3" и "spot3" в сцене "scene_2" и создайте:

    <hotspot name="spot2" style="skin_hotspotstyle" url="skin/img.png" ath="-51.806" atv="-3.971"
   array="[
   {'href': 'Pavilion.jpg','title': 'Беседка',},
   {'href': 'media/pavilion_leto.JPG','title': 'Беседка летом',}
   ]"
   onclick="js( openPopup(get(array)) );" />

дальше изучаем метод JSON.parse https://learn.javascript.ru/json
в html замените функцию openPopup на:

function openPopup(str) {
   var newString = str.replace(/\'/g,"\"");
   var galarray = JSON.parse(newString);

   $.fancybox(galarray,{
       maxWidth: '90%',
       maxHeight: '90%',
       padding: 2,
       transitionIn: 'none',
       transitionOut: 'none',
       loop: true,
       nextSpeed: 350,
       prevSpeed: 350,
       closeClick: false,


   helpers: {
       title: {
           type: 'inside'
       },
       thumbs: {
           width   : 120,
           height   : 80,
       }
    }

   });
}

и уберите лишний тег </script> )))

библиотеки fancybox советую подключать локально. для нормальной работы, если вдруг инет пропадает или если надо автономный тур отдать заказчику.

Константин 07 января 2017 #

Спасибо большое! буду разбираться! Если уж Вы не программист, то я не программист со знаком минус:(
Библиотеки fancybox локально - это имеется в виду, что необходимо, чтобы все бралось из локальных папок - без путей на сайты с библиотеками, проще говоря, чтобы не было таких вот строк - <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> ?

Константин 10 января 2017 #

Нет, не потянул решение проблемы:( Спасибо Вам за потраченное время, но не выходит у меня цветок каменный:( Буду пробовать разобраться, явно с ходу не выйдет.