am new to js and have tried to open a fancybox iframe containing my facebook fan page like box upon the first load of my website with no success. I have made all the calls to the js files in fancybox and the apropriate css in the header section I am trying to include code in the index page in order to display the iframe on page load with no success, the iframe just doesn't show. here's the code that i use:
<script type="text/javascript">
$(document).ready(function() {
$(".iframe" ).fancybox({
'width' : '75%',
'height' : 440,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'href' : "www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPalindrom%2F104421159704142&width=600&height=258&colorscheme=dark&show_faces=true&border_color=%2399c844&stream=false&header=false&appId=391204344279942"
});
$(".iframe").eq(0).trigger('click');
});
</script>
<a id="iframe"></a>
Solved! thanks guys! managed to get it to open using the $.fancybox with no need for an anchor. Here's the code i used maybe it will help someone else that is also a novice when it comes to jquery and fancybox (i also added a delay timer):
<script type="text/javascript">
setTimeout(function() {
// Do something after 5 seconds
$.fancybox({
'width' : 620,
'height' : 260,
'autoScale' : true,
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'openEffect' : 'fade',
'closeEffect' : 'elastic',
'type' : 'iframe',
'href' : "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPalindrom%2F104421159704142&width=600&height=258&colorscheme=light&show_faces=true&border_color=%2399c844&stream=false&header=false&appId=391204344279942"
});
}, 5000);
What about adding http:// before www?
so this option
'href' : "www.facebook.com/....
should look like
'href' : "http://www.facebook.com/...
<script>
$(document).ready(function() {
$(".iframe" ).fancybox({ // .iframe - defined class here
'width' : '75%',
'height' : 440,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'href' : "www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPalindrom%2F104421159704142&width=600&height=258&colorscheme=dark&show_faces=true&border_color=%2399c844&stream=false&header=false&appId=391204344279942"
});
$(".iframe").eq(0).trigger('click');
});
</script>
<a id="iframe"></a> <!-- #iframe - defined an ID here -->
Maybe you can try to change id <a id="iframe"></a> to class of <a class="iframe"></a>
JsFiddle Demo here