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
}
}
});
Related
So I have 100% of screen width header image at the top of the page and text element below the image. Below the text element I tried to make sticky navigation bar with this code:
$(function(){
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#stickyribbon').css({position: 'fixed', top: '0px'});
} else {
$('#stickyribbon').css({position: 'static', top: '0px'});
}
});
});
Problem is that sticky nav bar jumps to the top of the page already when I scroll down the height of the text element. So it totally ignores the header image. I have height auto for this image but it obviously does nothing.
Solved it by myself. Solution was to make div with no height and padding-bottom as percentage of header image's height to its width and put the image in that div.
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
According to every online resource, the Nav Bar height should be 44pts (88px on Retina screens).
Indeed, when I take a screenshot of my iPhone (see below), the Status bar's height is 20pts, and the NavBar's height is 44pts, but that's split into a 1pt white pixels, and 43 "blue" pixels:
When I develop my app and create a NavBar (standard), there is no "white" pixel between the StatusBar and the NavBar, so the NavBar's height is 43pts (and not 44pts). This makes the inner window 1pt higher:
My entire code is simply 5 lines (app.js):
var mainWindow = Titanium.UI.createWindow();
var innerWindow = Titanium.UI.createWindow({ title : "Settings" });
var navGroup = Titanium.UI.iPhone.createNavigationGroup({ window : innerWindow });
mainWindow.add(navGroup);
mainWindow.open();
Any ideas??
Maybe it'll help some one some day, if you add "top : 0" when creating the NavigationGroup, you'll get that extra pixel line :)
var navGroup = Titanium.UI.iPhone.createNavigationGroup({ top : 0, window : innerWindow });
Since iOS 6 you've got a 1 point shadow line under the navigation bar.
This may be the cause of you problem.
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">