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
Related
I have a simple question. I'm trying to use animation on a single page such as Page1. For example if I change the Label text and press a TextButton, I would like it to transition leftToRight. When I try to use the Pages.Page1.show(3,4,0,false,false), the updated label is shown with no transition effect. I've tried to go between 2 different pages and it does transition properly. Is there a way to do this with 1 page since I want to keep the same page elements but just update the text content and display the updated page with a transition effect.
You can not run page animation for the same page. But you can try something like that.
Just run animate method only for the updated object. For example;
var myLabel = new SMF.UI.Label({
top : "25%",
left : "15%",
height : "10%",
width : "70%",
text : "hello"
});
var myButton = new SMF.UI.TextButton({
top : "50%",
left : "15%",
height : "10%",
width : "70%",
text : "myButton",
onPressed : function () {
myLabel.alpha = 0;
myLabel.text = "world";
myLabel.animate({
property : "alpha",
endValue : 100,
motionEase : SMF.UI.MotionEase.plain,
duration : 3000,
onFinish : function () {
//do your action after finishing the animation
}
});
}
});
Add these two objects(myLabel, myButton) to your page.
When pressed to button, label's text changes, it becomes invisible with alpha = 0, and then it becomes visible again with animate method.
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
}
}
});
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.
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??
In the examples page when you search (CTRL+F) for image gallery and click the first image, there's this image gallery which you can browse with next/prev arrows. The animation between them is vertical -- the images fly vertically. How does one set them to fly horizontally?
In the help I found:
openMethod / closeMethod / nextMethod / prevMethod
Method from $.fancybox.transitions() that handles transition (you can
add custom effects there)
But I don't know where to go from here.
Also, this seems to be slightly related.
You can create your own custom transitions from here:
http://jsfiddle.net/xZBBS/
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
try this i am sure this will help