CODEWITHSUNDEEP
javascriptjqueryfancybox
Nick Toye
Nick Toye

Reputation: 95

Extra content in Fancybox

I want to have a Fancybox effect that displays:

Image, Title, Paragraph

It only really displays the image and title.

How can I display some text in the 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?

Upvotes: 0

Views: 1179

Answers (1)

MEP
MEP

Reputation: 271

The title property of fancybox can be set to any valid HTML. It really behaves more like a caption than a proper title. So you can do something like:

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

Then your fancybox will have a div of class fancybox-title that contains a h1 element with your title in it and p element that is a copy of the paragraph in your li. The problem with my example is that children will return every paragraph element that is a child of the li element. So if you have more than one paragraph in your li it will try to grab them all. I would recommend restructuring the HTML so that you can potentially have multiple block-level elements in your fancybox caption. Enclose the paragraph in a div with a specific class and use that class as a selector in the children method so you can put multiple paragraphs in there or whatever you want really. If you have no need for multiple paragraphs, assign a class to the p tag and select on that in the 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 the h1 with whatever you feel is most appropriate of course. Add styles to your CSS file for the header and paragraph, and you're good to go (.fancybox-title h1 {} and .fancybox-title p {}).

Upvotes: 1

Related Questions