CODEWITHSUNDEEP
javascriptjqueryhtmlfancybox
ProWebMonkey
ProWebMonkey

Reputation: 121

How to send a Title attribute to a FancyBox gallery image?

I am trying to load a title attribute onto the popup gallery images on a FancyBox installation. Because the gallery is loaded dynamically from the tags on the page, I can't place the title directly onto them. Also when I add the title attribute to the tag, it is only used for the visible title.

What I need is a way to add the title used on the gallery tags as a title attribute on the actual expanded image. The only reason I need this, is because Pinterest uses the title attribute to populate the description when using the Pinterest button.

The code I have on page is: 

<div id="gal1180">
 <a href=“/path_to_image.jpg" class="fancybox" rel="gal1180" caption=“Test caption“>1</a>
 <a href=“/path_to_image_2.jpg" class="fancybox" rel="gal1180" caption=“Test caption 2“>2</a>
 <a href=“/path_to_image_3.jpg" class="fancybox" rel="gal1180" caption=“Test caption 3“>3</a>
</div>

The code I am using to initiate FancyBox is: 

$('.fancybox').fancybox({
    helpers: {
        overlay: {
            locked: false
        }
    },
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    },
    afterShow: function() {
        touchSupport();
    }
});

Any help on this would be greatly appreciated.

Upvotes: 0

Views: 443

Answers (3)

Iwan Ross
Iwan Ross

Reputation: 354

This worked for me.

The fancybox image:

 <a id="mbimageref" href="" data-fancybox data-caption="" data-close-btn- 
 text="X">path to your image.....</a>

The script to load the caption dynamically

 <script>
 var plaintext = "whatever your want the caption to be";
 $("#mbimageref").attr('data-caption',plaintext);   
 </script>

Upvotes: 0

ProWebMonkey
ProWebMonkey

Reputation: 121

Thank you to Flyde for helping with some ideas. This worked in the end.

$('.fancybox').fancybox({
    afterShow: function() {
        $(".fancybox-image").attr("title", $(this.element).attr('caption'));
    }
});

Hope this helps someone else in the future.

Upvotes: 1

kair
kair

Reputation: 1056

Try this

    beforeLoad: function() {
        $(this).attr("title", $(this).attr('caption'));
    }

or if in this context the element is inside this.element

    beforeLoad: function() {
        $(this.element).attr("title", $(this.element).attr('caption'));
    }

But if the dom is not loaded in "beforeLoad" try this inside afterShow

afterShow: function() {
    touchSupport();
    $(this.element).attr("title", $(this.element).attr('caption'));
    // or $(this).attr("title", $(this).attr('caption'));
}

Edit:

Try this one

$("#gal1180").fancybox({
    ...
    onComplete: function() {
         $(".fancybox").each(function() {
            $(this).attr("title", $(this).attr("caption"));
         });
    }
});

Upvotes: 1

Related Questions