javascript - Extra content in Fancybox -

javascript - Extra content in Fancybox -

i want have fancybox effect displays:

image, title, paragraph

it displays image , title.

how can display text in overlay box too?

<li> <a class="fancybox" rel="projects" href="<?php the_field('image'); ?>" title="<?php the_title(); ?>"> <img src="<?php the_field('image'); ?>" alt="" /> </a> <p>some content...</p> </li> $(".fancybox").fancybox({ padding : 0, nexteffect : 'fade', preveffect : 'fade', title : this.title, helpers : { title : { type: 'outside' } } });

any ideas?

the title property of fancybox can set valid html. behaves more caption proper title. can like:

title = '<h1>' + this.title + '</h1><p>' + this.parent().children('p').html() + '</p>',

then fancybox have div of class fancybox-title contains h1 element title in , p element re-create of paragraph in li. problem illustration children homecoming every paragraph element kid of li element. if have more 1 paragraph in li seek grab them all. recommend restructuring html can potentially have multiple block-level elements in fancybox caption. enclose paragraph in div specific class , utilize class selector in children method can set multiple paragraphs in there or whatever want really. if have no need multiple paragraphs, assign class p tag , select on in children method.

<li> <a class="fancybox" rel="projects" href="<?php the_field('image'); ?>" title="<?php the_title(); ?>"> <img src="<?php the_field('image'); ?>" alt="" /> </a> <div class="caption"> <p>some content...</p> </div> </li> $(".fancybox").fancybox({ padding : 0, nexteffect : 'fade', preveffect : 'fade', title : '<h1>' + this.title + '</h1>' + this.parent().children('.caption').html(), helpers : { title : { type: 'outside' } } });

you can replace h1 whatever sense appropriate of course. add together styles css file header , paragraph, , you're go (.fancybox-title h1 {} , .fancybox-title p {}).

javascript jquery fancybox