Вопрос по fancybox [РЕШЕНО]

[chelsyk]

Добрый день.
Как штатными средставами (fancybox) сделать следующее:
1. Имеется, к примеру превью размером 100х100 (img1)
2. При наведении видим другое превью-изображение (затемненное (img2)).
3. При клике получаем всплывающий fancybox с третьим full-изображением (img3)

Код: Выделить всё

<img src="./img/pre/1.png"></img>                             /// превью-1
<a class="fancybox"  href="./img/full/1.jpg"></a>        /// фулл-изображение в фэнсибоксе
<img class="mask" src="./img/bg/mask.png"></img>    /// превью-1 при наведении

Не знаю, как это реализовать в билдере.
Буду благодарен

UPD: Получилось сделать изображение+ эффект onmouseover и onmouseout, т.е первые 2 шага.
UPD2: Можно также сделать через фрейм + картинку. Не совсем тот эффект при открытии, но в любом случае - onmouseover и onmouseout сюда не прикручиваются.
РЕШЕНИЕ: Обновитесь до 9.х и используйте LightBox. Спасибо, Mavik!

[Конструкторщик]

Добрый день.
Как штатными средставами (fancybox) сделать следующее:
1. Имеется, к примеру превью размером 100х100 (img1)
2. При наведении видим другое превью-изображение (затемненное (img2)).
3. При клике получаем всплывающий fancybox с третьим full-изображением (img3)

Код: Выделить всё

<img src="./img/pre/1.png"></img>                             /// превью-1
<a class="fancybox"  href="./img/full/1.jpg"></a>        /// фулл-изображение в фэнсибоксе
<img class="mask" src="./img/bg/mask.png"></img>    /// превью-1 при наведении

Не знаю, как это реализовать в билдере.
Буду благодарен

UPD: Получилось сделать изображение+ эффект onmouseover и onmouseout, т.е первые 2 шага.
UPD2: Можно также сделать через фрейм + картинку. Не совсем тот эффект при открытии, но в любом случае - onmouseover и onmouseout сюда не прикручиваются.

Не легче в интернете найти уже готовое решение и просто вставить его в Билдер?

[chelsyk]

Не легче в интернете найти уже готовое решение и просто вставить его в Билдер?

Просто тут ничего сложного, вроде, нет, но в то же время - тупик. Хотелось бы в билдере добить этот момент.

[chelsyk]

Еще как вариант можно сделать через управляемые изображения (rollover images), НО при привязке ссылки к объекту, она открывается в новом окне, а не во фрейме фэнсибокса :(

[Mavik]

Самое примитивное решение:
Используя приложение "Управляемое изображение" открыть файл в лайтбоксе.
Пример: http://mavik.vv.si/5/

Во блин, в одно время подали с разницей часовых поясов.

[chelsyk]

Mavik, спасибо, что откликнулись. В вашем примере именно то, что доктор прописал.

В моем случае была проблема из-за использования старой версии (8.6 вроде) - там не было возможности запустить лайтбокс из-под Управляемых изображений. Спасибо!

[chelsyk]

Еще небольшой вопрос появился: ручками в параметрах прописал height и width, но проблема в том, что высота изображения во фрейме - около 2000px и отображается 800px и идет скролл по высоте. Можно его убить как-то? Не критично, но все же.

Код: Выделить всё

overflow:  hidden

не срабатывает в параметрах

[Mavik]

Код: Выделить всё

scrolling: 'no'

[chelsyk]

Mavik, спасибо. Помогло. Убило скролинг, но обрезало изображение.
Идея заключалась в том, чтобы убрать скроллинг в айфрейме, но оставить скроллинг изображения на странице, но не беда. Пожалуй, верну скролл в айфрейме

[Mavik]

Код: Выделить всё

autoScale:true

[Mavik]

Или, лучше всего:

Код: Выделить всё

width: 250,
height: 250

указываем размер изображения

[chelsyk]

autoScale:true не помог.

Код: Выделить всё

width:1000,
height:3480,
scrolling:'no',
autoScale:'true',

Пожалуй, я слишком изощряюсь и придираюсь к деталям. Со скроллом терпимо. Возможно проблема в таком огромном изображении и разрешении экрана 1368х768. Спасибо вам еще раз.

[Mavik]

Да, с таким размером проблематично.
Попробуй еще

Код: Выделить всё

autoDimensions:true

Код: Выделить всё

autoSize:true

Код: Выделить всё

autoResize:true

Код: Выделить всё

fitToView:true

Просто пишу по памяти с планшета и нет возможности проверить в программе.