Javascript zoom on hover without thumbnails - javascript

I am looking for a javascript zoom library, similar this
However, most ones out there require that you have thumbnails images for the unzoomed image which is a bit of an annoyance for me since I am only viewing 2-3 images per page and everything is preloaded.
Does anyone know of a similar library which would allow me to do this with a css scaled down version of my image rather than generating the thumnbails in the backend?
Thanks!

Yay for CSS3 transforms:
img.thumb {
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}

Related

Pre-loading a website title banner & adding it to Cache

Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.

Images are not scaling on Foundation

I have been playing around with the ZURB Foundation Framework on this site:
http://www.maxi-muth.de/test/zurb/
I used this Foundation Template: http://foundation.zurb.com/page-templates4/grid.html
It seems like it has problems with scaling the images.
By using Chrome everything is displayed fine.
In Firefox the images at the Landing Page are overlapping each others (/they are displayed in their original size (which is not happening in the original Foundation template)
Same is happening with the Foundation Thumbnails used here: http://www.maxi-muth.de/test/zurb/shortcodes
What do I need to do to get (back?) the automatic scaling?
I think it's no real solution (because still the original file size is used), but by adding a max-width of 100% to the images, they suit their parent.

Javascript zoom effect?

We got this assignment from school to reproduce this example (created in Flash) into plain Javascript, HTML and CSS (jquery/Mootools not alllowed). Now i got the grid right, but i can't figure out what function to use to zoom into all the images at once? What would be a solution? One that crossed my mind is onClick every image goes in to the real size and using Javascript to disable the toolbars and then using keyarrows to navigate? Or is there a simpler way?
http://www.simpleviewer.net/postcardviewer/app/
Javascript / jquery would be best way to do so
MojoZoom is a free JavaScript Image Zoom script that works by moving your mouse over an image to see an zoomed version of it.
It places a square to the right of the image with the magnified portion of the image.
In addition to adding the zoom effect to your image, it will also automatically link it to its high resolution version.
The developers also released a slightly modified version of the script called MojoMagnified. Both of these are independent scripts and do not require external JS libraries to work
refer http://www.nihilogic.dk/labs/mojozoom/
also refer 5 Amazing JavaScript Image Zoom Scripts

Rotate image clockwise or anticlockwise inside a div using javascript

HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.
I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.
I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.
try this: http://raphaeljs.com/image-rotation.html
uses canvas but also supports IE
If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:
http://jqueryrotate.com/
The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.
Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)
CSS3 supports rotation, but it isn't widely supported.
As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.
There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.
You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.
There will be some limitation about filesize and support in old browser and of course terrible performance..

Web: solution for image rotate and zoom

I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).

Categories

Resources