I write a code for the fancybox and its working but i want to set height and width for fancybox but its not working. I use below code.
Javascript
<script type="text/javascript" src="/javascript/jquery/plugins/fancybox/fancybox.js?b84fd"></script>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$(".iframe").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'width' : 600, // set the width
'height' : 600, // set the height
'type' : 'iframe', // tell the script to create an iframe
'scrolling' : 'no'
});
});
</script>
HTML Code
<a id="inline" href="/content/test.html">Test</a>
Please suggest me idea how can i set height and width for fancybox.
I use fancybox in bigcommerce using this links help Big commerce help
Thanks
This code works for me settings height and width of an image
i want to display in fancybox
$('#viewlogo').live('click', function(){
$this = $(this);
$.fancybox({
'opacity' : true,
'overlayShow' : true,
'overlayColor' : '#525252',
'width' : 400,
'height' : 400,
'href' : $this.attr('href')
});
return false;
});
<a id="viewlogo" class="iframe" href="<?php echo $orig_image; ?>"><img class ="printhide" src="<?php echo $topic_media_URL; ?>" border="1" width="100" height="100" /></a>
Html code
<a id="viewlogo" class="iframe" href="<?php echo $orig_image; ?>"><img src="<?php echo $topic_media_URL; ?>" border="1" width="100" height="100" /></a>