forum.okis.ru
http://forum.okis.ru/

Модальное окно для галереи
http://forum.okis.ru/viewtopic.php?f=10&t=1126
Страница 1 из 6

Автор:  Zorro [ 17 апр 2011, 21:18 ]
Заголовок сообщения:  Модальное окно для галереи

Приветствую.

В этой инструкции я подробно опишу метод внедрения скрипта FACEBOX в фотогалерею.

Для начала объясню что это такое. Модальное окно, в данном случае, используется для просмотра большого оригинала изображения. Это всплывающий слой с большим изображением, появляющийся после нажатия на маленькое изображение.

Пример работы скрипта можно увидеть здесь http://defunkt.io/facebox/ кликнув на ссылку с надписью "View 'images/stairs.jpg' in the Facebox".

И так, теперь несколько простых шагов:

1. Скачиваем дистрибутив скрипта FACEBOX со встроенным набором функций jQuery.
2. Распаковываем архив. Файлы: facebox.css, facebox.js, jquery.js, loading.gif, closelabel.png закачиваем через панель управления Загрузка файлов
3. Идем в Настройки сайта, и в поле Метатеги прописываем следующий код:
Код:
<link href="/file/ваш_логин/facebox.css" media="screen" rel="stylesheet" type="text/css" />
   <script src="/file/ваш_логин/jquery.js" type="text/javascript"></script>
   <script src="/file/ваш_логин/facebox.js" type="text/javascript"></script>
   <script type="text/javascript">
if( ~location.href.indexOf('foto') )
    jQuery(document).ready(function($) {
      $('a[target*=_blank]').facebox({
        loadingImage : '/file/ваш_логин/loading.gif',
        closeImage   : '/file/ваш_логин/closelabel.png'
      })
    })
  </script>

заменяя ваш_логин (ваш_логин.okis.ru)
Если испытываете трудности со вставкой этого кода в поле Метатеги - вставьте туда сначала такой код:
Код:
   <meta name="Generator" content="okis.ru">

нажмите кнопку Изменить, а уже потом добавляйте к этому коду вышеописанный.
4. Идём в фотогалерею и, наслаждаясь работой скрипта, мысленно благодарим автора скрипта и меня :ugeek:

Изменить функционал скрипта FACEBOX Вы можете заюзав поиск в группе рассылки FACEBOX

С чувством удовлетворения, ваш Z.

Автор:  Okis [ 18 апр 2011, 00:09 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Спасибо!

Автор:  canna [ 03 май 2011, 22:02 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Здравствуйте. А не подскажите, как использовать этот же скрипт для фото из интернет-магазина?

Автор:  Zorro [ 03 май 2011, 23:58 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Пока никак, ибо в интернет-магазине такой код, что не к чему "прицепиться".
Код:
<a href='/sell/.../original/105798.jpg'>

вот если бы был такой
Код:
<a href='/sell/.../original/105798.jpg' target="_blank">

тогда можно было бы...

Автор:  canna [ 04 май 2011, 00:08 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Cпасибо за ответ)) извините за настойчивость, но еще вопрос: а можно как-нибудь сделать очень-очень простой горизонтальный автоматический слайдер на jQuery, например, на главной странице?

Автор:  Zorro [ 04 май 2011, 01:33 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Конечно, даже ссылочек дам на обзор фришных слайдеров.

http://designm.ag/resources/20-useful-j ... tutorials/
http://webdesignledger.com/tutorials/10 ... nd-plugins
http://www.noupe.com/tutorial/more-on-j ... rials.html

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

Автор:  canna [ 04 май 2011, 01:53 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Спасибо)) попробую сделать) все непосредственно на странице размещать, в поле метатегов ничего не нужно встраивать?

Автор:  Zorro [ 04 май 2011, 02:14 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Нет, в метатэги не надо, только в CSS и HTML.

Автор:  ahi-rustam [ 30 май 2011, 11:09 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Zorro а ты бы не мог объяснить как сделать все так же как ты писал но со стрелочками ну чтобы переходить на следующее фото за счет стрелок например как здесь (http://ruseller.com/lessons/les238/index.html) как в галерее изображений.

Автор:  f-master [ 13 июн 2011, 21:10 ]
Заголовок сообщения:  Re: Модальное окно для галереи

Zorro, у меня возникла проблема. Скачал архив по вашей ссылке, распоковал и загрузил все, что нужно. Прописал скрипт - не работает :( Изменил имя (читает только имя сайта, видимо зона okis.ru прописана уже по умолчанию) - заработало! Но теперь другое - при появлении модального окна изображение страшно растягивается, в реальный размер. Рамка разрывается, и картинка выходит далеко за пределы шаблона сайта. Я бы изменил размер изображения, да только в разделе "Фотогалерея" эта опция отсутвует. Значит, этот скрипт будет работать только на изображениях, загруженных через "Загрузку фото"? Или все-таки, что-то можно сделать? Заранее спасибо!

Страница 1 из 6 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/