Drupal → Модуль Fancybox — удобный просмотр изображений в всплывающих окнах

не не не
колорбокс рулит

кстати
как на счет модуля под это дело с интеграцией в фскедитор?

задумался...

ча пишу модуль под аторизацию под колорбокс, ввиду того что это актуальная проблема у новичков.. =)

колорбокс рулит

я раньше тоже колорбокс использовал, но сейчас перешёл на Fancybox :)

как на счет модуля под это дело с интеграцией в фскедитор?

что там интегрировать?

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

да, я уже просмотрел это плагин. кушает намного меньше и более приятный (чистый так сказать). просто колорбокс может обрабатывать все подряд. в этом его плюс. минус в "весе".. хотя не такой уже минус.

я перечитал весь ваш блог по друпалу. многое нового для себя узнал. и написано на понятном языке с кучей решений.
вам +. это действительно приятно.

все же друпал ориентирован на юзверей, не знающих тот же пхп

такие юзеры и модуль поставить не смогут: скачать два архива, залить куда следует, настроить как следует и где следует. тут никакие кнопки для "фскедитор" не помогут :)

вам +. это действительно приятно.

спасибо! :)

Пожалуйста до конца объясните установку с 5 пункта.
Если у меня сайт не с html5, что вводить в jQuery selector?

что вводить в jQuery selector?

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

было бы хорошо, если бы вы объяснили на нескольких примерах что писать в поле активации. к примеру если нужно вывести в модальном окне форму входа. спасибо!

нужно вывести в модальном окне форму входа

без написания js кода — никак. модуль не предназначен для этого

Посмотрела документацию по селекторам - непонятно ничего.
Мне нужно закончить быстро галерею, как пример что вводится в в jQuery selector?
Можете пример привести полной установки?

непонятно ничего.

читайте до тех пор пока не станет понятно, это основы

как пример что вводится в в jQuery selector?

ок, несколько примеров:

1. открывать в Fancybox все ссылки (сломает сайт)

a

2. открывать в Fancybox ссылки с вложенным тегом img

a:has(img)

3. открывать в Fancybox ссылки на файлы в папке /sites/default/files/

a[href^="/sites/default/files/"]

4. открывать в Fancybox ссылки с классом fancybox

a.fancybox

5. открывать в Fancybox ссылки с атрибутом rel="fancybox"

a[rel="fancybox"]

6. открывать в Fancybox ссылки с классом fancybox или с атрибутом rel="fancybox"

a.fancybox, a[rel="fancybox"]

если и это не понятно то тогда я бессилен, начните с основ css

Можете пример привести полной установки?

установки галереи? понятия не имею какой.
установки Fancybox? дак он в посте предельно чётко описан

Спасибо большое-огромное, теперь все понятно!

А как можно вебформу в фэнсибоксе показать?

Есть ли какие-нибудь готовые решения? пробовал модуль popups, но при клике - идет загрузка и все..

показать можно всё что угодно

у меня работает с версией плагина-1.3.1 с 1.3.3 не в какую не хотел дружить

для версий выше 1.3.1 нужна последняя версия jQuery, чего с помощью jQuery Update не достичь

Позволю себе ссылочку кинуть с вашего позволения Как использовать селекторы jQuery для выделения элементов страницы очень мне кажется дополняет тему выбора по селекторам в jQuery

Спасибо большое за статью!

А не подскажете, есть ли возможность, чтобы картинки с одной странички пролистывались, а не только красиво открывались?

нужно у всех ссылок прописать одинаковый rel (подробнее)

Ага, получилось :) Только проблема - при наведении на стрелку полкартинки перекрывается, вот так http://www.salonguru.ru/content/lamberto-spabeauty, картинки внизу статьи
Это просто подчеркивание ссылки такое, как я понимаю. где можно это исправить?

#fancybox-left:hover, #fancybox-right:hover { 
  background: transparent;
}

Вопрос такой: имеется D6, указываю селектор a:has(img). Такой вариант должен реализовать всплывание всех изображений в материале типа: . Не так ли? Но ничего не происходит. Помогите советом.

должно работать

может в настройках модуля указать что-то еще нужно? киртинки на странице реализованы так: <a href="file_name"><img src="file_name"></a>

не нужно

Спасибо все заработало. Было два селектора, видимо, в конфликт уходили. Оставил один, и все стало как нужно.

