I have an image gallery which holds lots of inline-block containers (similar to a chess field). No when I use the browser zoom strg + mouse wheel the images get scaled so that I can see more or less depending on if I zoom out or zoom in.
My question now is how I can do this directly in jQuery (maybe with a slide) without using the browser zoom function?
Is there an easy way to do this or do I have to change all widths heights?
Regards
The first question would be how much do you want to zoom the images and how big they are. I'm asking because you will need to preload the images at their maximum resolution, could be slow with large images.
Assuming this is not an issue, what I would do is write my own function to animate both width and height; I think there is no more straightforward way.
Other than this, there are plenty of jQuery plugins out there: just Google them, I've found an interesting list on: http://www.tripwiremagazine.com/2011/10/jquery-image-zoom.html
Try also this, in compact form:
$('#image').mouseover(function()
{
$(this).animate({width: "300px", height: "300px"}, 'slow');
});
$('#image').mouseout(function()
{
$(this).animate({width: "200px", height: "200px"}, 'slow');
});
Related
I am using Html2Canvas to convert the contents of a div to an base64 string.
But, I am struggling to configure it correctly. It is producing different results for different results. My guess is that it's something to do with screen resolution.
Here is my code:
html2canvas(document.querySelector('#dpo_base_image'),
{
height: $('#dpo_base_image').height(),
width: $('#dpo_base_image').width(),
useCORS: true,
allowTaint: true,
}
).then(canvas => {
$('<input>').attr('type', 'hidden').attr('name', 'properties[_DataUrl]').attr('value', canvas.toDataURL()).appendTo('form');
});
Looking at the documentation I have a number of options as below:
Scale: The scale to use for rendering. Defaults to the browsers device pixel ratio.
width: The width of the canvas.
height: The height of the canvas.
windowWidth: Window width to use when rendering Element, which may affect things like Media queries.
windowHeight: Window height to use when rendering Element, which may affect things like Media queries.
There are more detailed here: https://html2canvas.hertzen.com/configuration
I am a back-end developer and don't have the knowledge of things like how screen sizes or resolutions could be affecting this.
Can anyone point me in the direction of consistently getting an image of 2000px wide and 2479px high?
I have tried putting those values in the width/height parameters but I still get different image results.
Thanks for any help.
I currently have a full screen hero image slideshow on the homepage of a site. I have an javascript effect which gets the scroll position and divides it by 1.5 then sets the image transformY position causing a parallex effect.
Here is the code I currently have:
$(window).on("load scroll resize", function () {
$("form:not(.blive_PageEdit) .hero-img .blive_Control img").css({ "margin-top": $(window).scrollTop() / 1.5 });
});
This works as I want, but I have noticed that performance is a major issue expecially on browsers which support asynchronous scrolling which causes a juddering effect.
What I want to know is if there is a better way to implement this? What would be perfect would be to have something like the following but I don't think this is possible with just CSS:
img {
transformY(calc(scrollTop / 1.5));
}
I have also looked at IntersectionObserver, but I am unsure this would achieve what I want to do.
Any thoughts would be helpful. Thanks
$('#dustingBrush').unbind('click').bind('click' , function () {
$(".section, window.parent.document").css({"cursor": "url("+localImagePath + data.brushPointer1+"),pointer"});
$(this).css("display" , "none");
});
The cursor image is coming from json but it is not reflecting when I am using the image of bigger size however it is working fine with smaller image.
Please suggest me the workaround for this.
Thanks ....
Please see limitation section in https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url
Firefox allows you to use 128×128px images. Larger images are ignored.
As per the article, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms
Workaround would be to hide the cursor and use a trailing div which contains the bigger image.
This will simulate the behaviour of a bigger cursor.
The sample CSS, html and jquery is given below.
CSS:
#replacePointer {
position: absolute;
cursor:none;
}
HTML:
<div id="replacePointer"><img src="http://www.w3schools.com/images/w3logotest2.png" /></div>
Jquery:
$(document).bind('mousemove', function(e){
$('#replacePointer').css({
left: e.pageX -10,
top: e.pageY -10
});
});
I am using jQuery Animate to create a Pan-Zoom effect on an image. Overall it works well with two exceptions.
First it starts the animation and seems to hit a wall then continue to zoom in. Is there a way to prevent this and make the motion one smooth motion.
Second is the motion is a bit jerky, especially at the end. Is there a way to smooth this out? I am using easing on the page if I should try adding some form of easing. (This was testing in Firefox and Chrome and both are jerky.)
Here is a jsFiddle of the animation.
Notes: I am using jQuery 1.8.3 and I could use CSS but sticking with jQuery for cross browser compatibility. (Majority of my users are on IE unfortunately.)
HTML
<div style="width:1140px; height:500px; overflow:hidden; text-align:center;">
<img id="pan-zoom" style="width:900px; height:600px; position:relative; top:-80px; left:0;" alt="European Bee-eaters" src="http://upload.wikimedia.org/wikipedia/commons/9/96/Pair_of_Merops_apiaster_feeding.jpg" />
</div>
JS
$(window).load(function() {
$('#pan-zoom').animate({
width: '2141px',
height: '1428px',
top: '-200px',
left: '-405px'
}, 8000, function() {
// Fade In Hidden DIV
});
});
If you speed up the animation, it will appear to be smoother. The slower the animation, the more noticeable any roughness of it will be.
Changing the easing to linear seemed to help as well. The slowness at end of the default easing (swing) makes the roughness of the animation very noticeable. The code below uses linear easing and is sped up twice as fast (as well changing the outer width to 900px, as #loxxy suggested), and it looked reasonably good.
$(window).load(function() {
$('#pan-zoom').animate({
width: '2141px',
height: '1428px',
top: '-200px',
left: '-405px'
}, 4000, 'linear', function() {
// Fade In Hidden DIV
});
});
Getting a large animation to be both smooth and slow may only be possible with hardware support like WebGL. Short of that, choose between smooth and slow, whichever is more important.
Change
<div style="width:1140px; ...
To
<div style="width:900px; ...
The idea is, that before zooming in, the image is scaled to fit the parent width, which is the effect you want to remove.
Updated fidde.
EDIT : Or position absolute, as commented.
Both problems would be resolved if you used the scale function of the css transform property. I think (it has been a long time since i've user jquery and did not follow up) that the jquery.animate function is not compatible with these. You should use a plugin or write one that does if you want to keep using jquery.
In your fiddle you use the left, top, width and height properties. This will be especially jerky in webkit.
Jquery transform plugin top google result:
http://ricostacruz.com/jquery.transit/
We are coding a rather simple Javascript (jQuery) image cropper & resizer. Basically, for now, only features needed are indeed crop and resize.
I have been checking a few jQuery plugins like JCrop etc. and it seems there's no plugins doing both things at same time. Lots of croppers OR resizer, but not the two features on a same "natural" image view at same time. By natural I mean that examples like this (bottom right) are not very nice visually for users :
http://jsfiddle.net/opherv/74Jep/33/
Although I guess this would be a possible way to go to have the two features at same time. Though you can see this example only zooms too currently and it is qualified as using "ugly hacks" by the author himself to do so :
function changeZoom(percent){
var minWidth=viewport.width();
var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
var newHeight= newWidth/orgRatio;
var oldSize=[img.width(),img.height()];
img.css({ width: newWidth+"px", height: newHeight+"px" });
adjustDimensions();
//ugly hack :(
if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
img.css({ left: dragcontainer.width()-img.width() +"px" });
}
if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
img.css({ top: dragcontainer.height()-img.height() +"px" });
}
}
We are rather looking for the possibilty to use a cropper frame/zone (as we see the most often on the web) + a zoom/de-zoom option on the image (handles on the border of the image for example)
Since we only need those two features we thought we would code this from scratch or almost as we don't want to add other javascript files/plugins which will be overkill anyway being packed with other features we will not need (at least for now).
The question is: is there a specific difficulty at trying to code the display of an image re-sizable by straightforward handles & croppable by a frame/zone selection (which would also be re-sizable on its own and draggable around so a user can fine tune which part of the image he wants)?
Are we definitely better separating the two features ?
Thanks a lot for your help.
Tried this plugin??
http://code.google.com/p/resize-crop/
It does both crop and resize