I have an HTML page. There is a base64 encoded image in it. I am planning on writing a javascript to increase the size of the image and content on the page. So everything on the page will appear bigger. I am able to increase the font size but not sure about the embedded image.
If you have
<img id="myImage" src="" />
Then you can do it like this:
$('#myImage').attr({
width: 150, // new width
height: 150 // new height
});
Well, you can just adjust the css for that image or the attributes. Use either height or width, just not both so they scale properly.
Jquery:
$("img").css("width","150px");
I may be confused but don't all modern browsers support Ctrl + scroll to zoom?
With images referenced by URL, you can change height and width (either the HTML attributes or CSS styles) and the browser will resize the image. I imagine it will work the same with an embedded image.
This functionality is available in most modern browsers, and as such it is unnecessary to duplicate it using client-side scripts. Consider simply informing the user that most browsers have text size controls built in (so that they may use this tool on other sites as well).
Related
Ok, so I want to resize a number of images of varying size to 50% of their native size using the following JS:
onload="this.width>>=1;this.onload=null;
This works well in most browsers, except in Firefox whereby it appears to load in full size first before resizing after approximately a second.
What can I do to ensure that the image is resized as soon as the user sees the image?
If the native size of the images cannot be foreknown, then I would add some more attributes to my images. One way is this:
<img onload="this.width>>=1;this.onload=null;this.style.visibility='visible'" style="visibility:hidden">
You can play around with different css properties, like display:none or width:0 until Firefox does what you intend.
Another approach is to use background image instead. But I need more information about your situation to provide an answer with background-image property
I'm working on photo gallery. Using php to read files and pushing it to jquery on client machine to build image gallery. (works good)
I wanted to use php exif function to get thumbnails of images to make preview of photos
I cannot use php function since my hosting disabled exif module.
I found great library php library but i cannot start it to use as i want it to. I just cannot find good manual for this. (ill continue to work on this, because this work on test image)
i dont wont to use crop like functions (jquery or html) for this, since i dont want to download all images right from the start. I want only to load thumbnails and on click this will load the image itself.
Can anyone please help me with this?
Thank a lot!!!!
Alexei
alexela.biz
Did your host disable GD and image functions?
Try this block: http://davidwalsh.name/create-image-thumbnail-php
You'll have to download the image to the browser if you want to tranform it there. So just set the style of the image so the browser displays it as a thumb.
For example if your image is 460 x 460px then you could create a 100x100 px thumb by adding the following style to the img tag.
<img id="my_thumb" src="my/image/source460x460.jpg" style="height: 100px, width: 100px">
I guess your javascript would look something like -
var imageElement = document.getElementById('my_thumb');
Standards based browsers
imageElement.setAttribute('style', "height: 100px, width: 100px");
Dodgy IE browser
imageElement.style.setAttribute('cssText', "height: 100px, width: 100px");
and jquery
$('#my_thumb').attr('style') = "height: 100px, width: 100px";
I am trying to create a page where appropriate images to load are determined by javascript, based on browser size. For example:
<img src="image1.jpg" />
javascript would change it to:
<img src="image1_800px.jpg" />
and load the 800px wide image version.
Doing this is not a problem. Problem arises when i try to do the same for browsers without javascript. The basic idea would be to hide images initially and display them with a style in NOSCRIPT tag. So browsers that support javascript will change image urls and make those images visible and browsers that don't support javascript will simply unhide those images by css. The problem is that images with display:none are loaded by browsers. And adding image url into anything but the src attribute is not an option as such image would rely on javascript to set its src.
So are there any ideas if it's possible to make this work?
For instance: i could rewrite image src attributes on domready and hope that browsers don't manage to start loading images from old src, but would that be the case? If so - would it always be the case or would some browsers work differently?
I think what you're looking for is http://adaptive-images.com/ - it uses Javascript to determine image size, but also has a back-up option if the user does not have Javascript enabled that still provides the resized image (with caveats, read the docs).
Are there any differences in performance or load/caching behavior when displaying images in img tags vs divs with image backgrounds?
My example:
I have a site with many overlapping images, some of which I will need to load dynamically with javascript. One issue is that I need to anchor the images to the right of the element, so that I can do a nice wipe-to-right effect. Because of this I was using a div with background image positioned right. Couldn't figure out how to do this with img but since divs are working for me I didn't know if this would matter...
AFAIK, browsers cache images the same whether they're in a DIV or an IMG. In any case, I think this one of those cases where specific performance is defined as an implementation detail internal to each rendering engine (and possibly the browsers built around them). As such, it's both out of our control as designers/developers and subject to change from browser to browser and version to version. In other words, I wouldn't spend too much time worrying about it.
The main performance difference is using background images allows you to use CSS sprites. Having one image contain a large number of images from your page means the user only has to make one request instead of one for each image.
Another difference is with responsive layouts. If you have an element that is only shown at certain screen widths (ie, not on mobile phones), it will still load the image if it is specified in the html (using display:none for instance), but most all browsers now will NOT load the image if is a background-image specified in unused media query-CSS rules. A lot of early responsive layouts got criticized because they still used the same bandwidth as the full size sites.
It is also useful with such designs because you can easily specify different images for different screen sizes. "Retina" displays on tablets and even laptops now won't look their best without 2x res graphics. So... even if you don't do such things now, it is probably a good practice to get into, because you might find yourself needing it soon!
I think by using background-image attribute in the div, the page layout gets loaded first and image present in the divs loaded later after the dom is loaded. so by using background-image the html layout is loaded faster on the web browser.
The only difference I can conceive of it this:
You can't scale images as backgrounds, although you can for img tags. This would open a scenario where background images loaded faster becuase it forces you to have the correct native size as opposed to downloading the entire image and scaling it. However, the converse could be true: given that you didn't care about image quality so much, you could deliver smaller imgs to your page and scale them up.
I'd stick with whatever rendered cleaner (and more consistently -- IE/FF/Chrome/Safari/etc).
Technical differences yes, most notably you can set the width/height of an IMG tag and it will stretch the image, which can be useful in some situations.
The main thing you've got to keep in mind though is the context of the image within the HTML document. If the image is content, say an image in a gallery, I'd use a IMG tag. If it is just part of the interface I might use a div instead.
I have this code:
if (document.images)
{
preload_image = new Image(25,25);
preload_image.src="http://mydomain.com/image.gif";
}
First of all, will this work in all major browsers?
Secondly, do I need to specify the width and height like in the code?
Lastly, will this preload my images and cache them?
Thanks
It will work in all major browsers. You do not have to specify dimensions, just a source ('src'), as you do up there.
Here's an example where dimensions are not given, and it works just fine: http://www.yourhtmlsource.com/images/rollovers.html
Yes this will preload the image, and no you don't need to specify the size as new Image() should be enough.
The main point to take away from your code snippet is the actual .src assignment as this should cause most modern browsers to fetch the file even though it's not actively displayed on the page.
Hope this helps,
Chris
If you want the preloading to work on all browsers you need to use a positive height and width (the minimum being 1x1).
You can reset the size of the image later using css or img attributes.