When I use method resize(); I get FancyBo window at full mode, with a width = 100%, although on I set a setting:
'width' : 950,
'frameWidth': 950,
Related
I am new to javascript and jQuery and am trying to make a slideshow using Fancybox.
The problem is that I want the images to display on a box of the same size regardless of whether they are portrait or landscape images. My images are all either 700 X 525 for landscape or 525 X 700 for portrait.
The way I have it the landscape images load like it is showed on the top of the image below, the portrait images load as shown in the middle, and I want the portrait images to load as shown on the bottom, with the box with the same dimensions as if it were landscape:
I think what I should do is change the left padding depending on the image dimensions but I have no idea how.
Thank you for your help in advance.
I am using Fancybox version: 2.1.4 and I have set the defaults as such:
padding : 15,
margin : 20,
width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
autoSize : true,
autoHeight : false,
autoWidth : false,
autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5,
I know this post is 11 months old, but I thought I would share my solution in case it helps someone else out in the future.
Basically I have set a min-width css attribute onto the fancybox element and am comparing that against the current image width, if it is smaller I am adding padding to the fancybox element so that the fancybox element stays the same width but the image inside is horizontally centered.
Step 1: in your css set a min-width on the fancybox element. This is the width that you want your fancybox element to stay at regardless of image width.
.fancybox-wrap { min-width: 1120px; }
Step 2: add in the afterLoad function when you call fancybox
$(".fancybox").fancybox({
afterLoad: function(current) {
var $el = $(".fancybox-wrap").eq(0); // grab the main fancybox element
var getcurrwidth = current.width; // grab the currrent width of the element
var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css
var currwidth = Number(getcurrwidth);
var desiredwidth = Number(getdesiredwidth.replace('px', ''));
if (currwidth < desiredwidth)
{
var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount
this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element
}
}
});
I have just set up supersized on my new site, with the intention of using it for the background. (not the slideshow)
How ever, i cant seem to get it to fit_always.
i am not sure if i am changing the right setting.
/* Default Options
----------------------------*/
$.supersized.defaultOptions = {
// Functionality
start_slide : 1, // Start slide (0 is random)
new_window : 1, // Image links open in new window/tab
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
};
I have tried adjusting the 0 & 1 variables. but im not 100% sure this is the right place, as nothing seems to change. ??
I have also come across this Fit_Always Website
with this code
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', fit_always: true}
So i even tried putting fit_always: true etc.. after the imgage link, but then the image just fails to load.
website is www.amberroom_salon.co.uk
thanks
Not sure how to explain this, but here goes:
Instead of Fancybox opening a 'box' on the page which can have a scroll bar inside it to view overflow content, I want the content to just sit on top of the current / parent content.
So, at the moment, if the browser inner width was 800px and you were opening content that needed 1200px height, then the Fancybox 'box' height can be set at 800px and a scrollbar is used to scroll the content of the new 'box' (as the content is 1200px). I want to do it so there is no new scrollbar, but the new content is the full 1200px which pushes the main/parent page down (forcing a scroll bar on the parent if none already existed).
Clicking the close button would still close it.
Is this possible? Do I make sense?
This is for FancyBox 2.
So for this html
<a class="fancybox" href="{target content}">open content at 1200px height</a>
use this script
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
height: 1200,
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no" // so no scroll bars inside fancybox
});
NOTES: You cannot set specific dimensions to images, they will be either full size (when fitToView is set to false) or scaled to the viewport (when fitToView is set to true); the other types of content can be adjusted to the dimensions of width and height as in the code above.
TIP : you may open different type of content (or target different contents) with different heights each and change the height of fancybox dynamically using the HTML5 data-* attribute .... so for this html:
<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>
then add the callback beforeShow to your script to get the value of data-height like this
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
// height: 1200, // no fixed height but obtained dynamically
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no", // so no scroll bars inside fancybox
beforeShow : function(){
this.height = $(this.element).data("height");
}
});
I eventually want to create a photo gallery... clicking on a picture will launch a You Tube video. I am using fancybox 2.0.
I have the video opening up inline but I cannot control its dimensions. Could you please take a look at this page for me and see where I am fouling up.
http://www.bytebrothers.com/bb_tester/Video_lightbox_test.htm
Thank you,
darrell#bytebrothers.com
This is how your script looks like right now
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false,
type : 'swf'
})
and this is how it should look like
$(document).ready(function() {
$('.fancyYouTube').fancybox({
width : 400,
height : 300,
autoSize : false
});
});
you are missing some closing brackets.
On the other hand, if you are using fancybox-media, you don't need to specify type:'swf'
UPDATE: when targeting youtube videos in embed (youtube iframe mode) mode, add the class fancybox.iframe to your anchor so this
<a class="fancyYouTube" href="http://www.youtube.com/embed/dx6TZgUSquY">
should be this
<a class="fancyYouTube fancybox.iframe" href="http://www.youtube.com/embed/dx6TZgUSquY">
I am using FancyBox and I am having a slight problem.
I have a box, that is 930px wide where users can interact with things inside the popup.
The problem is, when a user in using a screen resolution that is, lets say 800x600, some of the items in the box do not display. The box has a fixed height and width (930x400).
I have tried to use scrolling: auto and scrolling: yes but nothing seems to work
Is there a way around this?
Thanks
UPDATE: - Included code snippet
$.fancybox({
"padding" : 3,
"type":"iframe",
"href":"/requirements/"+$(".sf_admin_form_field_id div.content").html()+"/edit?req_id="+$(this).children(".id").children("div").children("input").val(),
"width" : 934,
"height" : 391,
"overlayShow": true,
"overlayOpacity" : 0,
"scrolling" : "yes",
"onClosed" : function(){ window.location.reload();
}
Try
scrolling: 'auto' (note the quotes!)
and if this does not work can you include the fancybox initializer that you are using??