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

StackOverflow https://stackoverflow.com/questions/21691179

Pergunta

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>
Foi útil?

Solução

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

Outras dicas

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top