Основной курс по Joomla

fancybox вместо lightbox

0 Пользователей и 1 Гость просматривают эту тему.
  • 20 Ответов
  • 3781 Просмотров
*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
fancybox вместо lightbox
« : 27.09.2012, 21:08:58 »
fancybox вместо lightbox
Вопрос конечно не жизни и смерти, но можно ли как то "допилить" JoomShopping?

*

ELLE

  • Support Team
  • *****
  • 4583
  • 867
Re: fancybox вместо lightbox
« Ответ #1 : 27.09.2012, 21:11:52 »
ниче пилить не надо
отключаете Lightbox, ставите фансибокс и инициализируете плагин - всё
подробности можно узнать в доках фанси
делается от силы 10мин, если не возникнет никаких конфликтов

*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #2 : 27.09.2012, 21:18:32 »
А где можно документацию по фанаси найти? На офф сайте не нашел.


*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #4 : 27.09.2012, 21:29:07 »
нашел функцию, которая отвечает за лайтбокс

Код
 public static function loadJsFilesLightBox(){
    static $load;
        $jshopConfig = JSFactory::getConfig();
        if (!$jshopConfig->load_jquery_lightbox) return 0;
        if (!$load){
            $document = JFactory::getDocument();
            $document->addScript(JURI::root().'components/com_jshopping/js/jquery/jquery.lightbox-0.5.pack.js');
            $document->addStyleSheet(JURI::root().'components/com_jshopping/css/jquery.lightbox-0.5.css');
            $document->addScriptDeclaration('function initJSlightBox(){
                jQuery("a.lightbox").lightBox({
                    imageLoading: "'.JURI::root().'components/com_jshopping/images/loading.gif",
                    imageBtnClose: "'.JURI::root().'components/com_jshopping/images/close.gif",
                    imageBtnPrev: "'.JURI::root().'components/com_jshopping/images/prev.gif",
                    imageBtnNext: "'.JURI::root().'components/com_jshopping/images/next.gif",
                    imageBlank: "'.JURI::root().'components/com_jshopping/images/blank.gif",
                    txtImage: "'._JSHOP_IMAGE.'",
                    txtOf: "'._JSHOP_OF.'"
                });
            }
            jQuery(function() { initJSlightBox(); });');
            $load = 1;
        }
    }


Как ее теперь переписать, что бы она вызывала фанси?

*

ELLE

  • Support Team
  • *****
  • 4583
  • 867
Re: fancybox вместо lightbox
« Ответ #5 : 27.09.2012, 21:30:21 »
версия у вас какая? у меня Lightbox в настройках магазина отключается 3.10

*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #6 : 27.09.2012, 21:33:45 »
3.11

Отключить то я отключил, а вот как фанси поставить?

*

ELLE

  • Support Team
  • *****
  • 4583
  • 867
Re: fancybox вместо lightbox
« Ответ #7 : 27.09.2012, 21:36:32 »
index.php шаблона открываете, подключаете стили и скрипт, инициализируете плагин используя класс .lightbox
вот еще тема, может понятнее будет - http://joomlaforum.ru/index.php/topic,218144.0.html

*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #8 : 27.09.2012, 21:54:06 »
Не понимаю, как мне сделать так, что бы JoomShopping подхватывал эффект фанси.

*

ELLE

  • Support Team
  • *****
  • 4583
  • 867
