1 (2013-02-16 05:19:46 отредактировано AlxBuk)

Тема: Фотосток + FancyBox

PhotoStock + FancyBox(требуется jQuery)   ---   Совместимость с Monstra 2.2.1   ---   Обновлено 02.05.2013

http://i.imgur.com/rnt9EWB.png
Плагин представляет из себя оригинальный ФотоСток, с внедренным FancyBox
Таким образом все загруженные в фотосток картинки отображаются через FancyBox

http://i.imgur.com/yFzYrj0.png

http://i.imgur.com/n8XFto1.png
1. Архив распаковать в корень папки Monstra
    Содержимое архива:
    plugins/stock - сам фотосток
    public/assets/ - JS, CSS, GIF, файлы для FancyBox

2. Подключить в вашей теме новые CSS файлы для FancyBox
Пример:

<?php Stylesheet::add('public/assets/css/bootstrap.css', 'frontend', 1); ?>
<?php Stylesheet::add('public/assets/css/jquery.fancybox.css', 'frontend', 2); ?>         <!-- НЕОБХОДИМЫЕ СТИЛИ ДЛЯ ПЛАГИНА -->
<?php Stylesheet::add('public/assets/css/jquery.fancybox-buttons.css', 'frontend', 3); ?>         <!-- НЕОБХОДИМЫЕ СТИЛИ ДЛЯ ПЛАГИНА -->
<?php Stylesheet::add('public/themes/likegoogle/css/default.css', 'frontend', 4); ?>        
<?php Stylesheet::load(); ?>
<?php Action::run('theme_header'); ?>

3. Подключить JS файлы в начале страницы, т.е, в разделе <head></head>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <!-- Можете указать и свой, но обязательно в таком порядке -->
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox-buttons.js"></script>
<script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox();$(".fancybox-effects-a").fancybox({helpers: {title : {type : 'outside'},overlay : {speedOut : 0}}});});</script>

4. Для кастомизации стилей вывода картинок используй plugins\stock\stock\style.css

------------------------------------------------------------------------------------------------------------------

Обновление от 02.05.2013
Проверил на Монстра 2.2.1, выявил баг с jQuery, кстати может он и раньше был.
Рабочий способ это подключение jQuery в начале страницы.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox-buttons.js"></script>

Обновление от 16.05.2013

Сборка jQuery в футере НЕ РАБОТАЕТ.
То есть плагин работает только если jQuery подключен в head.
НЕ забывайте убирать подключение ЖиКери в футере в дефолтной теме


Сам плагин остался неизменным, изменился только способ подключения.
Проверено на Firefox, Google Chrome

http://i.imgur.com/xGIqipa.png

Галерея в миниатюрах http://i.imgur.com/IKFh2A7.jpg
Галерея в режиме просмотра http://i.imgur.com/NnoJ9h4.jpg
Одиночная картинка из фотостока http://i.imgur.com/lODDFUR.jpg

Сайт AlxBuk

Поделиться

2 (2013-02-17 16:01:49 отредактировано igorrock)

Re: Фотосток + FancyBox

Решил вопрос)

Поделиться

3

Re: Фотосток + FancyBox

а в чем проблема работы LightBox и фотостока из коробки?

Site | GitHub | Создание форумов/решений на базе PunBB/Monstra/OGMA

Плагины распространяются по Creative Commons Attribution-NonCommercial 3.0

Сайт KANekT

Поделиться

4

Re: Фотосток + FancyBox

Для кастомизации картинок используй
plugins\stock\stock\style.css

Сайт AlxBuk

Поделиться

5

Re: Фотосток + FancyBox

В мозилле не отображается кнопка закрытия изображения.

Поделиться

6

Re: Фотосток + FancyBox

Чистить кэш, удалять временные файлы.
У Лисы с кэшэм всегда траблы.

Обновил плагин

Сайт AlxBuk

Поделиться

7

Re: Фотосток + FancyBox

Только что установил - всё работает. Правда есть 2 небольших уточнения.

Пропущено окончание CSS http://f3.s.qip.ru/uX0nxVl8.png

