CODEWITHSUNDEEP
javascriptjqueryfancyboxfancybox-2
user3295224
user3295224

Reputation: 15

how do i get fancybox content to load after clicking the link?

fancybox content loads while the page is loading too.. I want it so where you could load content only when the link is clicked... right now the content inside the fancybox is loading when you open the page. I think you have to put an event handler but I don't know how.

please watch the video to UNDERSTAND FULLY! http://www.youtube.com/watch?v=b6MxkBhRC-w

here is my code 

<body>

<a href="#image_link" title="PutLockerMedia" id="click">watch</a>
<div style="display:none">
  <div id="image_link">
    <div class="imageWrapper">
      <div class="image"> 
    <iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>




<script type="text/javascript">
$(document).ready(function() {
        $("#click").fancybox();
    });
</script>


</body>

Upvotes: 1

Views: 1166

Answers (2)

JFK
JFK

Reputation: 41143

The issue you have is that you are loading an iframe as inline content so regardless it's visible or not, it still loads in the background.

What you have to do is, instead of targeting the inline selector #image_link, target directly to the contents of the iframe (the value of its src attribute) in your <a> tag like :

<a href="http://www.putlocker.com/embed/E25FA20CE8643E5F" title="PutLockerMedia" id="click">watch</a>

... and that's the only html you need (you can delete the hidden div)

Then use this code :

$(document).ready(function () {
    $("#click").fancybox({
        type: "iframe",
        width: 600,
        height: 360
    });
});

See JSFIDDLE

Upvotes: 1

Flying Fisher
Flying Fisher

Reputation: 1952

I do not know fancybox, but I know something similiar 'lightbox'. I think they may work in same way.

Not the fancybox loads the content you need, but the iframe loads. Fancybox only show it in some style, I think.

So try to remove src attribut in iframe. And try to show fancybox use API. I may use lightbox to show what I mean.

$("#click").click(function() {$("iframe").attr("src","xxxx"); $.lightbox("#image_link")})

I hope it helps.

Upvotes: 0

Related Questions