Re: fancybox вместо lightbox
« Ответ #9 : 27.09.2012, 21:57:49 »
index.php шаблона в <head>
Код
<script src="/templates/шаблон/js/jquery.fancybox.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="/templates/шаблон/css/jquery.fancybox.css" type="text/css" />
<script type="text/javascript">
    jQuery(document).ready(function() {
 jQuery(".lightbox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
пути проверить!

*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #10 : 27.09.2012, 22:06:08 »
Почти допилил.

Товар храниться а product_default.php вот ссылки картинок:

Код
  <a class="lightbox" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php if ($k!=0){?>style="display:none"<?php }?>>
                <img id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
            </a>

Пытаюсь переписать на ваш код (который заработал)

Код
<a href="<?php print $product->product_link?>?tmpl=component" class="various" data-fancybox-type="iframe">Быстрый просмотр</a>

*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #11 : 27.09.2012, 22:10:16 »
Кажется получилось, но есть еще 1 косяк, фото открывается в 1 экземпляре, а мне нужно, как в лайтбоксе в виде галереи.

Я имею ввиду, чтобы тамбуты тоже отображались, можно ли как то это сделать?

*

ELLE

  • Support Team
  • *****
  • 4583
  • 867
Re: fancybox вместо lightbox
« Ответ #12 : 27.09.2012, 22:10:33 »
зачем это все?
я уже сказала, что делать постом выше и не надо самодеятельности!
только если вам нужен этот "быстрый просмотр" - тогда все по шагам надо делать, как в той теме
Кажется получилось, но есть еще 1 косяк, фото открывается в 1 экземпляре, а мне нужно, как в лайтбоксе в виде галереи
- это в доки, там есть все примеры

*

demoni

  • Осваиваюсь на форуме
  • ***
  • 33
  • 0
Re: fancybox вместо lightbox
« Ответ #13 : 27.09.2012, 22:19:45 »
Все допилил, спасибо большое ELLE!

Если кому нужно выкладываю:

В product_default.php в тег "a" добавил "rel="gallery1"

Для основного изображения
Код
  <a class="lightbox" rel="gallery1" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php if ($k!=0){?>style="display:none"<?php }?>>
                <img id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
            </a>
И остальные
Код
<div class="manufacturer_logo">
                <a rel="gallery1" href="<?php print SEFLink('index.php?option=com_jshopping&controller=manufacturer&task=view&manufacturer_id='.$this->product->product_manufacturer_id, 2);?>">
                    <img src="<?php print $this->config->image_manufs_live_path."/".$this->product->manufacturer_info->manufacturer_logo?>" alt="<?php print htmlspecialchars($this->product->manufacturer_info->name);?>" title="<?php print htmlspecialchars($this->product->manufacturer_info->name);?>" border="0" />
                </a>
            </div>

В шаблоне добавил:

Код
	<script src="<?php echo $this->baseurl ?>/templates/ваш_шаблон/js/jquery.fancybox.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ваш_шаблон/css/jquery.fancybox.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".lightbox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>


И в админке отключал lightbox

*

x-masters

  • Осваиваюсь на форуме
  • ***
  • 76
  • 0
Re: fancybox вместо lightbox
« Ответ #14 : 30.06.2015, 17:39:45 »
Советую активировать функцию FitToView - она не дает изображению уйти за границы экрана. Я на Fancy только из-за этого перешел, т.к. на адаптивном дизайне разрешения устройств сильно различаются и litebox все время уходит за пределы видимости. Ну и эффектов закрытия и открытия тоже не хватает. Вот как выглядит последний код для index.php шаблона у меня:
Код
<script src="<?php echo $this->baseurl ?>/templates/ваш_шаблон/js/jquery.fancybox.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ваш_шаблон/css/jquery.fancybox.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".lightbox").fancybox({
maxWidth : 1000,
maxHeight : 800,
fitToView : true,
autoSize : true,
closeClick : true,
openEffect : 'elastic',
closeEffect : 'elastic'
});
});
</script>
« Последнее редактирование: 30.06.2015, 18:10:59 от x-masters »

*

diana1975

  • Осваиваюсь на форуме
  • ***
  • 149
  • 1
Re: fancybox вместо lightbox
« Ответ #15 : 11.02.2016, 23:40:31 »
не хочу открывать новую тему: решила  вместо  Lightbox  использовать в карточке товара     fancybox, надеялась, что он адаптирован под мобильные устройства, а именно: картинка увеличивается при клике или раздвиж. пальцев до реальных размеров большого фото. Но fancybox вмещает картинку в пределах экрана, а  родной Lightbox увеличивает ее как надо, но ее можно передвигать пальцами только вертикально, а слева направо ни в какую. Какое решение можете предложить?

*

dmitry_stas

  • Профи
  • ********
  • 9668
  • 931
Re: fancybox вместо lightbox
« Ответ #16 : 12.02.2016, 00:37:10 »
думаю это зависит не от Lightbox а от конкретно вашей адаптивной верстки
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

diana1975

  • Осваиваюсь на форуме
  • ***
  • 149
  • 1
Re: fancybox вместо lightbox
« Ответ #17 : 12.02.2016, 01:16:48 »
Через CSS убила все ограничители натурального размера картинки, зашла в инструменты->веб-разработка-> адаптивный дизайн - показывает все как надо,  а в айфоне и андроиде ничего не изменилось.
Что не так?
ссылка

*

dmitry_stas

  • Профи
  • ********
  • 9668
  • 931
Re: fancybox вместо lightbox
« Ответ #18 : 12.02.2016, 02:13:52 »
ну как я и сказал это вопрос не Lightbox. если у вас для body
Код: css
overflow-x: hidden;
задано, то о каком тягании горизонтально может идти речь? :)
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Brooksus

  • Завсегдатай
  • *****
  • 616
  • 156
  • Ща спою...
Re: fancybox вместо lightbox
« Ответ #19 : 12.02.2016, 12:05:33 »
У вас теперь еще и ошибка будет из-за того, что вы отключили lightbox - Uncaught ReferenceError: initJSlightBox is not defined
Что бы этого не было можно прописать function initJSlightBox(){};

Мне больше Magnific Popup нравится. Пример вот - http://brooksite.demojoomla.com/index.php/kategorii/cars/coupe
« Последнее редактирование: 12.02.2016, 12:42:38 от Brooksus »
Или + или YM41001160794290, или WMR R189734255107, а лучше все сразу и много.

*

diana1975

  • Осваиваюсь на форуме
  • ***
  • 149
  • 1
Re: fancybox вместо lightbox
« Ответ #20 : 12.02.2016, 18:10:53 »
спасибо за совет, Brooksus, перешла на  Magnific Popup, пока норм.