И в файлах jquery.fancybox.css и jquery.fancybox-buttons пришлось исправить пути (убрать public):

http://f1.s.qip.ru/uX0nxVl9.png

А так - беллиссимо !

Поделиться

8

Re: Фотосток + FancyBox

И ещё один минус нашёл. Возможно это в настройках меняется - файлы ~3 мб. не загружаются.

Поделиться

9

Re: Фотосток + FancyBox

На сколько я знаю, ограничение даже не в 3 МБ, а в 2МБ, и зависит не от плагина, а от сервера (хостера).
Так что это не минус, а сторонная фича.
На своем сервер (локальный XAMPP), вроде как после редактирования conf, добился загрузки то ли в 10, то ли в 20, то ли в 50МБ, щас уже не помню.

Сайт AlxBuk

Поделиться

10

Re: Фотосток + FancyBox

Не работает плагин на Monstra 2.2.1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><?php echo Site::name() . ' - ' . Site::title(); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php echo Site::description(); ?>">
    <meta name="keywords" content="<?php echo Site::keywords(); ?>">
    <meta name="robots" content="<?php echo Page::robots(); ?>">

    <?php Action::run('theme_meta'); ?>

    <!-- Open Graph Protocol -->
    <meta property="og:site_name" content="<?php echo Site::name(); ?>">
    <meta property="og:url" content="<?php echo Url::current(); ?>">
    <meta property="og:title" content="<?php echo Site::title(); ?> | <?php echo Site::name(); ?>">

    <!-- Google+ Snippets -->
    <meta itemprop="url" content="<?php echo Url::current(); ?>">
    <meta itemprop="name" content="<?php echo Site::title(); ?> | <?php echo Site::name(); ?>">

    <!-- Styles -->
    <?php Stylesheet::add('public/assets/css/bootstrap.css', 'frontend', 1); ?>
    <?php Stylesheet::add('public/themes/default/css/default.css', 'frontend', 2); ?>
    <?php Stylesheet::add('public/assets/css/bootstrap-responsive.css', 'frontend', 3); ?>
    <?php Stylesheet::add('public/assets/css/jquery.fancybox.css', 'frontend', 4); ?>       
    <?php Stylesheet::add('public/assets/css/jquery.fancybox-buttons', 'frontend', 5); ?>   
    <?php Stylesheet::load(); ?>

    <?php Action::run('theme_header'); ?>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav icons -->
    <link rel="icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox-buttons.js"></script>

  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="<?php echo Site::url(); ?>"><?php echo Site::name(); ?></a>
          <div class="nav-collapse collapse">
            <ul class="nav">
                <?php echo Menu::get(); ?>
            </ul>
            <div class="pull-right user-panel">
              <?php Users::getPanel(); ?>
            </div>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

Менял по разному, сотни раз. В чем дело - понять не могу. Все показывает, но при нажатии открывает в виде картинки.

Поделиться

11

Re: Фотосток + FancyBox

Илья это у вас юмор такой?!
Почитайте внимательно описание установки.
У вас необходимого кода в шаблоне я не вижу.

Сайт AlxBuk

Поделиться

12

Re: Фотосток + FancyBox

AlxBuk пишет:

Илья это у вас юмор такой?!
Почитайте внимательно описание установки.
У вас необходимого кода в шаблоне я не вижу.

Я же говорю, пробовал по разному. Вообще у меня прописана та строчка Script'a.
Вот это вы написали в статье добавить в head:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> (Можете указать и свой, но обязательно в таком порядке)
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="<?php echo Site::url();?>public/assets/js/jquery.fancybox-buttons.js"></script>
<script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox();$(".fancybox-effects-a").fancybox({helpers: {title : {type : 'outside'},overlay : {speedOut : 0}}});});</script>

и

<?php Stylesheet::add('public/assets/css/bootstrap.css', 'frontend', 1); ?>
<?php Stylesheet::add('public/assets/css/jquery.fancybox.css', 'frontend', 2); ?>         <!-- НЕОБХОДИМЫЕ СТИЛИ ДЛЯ ПЛАГИНА -->
<?php Stylesheet::add('public/assets/css/jquery.fancybox-buttons', 'frontend', 3); ?>         <!-- НЕОБХОДИМЫЕ СТИЛИ ДЛЯ ПЛАГИНА -->
<?php Stylesheet::add('public/themes/likegoogle/css/default.css', 'frontend', 4); ?>        
<?php Stylesheet::load(); ?>
<?php Action::run('theme_header'); ?>

