jquery - una - Fancybox2: ¿contenido diferente para la información sobre herramientas y el título de la imagen, ambos del atributo de título?
propiedad alt imagen (1)
Lo que haría es configurar los títulos para que aparezcan en Fancybox en un DIV oculto, así que mi información sobre herramientas mostrará un contenido diferente del título en Fancybox:
ACTUALIZACIÓN : editada para que coincida con su muestra de contenido
Tu 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>
Observe los valores de los atributos del title .
NUEVO : (en cualquier lugar dentro de tu etiqueta <body> ) los títulos de Fancybox:
<div id="fancyboxTitles" style="display: none;">
<div>Sculpture1 Height: 1232mm</div>
<div>Sculpture2 Height: 1232mm</div>
</div>
Tenga en cuenta que debe tener un <DIV> anidado (con el nuevo título) para cada imagen en su galería.
Entonces, el guion:
$(document).ready(function() {
$(".fancybox").fancybox({
afterLoad : function() {
this.title = $("#fancyboxTitles div").eq(this.index).html();
}
}); //fancybox
}); // ready
ACTUALIZACIÓN # 2 (Dec09, 13: 43PT) : Muestre cómo integrar la solución propuesta en el guión original publicado:
$(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
ACTUALIZACIÓN # 3 - 03 de junio de 2012 : para fancybox v2.0.6, use beforeShow lugar de afterLoad
Tanto la información sobre herramientas en miniatura como el título de la imagen de la galería se toman del mismo atributo HTML del título.
Me gustaría tener un contenido diferente para la información sobre herramientas en miniatura y el título de la imagen.
Por ejemplo, me gustaría que la información sobre herramientas diga: Sculpture name y el título de la imagen para decir: Sculpture name: Height 123cm
¿Hay alguna forma de hacer esto?
Muchas gracias.
Mi HTML actual:
<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:
Mis opciones actuales;
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : ''elastic'',
closeEffect : ''elastic'',
''arrows'' : false,
helpers : {
buttons : {}
}
});
});