i have a webpage with table and in it images,
i would like to add the option to increase/decrease image size, how could i do that?
Something like ctr+plus and ctr+ minus does.
This is what it is for now, http://www.ursic-ei.si/1.html
Thank you all for answers.
You can't increase image size - you display fixed size images.
Things you could do:
Have different sized copies of the same image and serve them selectively from the server when buttons pressed.
Serve a single larger image that will be auto scaled to fit dimensions of element. Then alter the size of that element in JavaScript button event handlers.
document.getElementById("myImgElement").width = 300;
document.getElementById("myImgElement").height= 300;
You need to have an image larger than what you are down scaling to. The browser will scale it automatically to fit in the smaller image element. Note that you will need an image sufficiently big to fit your maximum size. Then downscale using code above.
You can use javascript to change the css of the image. Use width and height attributes to set them in css. Other option is to use jQuery plugin something like http://www.visual-blast.com/javascript/jqzoom-jquery-plugin/ or http://www.webappers.com/2008/12/16/jquery-javascript-image-magnifier-under-gpl/ This is triggered on mouseover but you can change the action to trigger the event.
Related
Trying to simply display an image at it's full size, which is bigger then the screen width and height. I do not care because I am developing a page for pinch and pan. So, the image will be off the screen anyways, and I would like to use a bigger image for pinch and pan, and it keeps setting the width to screen width when I just want it to show at real height and width. I've tried absolute layout, relative, and stack, nothing works. Here's my current code:
<controls:GestureFrame x:Name="GestureFrameMain">
<Image x:Name="ImageMain"/>
</controls:GestureFrame>
and in the backend, I simply set the source:
ImageMain.Source = Xamarin.Forms.ImageSource.FromUri(new System.Uri(PageParametersImageZoom.Image.BigImageURL));
I can verify that the URL has an image that is much larger than the screen size, here's an example of an image that would come back:
http://www.stage.newser.com/image/1088966-0-20161020082458.jpeg
And as you can see it's much larger than the dimensions of the screen, however, when I set the source, the image appears to be at screen size. I've attached an image of the result on the page, which clearly shows the image being downsized by Xamarin.
EDIT the pinch and pan itself is not the problem. When I pinch/pan the image obviously gets larger and goes off screen. I am talking about the initial load of the page, I would like the image to show at its real size.
Looks like the only way I was able to do this was by using a AbsoluteLayout and specifying the widhrequest/heightrequest properties on the image.
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.
I draw some text on screen using ID3DXFont::DrawText. This text should be displayed the same regardless of screen resolution.
For example, if screen resolution is low, text wrapped and when it is higher text is not wrapped. How can I avoid such situation? I want text size to be connected to screen resolution so if resolution is lower I want the text to be relatively smaller so that no wrapping happens. Is there any way?
Thanks in advance
Below is a logical solution. It doesn't have any of the code or procedures needed to make work in direct X but having done something similar outside of DirectX I wanted to share the logic
Working on whatever default screen resolution you want set the font to be the size needed.
Find the percentage of the screen height the font size you chose takes up.
Then having stored that value when you go to render again, in the final version of the program, calculate the font size based on the screen size and the percentage
What I was working in had functions like GetTextHeight and properties on the font size to allow you to set the height (which in turn set the font size appropriately). So if can find anything similar to this in DirectX than this could be a route for you to take.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:
When the width of the brower is changed, the image's width or height is also changed dynamically, anyone knows how to do it?
And I found the image's max height of each rows is not the same.
Thank you very much.
I am sure Google's image application is a little more complicated than can be written in a single post, but you could mimic some of the effect with some clever use of jQuery. Here's a quick tutorial on a resizeable image grid using a slider -
Image resize tutorial
You would need to change the trigger from a slider to the resize event, but this has the basics you need.