Fancybox Imagemap Gallery

Что мне нужно - это изображение, которое после нажатия открывается галерея. Я использую FancyBox, и я хочу Thumbnail Helper (с картой изображения)Fancybox Imagemap Gallery

это так: http://jsfiddle.net/ffZ7B/343/ При нажатии на левый водоворот, он открывает галерею, но dosn't показать эскизы.

Я попытался это: http://jsfiddle.net/ffZ7B/344/

Кто-нибудь знает, как это сделать?

Спасибо!

источник

2012-07-02 Azuen

Я попробовал это, проверил ли вы вторую ссылку? – Azuen

http://meta.stackexchange.com/a/5235, если вы найдете этот ответ полезным. – JFK

Thumbnail Helper - полностью новая функция fancybox v2.x и несуществующая в предыдущих версиях. Вы используете fancybox v1.3.4 в своем jsfiddle.

Если вы хотите использовать Thumbnail Helper, вы должны обновить Fancybox v2.x, а затем использовать этот код:

HTML:

<img src="images/imageMap.jpg" usemap="#map" /> 

<map name="map" id="map"> 
<area class="fancybox" href="images/01.jpg" data-fancybox-group="gallery" shape="rect" coords="46,38,201,154" title="01" /> 
<area class="fancybox" href="images/02.jpg" data-fancybox-group="gallery" shape="rect" coords="295,35,388,83" title="02" /> 
<area class="fancybox" href="images/03.jpg" data-fancybox-group="gallery" shape="rect" coords="27,166,134,293" title="03" /> 
</map>

JS:

$(document).ready(function() { 
$("area.fancybox").fancybox({ 
    helpers: { 
    thumbs : { 
    width : 50, 
    height : 50 
    } 
    } 
}); // fancybox 
}); // ready

УВЕДОМЛЕНИЕ что мы использовали атрибут data-fancybox-group="gallery", чтобы установить элементы галереи ().не будет работать с тегом area, как это было с v1.3.4.) Возможно, вам потребуется установить HTML5 DOCTYPE, хотя и для целей проверки.

UPDATE: См working DEMO here - ПРИМЕЧАНИЕ (Jan 15, 2013) это демо потерпит неудачу, потому что использует JQuery v1.9.0. Проверьте THIS для дальнейших справок. Вы могли бы воспроизвести рабочую демонстрацию с jQuery v1.8.3.

источник

2012-07-02 19:37:24 JFK

Это именно то, что мне нужно. Спасибо огромное! Я сейчас обновлю свой Fancybox. – Azuen

Пожалуйста, если вы могли бы помочь мне снова. Я очень старался, но это не сработало. Вот мои оригинальные js: http://www.heypasteit.com/clip/0E43. Затем я перешел на: http://www.heypasteit.com/clip/0E47. Мой заголовок: http://www.heypasteit.com/clip/0E48. Я думаю, что проблема связана с совместимостью – Azuen

WOW, я не знаю, как, но я просто сделал это! Сейчас он работает, но есть две проблемы. Сначала он не закрывается, когда я нажимаю кнопку «X» вверху, единственный способ закрыть - щелкнуть мышью по изображению, выцветшую часть. Также я не могу менять изображения с помощью thumnails, только кнопки. Ты знаешь почему? Это код, который я использую: http://jsfiddle.net/ffZ7B/345/ (Да, есть изображения, которых нет в «коордах», потому что они принадлежат галерее, может быть, это и есть причина. хотите показать только первое изображение, чтобы проверить другие, с которыми вы должны сначала открывать галерею, другой способ сделать это?) – Azuen

Fancybox Imagemap Gallery

ответ

Смежные вопросы