Can a zoom image like effect be reproduced with jQuery + background-position animation?
something like this: http://www.sohtanaka.com/web-design/examples/image-zoom/
I mean, instead of animating image size (which sucks because browsers resize images horribly) - do a animation by setting a background image on a link, and animate the position and size of the link.
edit:
A idea is to use two images. For example:
two overlapped images, one 200 x 200 pixels, the other 400 x 400 pixels
only the 1st image is visible, the 2nd image is hidden behind the 1st, and resized to 200 x 200
the user hovers over it, then the first image enlarges to 400 x 400 and fades out simultaneously
the second image fades in and enlarged simultaneously to its original size (400 x 400)
Could this be achieved with jquery and how?
CSS
#div{
background: url('http://images.epilogue.net/users/sirgerg/phoenix_nebula.jpg') top no-repeat;
background-size: 10%;
height: 490px;
width: 490px;
}
JS
$('#div').hover(function (){
$(this).animate({
'background-size': '50%'
})
}, function (){
$(this).animate({
'background-size': '10%'
})
})
HTML
<div id="div"></div>
On JSFIDDLE
DESCRIPTION: works only on latest chrome
REFERENCE: Set size on background image with CSS?
You mean like this
$('div').hover(function() {
$(this).animate({
width: 400,
height: 400
})
}, function() {
$(this).animate({
width: 200,
height: 200
})
})
Check working example at http://jsfiddle.net/vm4wQ/
Related
I have some code that allows me to change the img src when I've scrolled from top < 120 px. But I need to change the image to another one when the browser is resized too.
So I should get, 1 image when I scroll down 120 px, 1 image if I already scrolled down 120px but I reduced size of browser to 850 pixels,
1 image if I'm at full top of browser, and another image if I reduce size of browser.
So far I can only change img src if I scroll 120px down, but how can I solve the browser size at the same time?
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 120) {
$('#logo').attr('src', 'http://www.kubographics.com/adiacens/images/logo1-black.svg');
$('#logo').css('margin-top', '10px');
}
else {
('#logo').attr('src', '');
$('#logo').css('margin-top', '0px');
}
});
Thanks for your help!
To change the img use css media query
#logo {
background: url("http://www.kubographics.com/adiacens/images/logo1-black.svg")
}
#media (max-width: 850px) {
background: url("http://www.kubographics.com/adiacens/images/logo2-black.svg")
}
When I resize a width of div using jQuery resizable, not getting the correct width.
Resizing width from 250px to 200px getting width in jQuery is 250px. But background color position is 200px. Again I resize from 200px to 150px getting value is 200px. Why I have getting starting width position. Please help me to get ending width position.
Please check my code and attached image below and correct me?
https://jsfiddle.net/duL8gu3b/17/
CSS
#profile #graph #bar1 #bar1_slider {
background: #1640c0;
width: 250px;
}
JS
$( "#graph .slider" ).resizable({
animateEasing: "easeOutBounce",
helper: "ui-resizable-helper",
animate: true,
handles: 'w',
maxWidth: 250,
grid: [ 50, 10 ] ,
stop: function( event, ui ) {
/*graph = ui["size"]["width"] / 50;
alert(graph);*/
var graph1 = $("#bar1_slider").width() / 50;
$.post("/graph", { graph1: graph1},
function (response) {
});
}
});
The problem is animation. Jquery returns width value before finishing animation so the width of element has not changed. You can return value after 1 second delay. Check this
animateDuration: 0
On a webpage, I have 5 image links, laid out like the 5 side of a dice. The 4 corners all come together in the middle, and the center image lays on top (it's going to be a "home" button).
I already managed to get the 4 corner images to stay together while remaining centered and scaling down with the window (as seen HERE), but the problem I'm having now is getting my top layer image to do the same thing.
<script>
$(window).resize(function () {
if ($(window).width()<=1346) {
$('.rowdiv').find('img').css({ 'width': '100%' });
}
else {
$('.rowdiv').find('img').css({ 'width': '673px' });
}
});
$(window).resize(function () {
if ($(window).width()<=1346) {
$('.rowdiv2').find('img').css({ 'width': '100%' });
}
else {
$('.rowdiv2').find('img').css({ 'width': '220px' });
}
});
</script>
Is the fact that I have 2 different resize functions negating my second one?
You can use CSS media queries to achieve this quite easily. For example:
.rowdiv img { width: 673px; }
.rowdiv2 img { width: 220px; }
#media (max-width: 1346px) {
.rowdiv img,
.rowdiv2 img { width: 100%; }
}
Please see this jsFiddle demo, or the full screen result.
Hoping to get some help on some javascript i'm getting stuck with.
Q1: JS RETURN TO IMAGE HEIGHT AND MARGIN
My layout is horizontal scroll of smaller images positioned in a grid, using different height percentages and margins to position.
When you click on any of the images they all expand to height:100% and margin:0 which clears all previous styles putting it into a simple large image layout.
My question is how do I add a function that when clicking on .image-container the height and margins returns to how it was originally set in the css
JS FIDDLE DEMO (click any center image)
// GALLERY 100% height
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': '?'},900)
.animate({'margin': '?'},900);
});
EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES
Right now my .image-container is set to a large width but with responsive images it's hard to find the correct width, is there a way to find this width and to make it grow along with the click grow of images (displayed above)
.image-container {
display:block;
width:3600px;
height: 75%;
float:left;
position:absolute;
top: 13%;
left: 120px;
z-index: -1;
}
Thanks for any help!
You need to store the original height in a variable.
Check out the updated fiddle
var originalheight;
// GALLERY 100% height
$('.image-container').click(function(){
originalheight = $('.image-container img').height();
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
//REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': originalheight},900)
.animate({'margin': '0'},900);
});
EDIT:
Sorry about the goof up in previous solution. I didn't notice I was using click twice unnecessarily.
Here's the updated solution with the updated fiddle.
var originalheight;
$('.image-container').click(function () {
if (!originalheight) originalheight = $('.image-container img').height();
if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
$('.image-container img').animate({
'height': '100%'
}, 900).animate({
'margin': '0'
}, 900);
} else { //REMOVE HEIGHT ?
$('.image-container img').animate({
'height': originalheight
}, 900).animate({
'margin': '0'
}, 900);
}
});
This is my idea, hope it'll work:
// Before animation
var heights = new Array();
var margins = new Array();
$('.image-container img').each(function(){
heights.push($(this).css('height'));
});
$('.image-container img').each(function(){
margins.push($(this).css('margin'));
});
//
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': heights[$(this).index()]},900)
.animate({'margin': margins[$(this).index()]},900);
});
First of all, I suggest you to use the focusout and blur event to undo changes, because the way you implement your 'click' event, the second part only will be considered (you erase the first click implementation doing so). the best thing, is to enlarge the image when clicked, and reinit it's size when you click away.
Try this :
// GALLERY 100% height
$('.image-container')
.bind('click', function(){
$('.image-container img').animate({height: '100%'},900)
.animate({margin: 0},900);
})
.bind('focusout blur', function(){
$('.image-container img').animate({height: ''},900)
.animate({margin: ''},900);
});
Or better, use classes in which you define the behaiviors on clicking, and on clicking again, for exemple :
<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>
$('.yourOriginalValues').click(function(){
$(this).switchClass( "yourOriginalValues", "clickimage", 900 );
});
$('.clickimage).click(function(){
$(this).switchClass( "clickimage", "yourOriginalValues", 900 );
});
ps. the switchClass method, is a jQuery UI functionality.
I need a <img> to have the smallest possible size without leaving any blank spaces inside a div and it needs to be centralized horizontally and vertically. The size of the image is variable.
So here is an example so you can understand it better:
http://jsfiddle.net/q2c9D/
More info: much like Mikel Ward did, I need the images to fill up the div, so that the background of it is not visible. I made the div background black so it was easier to tell that it is not filling up the div. But I need the images to be centered and to be the smallest size possible without being distorted while filling up the div.
Here is my go
I would set the width to 100%, and remove the height property altogether. This will prevent the image from being distorted
img{
width: 100%;
}
To center the element, I would use this plugin. It makes you do no work, other than to call the function
$("img").center()
Try adding min-width: 100% to the img. Here's an example. It may stretch the picture a little but at the size it is, may not be too noticeable. :)
This will center the image on the page:
img{
margin: 0 auto;
position: relative;
display: block;
}
Just wrap the images in a <div> to position them somewhere on the page.
The way i do it is set the width or height, but only 1 as 100%.
<img width="100%" src=""/>
So I was able to get it working the way I wanted using jQuery. With the following code:
function centerimg(){
$('img').each(function(){
var imgwidth = $(this).width();
var imgheight = $(this).height();
if (imgwidth > imgheight) {
$(this).css({
"height": "100%",
"width": "auto"
});
imgwidth = $(this).width();
$(this).css("margin-left", -.5 * imgwidth + 50 + "px");
} else if (imgheight > imgwidth) {
$(this).css({
"width": "100%",
"height": "auto"
});
imgheight = $(this).height();
$(this).css("margin-top", -.5 * imgheight + 50 + "px");
} else {
$(this).css({
"height": "100%",
"width": "100%"
})
}
})
};
window.onload = centerimg;<code>
The code gets the width and height of the image, so if the image is wider or taller it will properly set the smaller dimension to 100% and the larger one to auto. After that it gets the value of that last one again (since it was re sized with auto) and centers it. Also, if the image is a square it just sets both to 100%.
This way the image will ALWAYS fill up the div and be centered.
Thanks all. Hope this code helps others.