So I have this fancybox I'm opening like this:
$('.btn-test').on("click",function(){
$.fancybox.open({
'content': $('.modal_size-chart'),
'minWidth': 380,
'minHeight': 550,
'width': 380,
'height': 550,
'maxWidth': 380,
'maxHeight': 550,
'autoScale': false,
'autoDimensions': false,
'fitToView': false,
});
});
My problem is that like this, If I alter the box via css, any change will propagate to all the other fancyboxes I might open and this .modal_size-chart needs some specific styling the rest of the boxes don't.
So is there a way to pass a desired class name to fancybox on call ?
It turns out all I needed to add was the tpl attribute ( which is explained in the documentation site as : Object Containing Various Templates.. jezz...) and the wrap attribute inside the tpl.
so it ended up being like this:
$('.btn-test').on("click",function(){
$.fancybox.open({
'content': $('.modal_size-chart'),
'minWidth': 380,
'minHeight': 550,
'width': 380,
'height': 550,
'maxWidth': 380,
'maxHeight': 550,
'autoScale': false,
'autoDimensions': false,
'fitToView': false,
'tpl': {
wrap:'<div class="fancybox-wrap CLASS I WANT TO ADD HERE" tabindex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
}
});
});
Related
Can anyone tell me how to refresh a Fancybox popup ?
Here is how i create it.
$.fancybox({
'width' : 470, // set the width
'height' : 190,
'autoSize': false,
'transitionIn': 'fade',
'transitionOut': 'fade',
'href': 'pop.jsp',
'autoDimension' : false,
'type': 'iframe',
});
You may be able to do it by refering to $('iframe.fancybox-iframe'), with something like this:
$('iframe.fancybox-iframe').attr('src', function(i, val){return val;});
(according to Reload an iframe with jQuery)
example here: http://jsfiddle.net/pataluc/aLbYr/
I am creating book shelf using jquery bookshelf Slider. Its Working good but i need some modifications in my book self.
Our Book self demo link
Book shelf demo
Our modifications are given below :
Default load time title and icons are hide.
if we need to click title or icons. show the title or icon.
Our Script is given below
<script type="text/javascript">
jQuery(document).ready(function() {
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': '100%', //responsive design > resize window to see working
'item_height': 320,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 20,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeOutQuart',
'arrow_duration': 800,
'arrow_easing': 'easeInOutQuart',
'video_width_height': [500,290],
'iframe_width_height': [500,330]
}
);
});//ready
</script>
We are already try to change the 'product_show_title': true, to
'product_show_title': false,
But its not working for me. so please advise..
Set the opacity of the title and icons properly after plugin initialization.
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': 605,
'item_height': 720,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 30,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeInOutExpo',
'arrow_duration': 800,
'arrow_easing': 'easeInOutExpo',
'video_width_height': [600,600],
'iframe_width_height': [600,600]
}
);
$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');
DEMO
I have say 10 images and when anyone of them is clicked they open up a Fancybox frame (HTML). The problem is each images has a different sized Fancybox frame that needs to be opened.
How can I send the height and width from the image being clicked.
$("a.various").fancybox({
beforeClose: function () {
$("#gallery_spacer").remove();
},
openEffect: 'fade',
openSpeed: 1500,
closeEffect: 'fade',
closeSpeed: 400,
padding: '0',
width: 660,
height: 700,
maxWidth: 660,
maxHeight: 700,
fitToView: false,
autoSize: false,
closeClick: false,
autoScale: 'false',
autoDimensions: 'false',
transitionIn: 'true',
transitionOut: 'true',
type: 'iframe',
openEffect: 'fade',
helpers: {
overlay: {
css: {
'background': 'rgba(255, 255, 255, 0.0)'
}
}
}
});
$("a.various1").fancybox({
beforeClose: function () {
$("#gallery_spacer").remove();
},
openEffect: 'fade',
openSpeed: 1500,
closeEffect: 'fade',
closeSpeed: 400,
padding: '0',
scrolling: 'no',
width: 660,
height: 1870,
maxWidth: 660,
maxHeight: 1870,
fitToView: false,
autoSize: false,
closeClick: false,
autoScale: 'false',
autoDimensions: 'false',
transitionIn: 'true',
transitionOut: 'true',
type: 'iframe',
openEffect: 'fade',
helpers: {
overlay: {
css: {
'background': 'rgba(255, 255, 255, 0.0)'
}
}
}
});
The HTML
<li><a class="various1 fade " href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg" border="0" /></a></li>
<li><a class="various2 fade " href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg" border="0" /></a></li>
You basically need a single script to bind all your links to fancybox, then use data-* (HTML5) attributes to pass the width and height individually
You could use this html :
<li><a class="fancybox" data-width="660" data-height="700" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg" border="0" /></a></li>
<li><a class="fancybox" data-width="660" data-height="1870" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg" border="0" /></a></li>
... and fetch the size of each link using fancybox beforeShow callback like :
beforeShow: function () {
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
... where $(this.element) refers to each clicked element.
See JSFIDDLE
Please notice in the fiddle that I commented out some API options that are not valid in v2.x (they are for v1.3.4 and are not compatible)
you can get the width and height of the image like that:
var w = $("a.various1 img").width();
var h = $("a.various1 img").heigth();
Since you are loading content into an iframe, you cannot get the required dimensions for fancybox until after the html is rendered in the iframe.
What you can do is use onComplete to resize the fancybox after the html is rendered as described here.
So for your case you do something like this:
$("a.various").fancybox({
beforeClose: function () { $("#gallery_spacer").remove(); },
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height()).width($(this).contents().find('body').width());
});
openEffect: 'fade',openSpeed: 1500,closeEffect: 'fade',closeSpeed: 400,'padding': '0','width': 660,'height': 700,
maxWidth: 660,maxHeight: 700,fitToView: false,autoSize: false,closeClick: false,'autoScale': 'false','autoDimensions': 'false',
'transitionIn': 'true','transitionOut': 'true','type': 'iframe','openEffect': 'fade',
helpers: {overlay: { css: {'background': 'rgba(255, 255, 255, 0.0)'}}}});
Here is my Code
<script type="text/javascript">
$(document).ready(function () {
$("#popup").fancybox({
'width': 500,
'height': '500',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'type': 'iframe'
});
});
</script>
width of iframe is set, but Height is not set.
Please let me know where am I going wrong?
Thanks.
I got it solved by doing this...
$(document).ready(function () {
$("#popup").fancybox({
fitToView: false,
autoSize: false,
autoDimensions: false,
width: 520,
height: 310,
title: 'Login',
helpers: {
title: {
type: 'float'
},
},
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
});
Thanks, Anyway...
Your height variable value should be a number, right now you have it as a string. So your code should look more like this:
<script type="text/javascript">
$(document).ready(function () {
$("#popup").fancybox({
'width': 500,
'height': 500,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'type': 'iframe'
});
});
</script>
Assuming that you have the classes "fancybox" and "fancybox.iframe" on your element, the minimum that is needed to accomplish what you need is:
$('.fancybox').fancybox({
autoSize: false,
width: 400,
height: 400
});
I am using Fancybox 1.3.4 (currently the latest) and I use the following HTML elements:
<a href="LARGE_URL" title="FANCY_CAPTION" rel="gallery" class="gallery-item">
<img src="SMALL_URL"/>
</a>
<a> ... repeat N times... </a>
Then I use the following jQuery code:
<script>
$(document).ready(function() {
$('a.gallery-item').fancybox({
'autoDimensions': 'false',
'width':900,
'height':'auto',
'cyclic': true,
'centerOnScroll': 'false',
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'overlayShow': true,
'overlayOpacity': 0.7,
'overlayColor': '#666',
'titleShow': true,
'titlePosition': 'inside',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 400,
'speedOut': 200,
'showCloseButton': true,
'showNavArrows': true,
'enableEscapeButton': true
});
});
</script>
I also tried
'width':'900',
or setting both
'width':900,
'height':600,
but it just does not work.
Any solutions to this?
I need the #fancybox-wrapper element in an exact size.
try to remove quotes around false:
'autoDimensions': false