FancyBox's title from sibling container

Question

I am having a real simple/stupid problem and my lack of jQuery knowledge isn't helping.

In principle I have a galley with multiple pictures and want to use a sibling-<div>-block with some HTML markup as title with FancyBox. Here's a bare-bones fiddle of my problem:

HTML:

<div class="someClass">
  <a title="some title"
     class="fancybox"
     href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg"
         alt=""/>
  </a>
</div>

<div class="captionClass">
     this should be <br /> the <b>caption</b>
</div>

JavaScript:

$(".fancybox").fancybox({

  'beforeLoad' : function() {
     this.title = $(this).siblings('.captionClass').html();
  }

 });

Any help would be much appreciated :)

@SamBattat thanks, that was pretty obvious! :) Unfortunately, though, it's still not working, but my gut says it has something to do with FancyBox as I haven’t witnessed a working `
`-title in my research so far… — Phil Strahl, Aug 13 '14 at 21:54
maybe http://stackoverflow.com/a/9611664/1055987 (check also linked answers) — JFK, Aug 13 '14 at 22:27

Sam Battat · Accepted Answer · 2014-08-13T23:05:54.933

1

You should change the function to afterLoad

$(".fancybox").fancybox({
    afterLoad: function () {
        this.title = $(this.element).parent().siblings('.captionClass').html()
    },
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(58, 42, 45, 0.95)'
            }
        }
    }
});

DEMO: http://jsfiddle.net/6gvjsd9u/

edited Aug 13 '14 at 23:05

answered Aug 13 '14 at 19:15

Sam Battat

5,725
1
20
29

1

Works like a charm, thank you! Although I need the HTML-markup I used .html() but it still works. Now I only gotta wrap my head around the CSS ;) – Phil Strahl Aug 13 '14 at 23:03
1

Yeah .html() should work too, I don't know why I said that :) – Sam Battat Aug 13 '14 at 23:05

FancyBox's title from sibling container

1 Answers1