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. Идём в фотогалерею и, наслаждаясь работой скрипта, мысленно благодарим автора скрипта и меня Изменить функционал скрипта 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/ |