Это есть в шаблоне.

Поделиться

13

Re: Фотосток + FancyBox

Илья

Сборка jQuery в футере НЕ РАБОТАЕТ.

То есть плагин работает только если jQuery подключен в head.

А вы наверное забыли убрать подключение jQuery в футере.
И выходит что ЖиКери у вас подключался 2 раза, и в хеад и в футере, вот и не работал.

И на будущее читайте правила, а то приложили сорцы неполные.

Лично проверял, следуя инструкции все работает.

Сайт AlxBuk

Поделиться

14

Re: Фотосток + FancyBox

AlxBuk пишет:

Илья

Сборка jQuery в футере НЕ РАБОТАЕТ.

То есть плагин работает только если jQuery подключен в head.

А вы наверное забыли убрать подключение jQuery в футере.
И выходит что ЖиКери у вас подключался 2 раза, и в хеад и в футере, вот и не работал.

И на будущее читайте правила, а то приложили сорцы неполные.

Лично проверял, следуя инструкции все работает.

Во 1 я не говорил, что у меня подключен Jquery в футуре!
Во 2. Я его туда и не подключал!

Поделиться

15

Re: Фотосток + FancyBox

И...

Пока все что я вижу, это просто слова о том что у вас не работает плагин.

Читайте правила.

    Шаблон оформления поста о неработающем плагине
    Версия Монстры?!
    Какие плагины используются на сайте?!
    Приложите скриншоты (Minus.com, Imgur.com)
    Опубликуйте (для это этого есть Pastebin) исходный код страницы (с помощью Ctrl+U) на которой не работает плагин
    Чем более подробным будет ваш описание проблемы тем проще будет в ней разобраться.
    Этим вы облегчите и себе и другим решение вашей проблемы.

Сайт AlxBuk

Поделиться

16

Re: Фотосток + FancyBox

AlxBuk пишет:

И...

Пока все что я вижу, это просто слова о том что у вас не работает плагин.

Читайте правила.

    Шаблон оформления поста о неработающем плагине
    Версия Монстры?!
    Какие плагины используются на сайте?!
    Приложите скриншоты (Minus.com, Imgur.com)
    Опубликуйте (для это этого есть Pastebin) исходный код страницы (с помощью Ctrl+U) на которой не работает плагин
    Чем более подробным будет ваш описание проблемы тем проще будет в ней разобраться.
    Этим вы облегчите и себе и другим решение вашей проблемы.

Я забил на это дело, скачал фотосток+ и все заработало. Спасибо.

Поделиться

17

Re: Фотосток + FancyBox

Вы забили не на это дело, а на развитие плагина.

Тут возможно 2 варианта, или баг есть или нету драйвера на hands.dll
У Модест даже при неправильном описании установки все получилось.

А вообще парадокс кнчн http://ru.forum.monstra.org/post/5891/#p5891

Сайт AlxBuk

Поделиться

18 (2013-05-17 02:29:44 отредактировано Илья)

Re: Фотосток + FancyBox

http://tester.sweb-s.ru/
Специально для развития плагина создал поддомен, залил туда чистую монстру и сделал все по инструкции.
А т.к. вас смущает Jquery в футере, удалил его оттуда. (Чтобы не было придирок снова, перед удалением так же проверил на работоспособность.).

Поделиться

19

Re: Фотосток + FancyBox

Илья пишет:

http://tester.sweb-s.ru/
Специально для развития плагина создал поддомен, залил туда чистую монстру и сделал все по инструкции.
А т.к. вас смущает Jquery в футере, удалил его оттуда. (Чтобы не было придирок снова, перед удалением так же проверил на работоспособность.).

Илья - Александра не интересует как Вы запустили старый не поддерживаемый плагин. Его интересует устранение проблем в своем плагине, тех проблем, которые возникли в данном случае у вас. А для этого сначала нужно понять в чем они конкретно.

