Fancybox2 - другой контент для всплывающей подсказки и заголовка изображения, оба из атрибута title? - PullRequest
Новая
       20

Fancybox2 - другой контент для всплывающей подсказки и заголовка изображения, оба из атрибута title?

2 голосов
/ 07 декабря 2011

Как всплывающая подсказка, так и заголовок изображения галереи, взяты из одного и того же заголовка HTML-атрибута.

Мне бы хотелось иметь другое содержимое для всплывающей подсказки и заголовка изображения.

например, я бы хотел, чтобы всплывающая подсказка гласила: Sculpture name, а заголовок изображения: Sculpture name: Height 123cm

Есть ли способ сделать это?

Большое спасибо.

Мой текущий HTML: 

<a class="fancybox" rel="works" title="Sculpture1 Height:1232mm"     href="images/Sculpture1_large_res.jpg"><imagetag alt="Sculpture1 Height:1232mm" src="images/thumbs/Sculpture1_thumb.jpg" class="thumb"></a>  

<a class="fancybox" rel="works" title="Sculpture2 Height:1232mm" href="images/Sculpture2_large_res.jpg"><imagetag alt="Sculpture2 Height:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>

UDATE:

Мои текущие настройки; 

$(document).ready(function() {

$(".fancybox").fancybox({
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    'arrows' :    false,
        helpers     : { 
        buttons : {}
    }

});

});

1 Ответ

4 голосов
/ 08 декабря 2011

Я бы сделал так, чтобы заголовки отображались в Fancybox в скрытом DIV, чтобы моя подсказка отображала содержимое, отличное от заголовка в Fancybox:

ОБНОВЛЕНИЕ : отредактировано в соответствии с вашим образцом контента

Ваш HTML: 

<a class="fancybox" rel="works" title="Sculpture1" href="images/Sculpture1_large_res.jpg"><img alt="Sculpture1 Height:1232mm" src="images/thumbs/Sculpture1_thumb.jpg" class="thumb"></a>  
<a class="fancybox" rel="works" title="Sculpture2" href="images/Sculpture2_large_res.jpg"><img alt="Sculpture2 Height:1232mm" src="images/thumbs/Sculpture2_thumb.jpg" class="thumb"></a>

Обратите внимание на значения атрибута title.

NEW : (в любом месте вашего тега <body>) заголовки Fancybox: 

<div id="fancyboxTitles" style="display: none;">
    <div>Sculpture1 Height: 1232mm</div>
    <div>Sculpture2 Height: 1232mm</div>
</div>

Обратите внимание на то, что у вас должно быть вложенное <DIV> (с новым заголовком) для каждого изображения в вашей галерее.

Затем скрипт: 

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterLoad : function() {
   this.title = $("#fancyboxTitles div").eq(this.index).html();
  }
 }); //fancybox
}); // ready

ОБНОВЛЕНИЕ № 2 (Dec09, 13: 43PT) : Показать, как интегрировать предлагаемое решение в исходный опубликованный скрипт: 

$(document).ready(function() {
    $(".fancybox").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            arrows :    false,
            helpers : { 
                    buttons : {}
            }, // helpers
            afterLoad : function() {
                this.title = $("#fancyboxTitles div").eq(this.index).html();
            } // afterload
    }); // fancybox
}); // ready

ОБНОВЛЕНИЕ № 3 - 03 июня 2012 г. : Для fancybox v2.0.6 используйте beforeShow вместо afterLoad

...