Добро пожаловать на сайт <БагБД>, где вы можете задавать вопросы о программировании и разработке на Битрикс и Битрикс24, и получать быстрые и квалифицированные ответы от профессионалов!

Борьба с fancybox

00 голосов
4
Приветствуем.Много раз подвязывал фанкибокс...и все вроде было норм. А тут связался с версией Малый Бизнес....и уже мозг закипает.

Для теста сделал даже эксперимент на главной и тот не работает :( (да в шаблоне каталога .default fancybox есть, но я хочу привязать его к propirties).

Где ошибка в моем эксперименте (привязка фанкибокса к главной странице) ????

1. В шаблон сайта добавлены 

Код
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript"> 
        $(document).ready(function() { 
            $("a[rel=fancy]").fancybox( 
            { 
                "frameWidth" : 510,     
                "frameHeight" : 400, 
                "hideOnContentClick" :false               
            }); 
        }); 
    </script>
 
Код
/jquery/jquery-1.4.2.min.js - лежит  корень сайта/jquery/jquery-1.4.2.min.js  
/fancybox/jquery.fancybox-1.3.4.pack.js - так же корень сайта /fancybox/jquery.fancybox-1.3.4.pack.js  
/fancybox/jquery.fancybox-1.3.4.css - по аналогии выше 



На заглавной странице вот такой маленький код 
Код
 <a rel="fancy" href="детальное jpg"><img src="тумбочка  jpg" ></a>
спросил 17 Ноя, 13 от Milianta (120 баллов)

4 Ответы

00 голосов
У меня был глюк с 1.3.4 - поставил 1.3.1 - заработало  -попробуйте и вы, может поможет. Так вроде все правильно.
Вот мои опции фанси:

Код
"autoDimensions" : true, // Говорит, что контент будет точно под размер заданного окна
        "autoScale" : true,
        "padding" : 5, // отступ контента от краев окна
        "imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
        "zoomOpacity" : false,    // изменение прозрачности контента во время анимации (по умолчанию false)
        "zoomSpeedIn" : 600,    // скорость анимации в мс при увеличении фото (по умолчанию 0)
        "zoomSpeedOut" : 600,    // скорость анимации в мс при уменьшении фото (по умолчанию 0)
        "zoomSpeedChange" : 600, // скорость анимации в мс при смене фото (по умолчанию 0)
        //"width" : 600,     // ширина окна, px (425px - по умолчанию)
        "overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
        "overlayOpacity" : 0.6,     // Прозрачность затенения     (0.3 по умолчанию)
        "hideOnContentClick" :false, // Если TRUE  закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE 
        "centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу 
попробуйте так, а потом отключайте последовательно. И да, jquery поновее поставьте, посмотрите, мож заработает.

P.s. я вообще сначала пробую на обычной html странице - если все нормально, привязываю к битриксу.
ответил 02 Янв, 14 от Cyber (540 баллов)
00 голосов
Блин "не выходит у Данилы мастера каменный цветок" :)
Не могу соединить знания пока.... (экскременты убрал  и вернул исходники).
При шаблоне .default fancybox работает нормально.... при этом к шаблону дополнительно подвязаны fancybox в template
Он в принципе там и лежит - /bitrix/templates/.default
Там есть папка /bitrix/templates/.default/jquery с jquery-1.4.2.min.js
И /bitrix/templates/.default/jquery/fancybox с jquery.fancybox-1.3.1.css + jquery.fancybox-1.3.1.pack.js

В теории все просто.

Кастомизировал шаблон properities для детальной информации по элементу (по аналогии с default'ом) для включения фанки.... Но "растет Фикус"...

Вот начало с фанки (причем принцип отображения работает нормально, но фанкибокс не подвязывается :( )
Код
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<script type="text/javascript">
$(function() {
   $("a[rel=fancy]").fancybox({
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'speedIn': 600,
      'speedOut': 200,
      'overlayShow': false,
      'cyclic' : true,
      'padding': 20,
      'titlePosition': 'over',
      'onComplete': function() {
         $("#fancybox-title").css({ 'top': '100%', 'bottom': 'auto' });
      } 
   });
});
</script>

   <table width="100%" border="0" cellspacing="0" cellpadding="2">
      <tr>
      <?if(is_array($arResult["PREVIEW_PICTURE"]) || is_array($arResult["DETAIL_PICTURE"])):?>
         <td width="0%" valign="top">
               <a rel="fancy" href=<?=$arResult["DETAIL_PICTURE"]["SRC"]?> > 
<img border="0" src="<?=$arResult["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arResult["PREVIEW_PICTURE"]["WIDTH"]?>"  
height="<?=$arResult["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" 
 id="image_<?=$arResult["PREVIEW_PICTURE"]["ID"]?>" style="display:block;cursor:pointer;cursor: hand;" /></a>
         </td>
      <?endif;?>
ответил 18 Апр, 14 от Milianta (120 баллов)
00 голосов
УРЯ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Получилось. 
1.Оказалось что проблема при подвязке к шаблонам не только в Шаблоне сайта с подвязкой фанки.

2. Не только в скрипте в компоненте детального просмотра....


3. Но и еще в двух строчках в файле  component_epilog.php (которую я банально переложил из defaulta к себе). Точнее из 
/bitrix/templates/store_minimal_gray/components/bitrix/catalog/.default/bitrix/catalog.element/.default
в
/bitrix/templates/store_minimal_gray/components/bitrix/catalog/test/bitrix/catalog.element/.default

А вот и те самые две строчки из эпилога которые не давали скрипту пройтись по странице
$APPLICATION->AddHeadScript('/bitrix/templates/'.SITE_TEMPLATE_ID.'/jquery/fancybox/jquery.fancybox-1.3.1.pack.js');
$APPLICATION->SetAdditionalCSS('/bitrix/templates/'.SITE_TEMPLATE_ID.'/jquery/fancybox/jquery.fancybox-1.3.1.css');


Так что если кто спотыкнется....может мои злоключения-изучения помогут.

PS Евгений спасибо за попытку помочь ;) +1
ответил 12 Авг, 14 от Milianta (120 баллов)
00 голосов
Цитата
Андрей Майер пишет:
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript">
Надо просто быть внимательнее - у вас в один из моментов истекла сессия - вы авторизовались - а проактивная защита  поставила в вызовы скриптов и стилей пробелы. что видно по вашему коду.

Было достаточно просто эти пробелы из вызова скриптов убрать.
то есть вместо   <script type="text/javascript"> вернуть   script type="text/javascript"    как  было.
ответил 17 Дек, 14 от Grimmi (2,560 баллов)

Похожие вопросы

0 голосов
1 ответ
спросил 16 Июль, 13 от Grimmi (2,560 баллов)
0 голосов
9 ответов
спросил 25 Фев, 13 от Allectus (220 баллов)