Спасибо говорим плюсиком в репутацию. Так виднее smile

Поделиться

20 (2013-05-17 06:25:43 отредактировано olsv64)

Re: Фотосток + FancyBox

а все просто, он подключил jQuery 1.9.1, а ваш плагин, Александр, с ним работает? хотя и с другими версиями похоже тоже не работает smile

Сайт olsv64

Поделиться

21 (2013-05-17 06:53:07 отредактировано olsv64)

Re: Фотосток + FancyBox

может быть не хватает этого?

<script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox();$(".fancybox-effects-a").fancybox({helpers: {title : {type : 'outside'},overlay : {speedOut : 0}}});});</script>    

и вообще-то у вас как-то многовато рекомендаций по включению плагина, и стили нужно пользователю самому подключать и скрипты, у меня, например, плагин от Джинна работает нормально, а он подключений никаких не требует

Сайт olsv64

Поделиться

22

Re: Фотосток + FancyBox

sergeyterr пишет:
Илья пишет:

http://tester.sweb-s.ru/
Специально для развития плагина создал поддомен, залил туда чистую монстру и сделал все по инструкции.
А т.к. вас смущает Jquery в футере, удалил его оттуда. (Чтобы не было придирок снова, перед удалением так же проверил на работоспособность.).

Илья - Александра не интересует как Вы запустили старый не поддерживаемый плагин. Его интересует устранение проблем в своем плагине, тех проблем, которые возникли в данном случае у вас. А для этого сначала нужно понять в чем они конкретно.

Так там и подключен именно его плагин! Повнимательнее посмотри
И с этим скриптом так же не работает. Не поверите, я пробовал сотни раз. Прежде чем суда писать я по 200 раз перепробую плагин.

Поделиться

23

Re: Фотосток + FancyBox

Вот только что сам поставил уже 2 раз, и все работает.

И правильно OLSV подметил нету необходимого скрипта

<script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox();$(".fancybox-effects-a").fancybox({helpers: {title : {type : 'outside'},overlay : {speedOut : 0}}});});</script>   
Илья пишет:

И с этим скриптом так же не работает. Не поверите, я пробовал сотни раз.

Вы сначала приведите код в надлежащий вид, так как следует. А потом будем говорить.

Опять же щас заметил что в вашем первом посте так же нету этого куска кода.

Сайт AlxBuk

Поделиться

24

Re: Фотосток + FancyBox

olsv64 пишет:

и вообще-то у вас как-то многовато рекомендаций по включению плагина

Тут важна предыстория, когда у меня начались глюки с самым первым оригинальным ФотоСтоком и Лайтбоксом, то есть функции галерию выполняли 2 плагина, фотосток тупо постил картинки и галереи, а лайтбокс занимался красивым выведением всего этого на экран.
Тогда я решил вкрутить функции лайтбокса в фотосток, самым красивым (но и самым тяжелым оказался Фансибокс), но я все решил его юзать.
Ну а дальше все просто, внедрил необходимое формированием урл строки на картинку (там по сути самое важное это указание class), а все остальное делает JS.

То что приходится подключать много вручную, так это потому что я не силен в плагинописании, потому как надо было бы сдесь и сейчас, то сборка плагина делалась под конкретный сайт, а получилось вполне работающее решение. Вот и решил поделиться.

Наверное как то можно было бы стили внедрить в пагу, но это было бы не валидно.
Ну а по скриптам, опять же фансибокс в чистом виде работал только при такой конфигурации, я с этим ничего поделать не могу.

Ну сам по себе фансибокс может работать вообще без стилей, там самое главное это скрипты, для себя нашел объснение такое, что так как ссылки с картинками в галерее имеют определенный class, то скрипт должен быть раньше загружен, чем сама ссылка, а значит в <head>.
То есть скрипт загрузил отпарсил пагу, увидел ссылки вида class="fancybox-effects-a", и вывел их в модальном окошке.
Пруф - смотреть сорцы.

Как то так. smile

Сайт AlxBuk

Поделиться