Спасибо большое, действительно очень понятно.
Только вопрос -
если в jQuery selector указываю путь к картинкам как "a[href^="/sites/default/files/"] - ничего не работает,
а если указать"a:has(img)"- то картинки, которые являются ссылками на ноды, вызывают страницу, на которую ссылаются в новом окне, что не есть правильно.
Подскажите, что я делаю не так.
Большое спасибо!

по какому адресу лежат картинки?

Некоторые лежат прямо в папке - /sites/default/files/. А новые, те, что заливала через импорт, лежат в отдельных папочках, но я пробовала прописывать их названия - делать несколько строк в jQuery selector - не помогло:(

но когда открывается картинка полностью - получается такой адрес - http://scrapua.com/sites/default/files/imagecache/product_full/FS-00027…

a[href^="/sites/default/files/imagecache/"]

делать несколько строк в jQuery selector - не помогло

попробуйте через запятую

я прописывала и этот путь "/sites/default/files/imagecache/product_full/",
тоже не работает

a[href^="/sites/default/files/imagecache/"] тоже не работает :( может, это из-за того, что работают пресеты для этих картинок

должно работать, вероятно что то не так делаете

но с "a:has(img)" работает...
а можно как-то из "a:has(img)" исключить те картинки, что являются ссылками не на файлы с картинками а на другие страницы?
Спасибо

a[href^="/sites/default/files/"]:has(img)

не получилось, пришлось остановиться на thickbox...

Спасибо за статью!
А для решения проблемы с ссылками-картинками указываем селектор:
a[href*='/sites/default/files/']

polet, величайшее Вам спасибо! Заработало! А можно еще вопрос- следующая картинка (если их несколько) по клику не открывается, Show navigation arrows включено ... Спасибо

Супер, спасибо, лучший бокс!

Добрый день, а что с IEшками? не отображается кнопка закрытия окошка и переключателя между фотографиями.

Здравствуйте! Вот всегда так же легко прикручивал для 6-ки фансибокс и ненарадывался... А вот прикрутить его для 7-ки никак не выходит.
Другие библиотеки такие как nivi Slider можно прикрутить через использование jQuery.noConflict(); и далее вместо $ используем jQuery.
Но вот с fancyBox такой подход не работает...
Подскажите, пожалуйста, как?

ничего прикручивать не надо, всё работает из коробки

Пропало выпадающее администраторское меню на drupal 7 как только установил FancyBox ((( Удалил FancyBox , все встало на свои места.
В чем причина такого поведения может быть, как бороться?

http://fancyapps.com/fancybox/ вышел fancyBox-v2.0.5-0 безумно красивый

ага, тоже про*бался с 1,3,4

а потом заметил что тока 1,3,1 работает

а вообще больше всего нравится thickbox, привык к нему

лайтбокс2 тормознутый какой то

за селекторы пасиб, в статью перенеси

А как вывести видео с youtube?

Не пробовали вывести hierarchical select ?
У меня получилось вывести форму, но HS не работает.
Не подключились javascript-ы в окошке.

Добрый день!
От хотел бы добавить, что необходима так же установка модуля libraries.

Эффекты не работают блин, как заставить красиво сворачиваться как у вас на сайте?

Здравствуйте, как правильно подключить модуль Fancybox в Д7

С Уважением, Женя.

Drupal 6. После установке модуля, как описано в этой статье, перестал корректно работать ckeditor. Т.е. папки открываются, но пропали кнопки для загрузки файлов, удаления и т.п. Все кнопки вверху страницы. Не выбрать уже закаченные изображения. Почему так может быть?

спасибо! установил, но теперь появился вопрос. a[href^="/sites/default/files/images/"] прописал, работает, но как сделать, чтоб все изображения на странице могли открываться последовательно? пока чтоб это сделать, мне приходится к каждому изображению в коде приписывать rel="gallery1". Какой селектор прописать дополнительно к a[href^="/sites/default/files/images/"] , чтоб картинки открывались не как одна, а с возможностью перехода к следующей на странице?

А два каталога что не работают?
т.е. типа:
a[href^="/sites/default/files/images/"]
a[href^="/sites/default/files/pictures/"]
Так уже работать не будет?
Или как-то хитрее надо прописывать?

a[href^="/sites/default/files/images/"], a[href^="/sites/default/files/pictures/"]

xandeadx
ты реально крутой :)

Здравствуйте
Задача - нужен удобный инструмент для загрузки изображений(или выбора из библиотеки) в WYSIWYG редакторе.
Установил модуль Media - решает эту задачу хорошо, поддерживает выбор стиля изображений при вставке, но не знаю как интегрировать его с fancybox, т.е. чтобы при вставке генерировался html ссылки с превью:

Возможно ли как то их объединить?

Правильно ли я понимаю, что если я просто установлю Fancybox, и в настройках селекторов добавлю a.fancybox, апосля чего создам вьюху в которой будут ссылки на всякие ноды и добавлю к ссылкам класс fancybox, то откроются они модально?

неправильно

Использую Друпал 7.
Ставлю селектор в настройках модуля - допустим .box
Потом при создании материала в визуальном редакторе (CKEditor) прописываю картинкам классы .box. Картинки открываются в фансибокс но как-то странно - на время открытия фансибокс картинке присваивается display: none, а когда я закрываю окно фансибокс - display:none у картинки так и остается, то есть получается что картинка скрывается и так и остается скрытой. Что это за мистика такая? Помогите пожалуйста если сталкивались с подобной проблемой...

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

Спасибо! Оч полезная публикация!!!!
Единственная проблема - Фэнси кривовато работает под ИЕ: не отображает никаких своих кнопок ((( Может подскажете, где копнуть сам скрипт, дабы исправить ситуацию?

И еще вопрос: где прописано, что событие открытия большой картинки происходит по клику? Хочу переделать на "овер". Что-то напрочь не могу найти... помогиииите, пож!

Ребята все так умно пишите...дайте готовый код всей галереи

такие юзеры и модуль поставить не смогут: скачать два архива, залить куда следует, настроить как следует и где следует. тут никакие кнопки для "фскедитор" не помогут :)

не правда, я целый сайт сделал)

после установки модуля картинки все также открываются просто в этом же окне, как и было ранее. прописывала и так a[href*='/sites/default/files/']
и так a[href^="/sites/default/files/"]
и так a[href^="/sites/default/files/"]:has(img)
картинки никак не реагируют

интересно, но у меня fancyBox Selectors просто не сохраняются при конфигурации!

снова пустое поле для ввода и все, после Save Configuration ...

мда...

Приветствую всех.
Если кому-то еще решение задачи вывод видео в модальном окне fancyBox с ресурса vimeo на Друпал 7 (сама долго искала решение, потому что colorbox не выводил)

После установки плагина
1. В настройках fancyBox, как тут писалось выше, в первом окне "fancyBox Selectors" я прописала a.fancybox-media
2. Поставила галочку в пункте "Enable the media helper"
3. Обновила кэш
4. В Типе содержимого, который мне был нужен создала поле ТИП ПОЛЯ - ссылка, ВИДЖЕТ ссылка (для этого нужен модуль Link). В управлении отображением выбираем "Заголовок, как ссылка", при создании поля в настройках поля при создании ставим "Обязательный заголовок" и задаем максимальное значение знаков для него.
в поле "Дополнительный CSS-класс" пишем fancybox-media.
Итого наше новое поле состоит из заголовка и url
5. При создании ноды: в заголовок нашего поля пишем

в URL вставляем ссылку на ролик с vimeo
https://vimeo.com/ваши циферки

Сохраняем и наслаждаемся.
Дальше уже можно средствами css оформить как будет выглядеть картинка пересылающая пользователя на ролик.
Надеюсь кому-то помогла, т.к. сама 2 дня искала решение именно для vimeo

P.S. На сайте http://fancybox.net/ прописаны все классы для различных примеров вывода контента если чо))))
6.

Извините не поставила тэг code, и так

5. При создании ноды: в заголовок нашего поля пишем
<img src="http://ссылка на ваше изобрашение">

P.S. Вот тут fancyapps.com/fancybox/#license ! прописаны все классы для различных примеров вывода контента если чо)))) Поторопилась опять же ))))

Здравствуйте.
Скажите каким образом можно отключить обработку модулем fancybox поля-изображения по умолчанию.

А как сделать чтобы видео с ютуба в fancybox запускалось автоматически?

google -> fancybox youtube autoplay