Question

I could use some help isolating an element or two and putting them into javascript variables. I am still learning how to properly identify things in the DOM, I have to imagine what I am trying to do is possible.

Consider the following:

$('.fancybox').fancybox({
    'autoScale': false,
    'type': 'iframe',
    'padding': 0,
    'closeClick': false,
    helpers: {
        overlay: {
            closeClick: false
        }
    },
    afterShow: function () {
        $("#overlay_content_top").show();
        $("#overlay_content_bottom").show();
    },
    afterClose: function () {
        $("#overlay_content_top").hide();
        $("#overlay_content_bottom").hide();
    }
});

<div class ="example">
<a class="fancybox" href="http://my-iframe.example"><img src="myimage.jpg" width="x" height="y" /></a>
**<span>Important Information I need</span>**
</div>

I need to put the html from .example span into a variable and then apply it to something that is displaying in the fancybox.

So something like this in crazy pseudo code:

var getname = $(this).html('.example span');

$('.inherit_span').html(getname);

I have twenty different items on the page that can be clicked and I dont want to have to generate separate id’s or names for each item, I would rather just grab the html from the span when the fancybox function is called and then apply that name to another element within the lightbox display. Any help appreciated.

Answer 1

You may have the scenario where there are multiple <a> tags with multiple <span> tags after them, in that case use the .next() method within the beforeShow callback like

beforeShow: function(){
 var getname = $(this.element).next('span').html();
 $('.inherit_span').html(getname);
}

NOTE: in order to make the variable getname available outside the callback, declare it at the beginning of your script like

<script>
var getname;
.
.