I try to put a image in a full screen, and also the image can be zoomable.
I use for the zoom this jquery plugin http://www.jacklmoore.com/wheelzoom/
and for the full full screen, all options described here
Full-screen responsive background image
In my tests, is possible make zoom into the image, but if resize the window, the image not resize and appear spaces between the borders.
I do not know if it's better to put the image in a div, and make this div fullscreen.
If you provide us the fiddle we could be able to do something else but one option seems to be changing the image size on windows resize:
$(window).resize(function() {
//in order to call the functions only when the resize is finished
//http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();
//setting your image dimensions
$('#yourImage').css('height', windowsHeight );
$('#yourImage').css('width', windowsWidtdh );
}
Related
Incorrect size: Here's what it looks like on load:
Correct size: Here's what it looks like on window resize:
PROJECT LINK Here is a reference link: https://wp.xingapps.win/
Instructions: Hover over "Shop Ejuice" black button in top navigation and you will see red boxes. These red boxes should match the height of the first image but arent.
Story: I have a problem where im trying to reduce the amount of image requests on a page. I have a grid of images. Instead of loading all the images which are all the same height and width I am just going to load the first image and than the other images will be a <div> that matches the first images height and width. I will then apply a CSS Sprite background images to these div's so they appear as normal images. This will reduce the amount of requests on the page by a lot!
Issue: My example code is working when i resize the browser - it will match the height of the source image perfectly. However on initial load the height and width are incorrect. For some reason a bit smaller than it should be. Not fixed until i resize the window. How do i fix this?
The code:
(function($){
/* Match Quad Menu Div Height to one image */
var imgContainer = $('.mad-hat-parent-menu .quadmenu-product-float'),
sourceImg = $('li#menu-item-15959 span.quadmenu-item-content');
function resizeDiv () {
imgContainer.height(sourceImg.width());
imgContainer.width(sourceImg.width());
}
$(window).on("load resize", function() { resizeDiv(); });
})(jQuery);
Note: (i am actually targetting the container of the first image instead of the image itself) Additionally this issue is hard to see if you are on a screen width smaller than 1650px.
Edit: Try to use the resizeDiv() when the user opens/hovers/clicks the menu, like:
Like:
$(".quadmenu-dropdown-toggle").on({
mouseenter: function (e) {
resizeDiv();
},
click: function(){
resizeDiv();
}
});
I have a slideshow on my home page that uses images in a landscape orientation. However, when the browser is resized, the images eventually get clipped. To prevent this, I want to swap the landscape-oriented images to square ones when the browser reaches a certain pixel width. But it must switch back when expanded again. How would I go about this?
jQuery provides this resize event, And you can use it like,
$(function() {
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
$('yourimage').attr('src', toAnotherSource);
// or you can do anything with the image here.
});
});
Here's the story...
I have an image that is of dimensions 1174px x 660px within a container of dimensions 1174px x 375px. The image's height is cutoff and only 375 pixels worth of the image's height is displayed as I set overflow hidden on the container.
I have created a JavaScript function that takes this image (1174x660) and vertically centers it in its container (1174x 375) so that the center of the image is at the center of the container.
function allFeaturesImagesResize () {
var allFeatures = function () {
var image = $('.all-features article img'),
container = $('.all-features article'),
container_height = container.height(),
image_height = image.height(),
container_center = .5 * container_height,
image_center = .5 * image_height,
center = (image_center - container_center);
image.css('position','relative').css('bottom', center);
}
$(function () {
$(window).resize(function () {
allFeatures();
}).resize();
});
}
I am using a $(document).ready(function() { //... }); wrapper around this function, however, whenever the page loads I can see the function doing its work of moving the image up to the center point. Is there any way to delay the pay load until after this repositioning is complete?
Keep in mind my site is fluid responsive which is why I need to dynamically position the images as I don't know the user's viewport beforehand dimensions (specifically the width).
Use load instead of ready event. $(window).load(function(){ ... your code } will tell that the code should be executed only after all images are loaded. ready event will be fired when the DOM is loaded even if the images are not finished loading
Note that you are selecting multiple images $('.all-features article img'). By doing images.height() it will only get the height of the first found image. The same for the line that select multiple container.
Your code should be translate into "For each image found do" : $('.all-features article img').each (function(){...});
Okay, so I've got an image in the body of my webpage.
If the user's window height is less than 800px (the height of the image), the image should be squashed into it (so that the user can see the whole height of the image).
If, on the other hand, the window height is greater than 800px, the image should be vertically centred.
Any tippers?
Thanks.
using jQuery you could do something like:
var win = $(window);
win.load(function() {
var image = $("#img");
if (image.height() > win.height()) {
image.height(win.height());
} else {
// assuming your image is positioned absolute
// you should measure its dimensions and then position it
// depends on the ways it should be centered... in the current window or the whole document?
}
});
win.resize(function() { /* do something */ });
should do the trick to just resize the image to the height of the window if the image is bigger the selector needs to be adapted for your image element of course...
EDIT: added resize callback
I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks
Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.