Image resize script - javascript

I'm searching a javascript that can resize images similar to script thats available as a plugin in vBulletin CMS:
I want the script to be used in blogger blog so that all images i upload into a post are resized to a smaller res and on clicking the image should be displayed in original dimensions
Something of the sort getelementbyID("img").
are there any script providing this feature? Pls help me out
Thanks in advance.

Something like a lightbox, perhaps?
I know the specific interaction you're asking about, and personally, I've always found it really obnoxious.

If you don't want to use a server side script to automatically create a smaller version of the image that you would link to the larger version, I wouldn't recommend using JavaScript to resize an image either. I'd recommend setting the image's dimensions in CSS and then attaching a click handler with JS that showed the image in some sort of overlay (or just using HTML to link to the larger image file).

Related

How to make the image blurr while it is being loaded and after its fully loaded then make it sharp?

I am making a Project in which when someone opens it so the images should give them a blurr preview and after its fully loaded then show the iamge to user. For example - On Instagram, when we open the app it shows us the blurred image and after its loaded fully it shows us the clear image.
How to Implement that same feature using javascript or jquery?
You need to have a really low quality version of the image in your database (or if you embed it directly -> in your assets). Then you can load the smaller image and blur it using CSS blur().
When the fully sized image is loaded, you can hide the small image. To get some ideas on how to check for that, I found this stackoverflow thread: How to create a JavaScript callback for knowing when an image is loaded?
How does the above answer have a Green Tick but the link that is shared so not have. This does not look right to me and I am confused.

What's the best way to preload all types of images?

I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.
The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL

Image popup, without postback?

I am making my own photo album, and want to copy the functionality of a well known photo sharing site. What I am looking for is - how do they do this?
http://www.flickr.com/photos/cdotlister/6445556533/in/photostream/
That's a photo of mine. If you click the photo, you get an enlarged version. The initial one and the large one are the same file size, so, must be the same file. I think the smaller one is resized using html. (image height and width). And then the popup version is probably the actaul image size.
However, when the image is popped up - resize your window. It stays centred.
I'd like to replicate this... I assume it'd ajax? I'd like to know how I can have a click event on the image, display a popped up version of the same image.
Take a look at jQuery lightbox pluggin.
http://leandrovieira.com/projects/jquery/lightbox/

Is there a way to use JavaScript to crop & resize an image before displaying it?

I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...
Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?
Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..
You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.
However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.
Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.
Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
JS can't directly crop/resize an image, unless you're using a <canvas> tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.
But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.
Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.

fitting absolute div popup in screen

Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/

Categories