set max width and height in percentages of screen size for lightbox image - lightbox2

I am using Lightbox v2.51 by Lokesh Dhakar. Is there a way to set max height and width value according to users screen resolution? I want to have the images fill most of the screen area.
Thanks.

Related

Auto adjust windows application screen size according to screen resolution

I'm currently making an application which contains 1 window and many similar formatted page (width = 800, height = 450).
If I don't define the minwidth and minheight then the screen looks like this(below image) and If I define minwidth and minheight(1000,650) then the screen is not fitting to all screen resolutions(In small resolution laptops the screen is cutting).
How can I make the window fit to screen resolution with minimum of width and height as(70%,70%)of screen resolution.
I've tried using this.sizetocontent=SizeToContent.WidthAndHeight but no use.Can anyone please help me with this.
Thank you :)
Setting Screen size
Width =System.Windows.SystemParameters.PrimaryScreenWidth;
Height = System.Windows.SystemParameters.PrimaryScreenHeight;
setting 70% as min size
MinWidth=70* width / 100 ;
MinHeight=70* height / 100 ;

How to maintain scroll position on window resize while using scrollmagic

I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.
I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.
When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?
The issue is that when you resize the window, the position of the scroll bar remains fixed at an absolute number of pixels. However, because your content is based on view height, the height of the document changes dynamically as you resize the window. Thus, the window scroll position as a percentage of the document body height is also changing, and this is what ScrollMagic bases progress on.
To illustrate with simplified math:
A) Given a window height of 1000px, your document height will be 6vh * 1000px = 6000px tall. If your window scroll position is 1200px, you'll be 20% of the way through the overall ScrollMagic timeline.
B) If you resize the browser to 800px tall, that changes the document height to 6hv * 800px = 4800px tall. However the window scroll position will remain at 1200px, which is now 25% of the way through the ScrollMagic timeline.
The simplest solution is probably to keep your document a fixed height.

WPF Resize Image - Fixed with, sliding height

I have an image in WPF which I would like to enlarge to a fixed width (say 800px).
The image should stretch to this width using the original aspect ratio (so not as to distort) and the height should be scaled as necessary.
If the height is not too large for the container the top of the image should show at the top of the container. The image should then slide upwards until the bottom of the image reaches the bottom of the container via an animation (so at some point the whole image has been displayed).
Links or suggestions highly appreciated

SVG width in Opera Mobile not bigger than 800px

I have SVG with width set to 2048px and I want it display in Opera Mobile (with possibility to scroll horizontally if it is bigger than screen), but for some reason Opera is always displaying the SVG with width = 800px and scaling down the SVG. This happens only on a real device (Samsung Galaxy Tab 8.9 - resolution 1280x800). This happen also in horizontal mode - in which screen width is equal to 1280px so the SVG is even SMALLER than a screen. On the other hand on the Opera Mobile emulator it has the width set to 1280px (still no scroll but it's better).
I also tried to place SVG in div with some fixed sizes but without success - the size of div is correct but SVG is scaled down...
Are there any way to render a page with horizontal scrollbar? Or workaround the bug which causes the SVG in horizontal mode set to the width of shorter dimension?
You can check the example here: http://www.pax.ndl.pl/test/svg_temp.xhtml

LiveCode/RunRev how to adjust stack size according to display size

i am new livecode app developer and developing a mobile app which needs to be multiresolutional and
fit according to display size. but when i use the image background it displays white space if display stretches beyond image size
is there any facility In RunRev to adjust view size as relative layout in android does.
To set the rect of an image object to the rect of the window, you can use
set the rect of img "Your Image" to the rect of this cd
I'm not sure if this is sufficient. For multiple resolutions, usually I make multiple stacks. You might be able to do this:
set the rect of this stack to the screenRect
set the rect of img "Your Image" to the rect of this cd
Let me know if this solves the problem.
There's a few issues to consider here.
orientation
aspect ration
pixel density
Plan A
To handle all three of these cases with one image I would suggest a square image. Make it twice the size you need for a medium density device in the size you want to support then import it into LiveCode. Set the resizeQuality to "good" (if you set it to "best" it might be a little slow) then set the lockLoc of it to true. Now divide the width and height by 2 so you end up with an image that is displayed at half it's size. This will keep the quality reasonable on a high res display. Remember to keep anything important centered on the image because the top and sides will be cut off depending on the orientation and aspect ratio.
Next step is a resizeStack script to ensure the image is resized proportionally (this script assumes the image is square):
on resizeStack
lock screen
if the height of this card > the width of this card then
set the width of image "background" to the height of this card
set the height of image "background" to the height of this card
else
set the width of image "background" to the width of this card
set the height of image "background" to the width of this card
end if
set the loc of image "background" to the loc of this card
end resizeStack
Plan B
Use a repeating pattern and set the backPattern of the stack. Much lower memory use, however, much less flexible in terms of the type of background you can use.
When resizing fields or buttons don't forget to also change the textSize in your resizeStack handler as well.
Scaled:
put "1.25" into pScaleFactor
set the textSize of field "your field" to round(the textSize of field "your field" * pScaleFactor)
set the textHeight of field "your field" to round(the textHeight of field "your field" * pScaleFactor)
or
Exact:
if the height of this card > 640 then
set the textSize of field "your field" to "24"
set the textHeight of field "your field" to "26"
end if

Resources