I am trying to get the image zooming effect using JQuery.
I have only one image that is of higher resolution, When i click any part of that image, i want to get the zoomed view of that part.
For example, i have one computer monitor image.Now if i click the button of monitor on image, the button should get zoomed.
I tried using this
http://jaukia.github.io/zoomooz/ but it is zooming the whole element.
How can i do this? are there any JQuery plugins available?
Maybe this is more what you are looking for? http://www.jacklmoore.com/zoom/
For example, i have one computer monitor image.Now if i click the button of monitor on image,
the button should get zoomed.
This type of functionality cannot be obtained/achieved by using zoomooz plugin.It zoom the entire element in the container.
There are many plugins as per ur requirement:
1)http://www.jacklmoore.com/zoom/
2)http://plugins.jquery.com/tag/zoom/ multiple jquery plugins are here
3)http://www.elevateweb.co.uk/image-zoom
Try this jqzoom
But it zoom on hover
jQuery zoom plugins
zoom.js is also a good option. Here is the demo of that plugin.
If you are intrested in here is the source code
Related
I want to implement a zoom feature for my mobile website images. Every website I've seen does this by making the image full screen when clicked on, which then lets the user pinch and zoom.
My website has a non scalable view port so I can't just have them zoom in on the actual website, I need to bring up the image they pressed on.
Is there a javascript plug in for this or should I try implementing this myself somehow?
My way to do this is using this is using addClass and removeClass
https://jsfiddle.net/moongod101/5u775ges/
and a little bit of css transition
More better using ToggleClass.
If you want use nice effect add transition.
JQUERY
$(function () {
$('.small').click(function(){
$('.small').toggleClass('full');
$('body').toggleClass('dark')
})
);
DEMO
I need to copy multiple selected areas from multiple images, paste them on another div to build a new image ,crop it. And finally save it on server.
To achieve that I'm looking for a JQuery plugin that can perform select/Zoom/Copy/paste/crop on an image.
I already looked over the internet I found only some plugins like JCrop, but they can perform only crop on one image with no zoom...
Check this out: jwindowcrop plugin
With Iviewer jquery plugin you can do the extra work you need zoom and rotate images.
Iviewer is a jQuery UI based jQuery plugin that allows you to zoom in/out, rotate and move images in area by the mouse on your web page.
DEMO site here
I would like to get the effect of a zooming image when someone opens a new page. So each page should have it's own image that zooms in every time the page is opened. I have an example in this website: http://www.fashionclub70.be/ (Click the "light version").
If a user clicks on a menuitem the corresponding page is opened and the image zooms in. on this website it is done with Flash, but I would like to use only Javascript for this. I don't really have a working knowledge of Flash. Do you have some pointers for me so I can successfully implement this?
Thanks
Maarten
I guess the easiest solution would be to use something like this : http://sliderjs.org/. Basically, you would put an empty place holder and load your image to some invisible div element.
Then, kick off a transition effect with a callback bound to your image's onload event.
You could use a canvas and put a picture on it. Evertything you would need for this can be found here:
http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
Edit: If you want to use CSS3 you could use
#pix{width:200px;height:300px;transition: all 2s;}
#pic:hover{transform:scale(4) translate(100px,100px)}
This would make the div tagged with this id move to the right and become 4 times as large during a period of 2 seconds.
The :hover part is just an event that would make the transition tick. Guess you want to use :active instead.
If you take a quick look at the two links below, you'll see most people want to get rid of the outline around the area of a map on an image. I see this occurs on the MAC OS X platform, exclusively.
Removing outline on image map area
How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)
However, what I want to do is show the outline in multiple browsers and change it's color and width. I tried but to avail. I created a style for an id. Didn't work. I tried using a class and that didn't work. I set an inline style and that didn't work, either. And I attempted it on both the map and area tags, by the way.
As of now, I use a gif to "border" the area when clicked. But it would make things so much easier if I could take advantage of the built-in shape attribute to highlight the area clicked.
Thank you very much for any help.
This answer looks interesting:
Changing the colour/transparency of a div on rollover or using an imagemap
Links to here: http://davidlynch.org/js/maphilight/docs/demo_simple.html
Older versions of Internet Explorer do not respect CSS for the area outlines. You can solve this by blocking the default handing of the mousedown event. If using jquery, something like
$('area').bind('mousedown',function(e) {
e.preventDefault();
});
would take care of it for all image maps on the page.
Also take a look at my plugin: http://www.outsharked.com/imagemapster which will let you easily handle outline (and other) effects on mouseover and click events.
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.