image gallery /slide with zoom - javascript

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.

Related

Change Image when Browser Window is Resized

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.
});
});

how to determine finished scrolling position of element in responsive parallax site with javascript

I have a parallax web page with a series of modules that contain a large photo and a smaller text box that overlays the photo and sits absolutely positioned at the bottom of it. While the size of the photos change, the text box is consistently 340px. Initially, when the site scrolls, the text box is hidden (I am doing a translateY(340px) and hiding the overflow on the container).
I know how to determine when to start revealing the box:
window.addEventListener('scroll', self.monitorScroll, false);
var moduleOffset = Math.floor($el.offset().top);
var moduleTriggerPos = moduleOffset - self.windowHalfHeight; //trigger animation when module is halfway up the screen
self.monitorScroll = function(){
self.yPos = window.pageYOffset;
if (self.yPos > thisObject.triggerPos){
//BEGIN ANIMATION
}
}
but I don't know how to tell the object how much to move each time the listener is triggered. The number of times it is called seems to be based on how fast you scroll, and the amount I would need to move the object differs, as the container resizes with the browser (the narrower the browser, the smaller the photo becomes).
I am currently using a static amount to move the object:
if (newPos >= 0){ //if our object hasn't reached a translateY(0px) value
thisObject.curPos = 320 //starts at 320, the amount it has been translated by in order to hide it
var newPos = thisObject.curPos - 25; //the amount we move it each time
thisObject.textEl.css({ translate: [0,newPos] }); //move it by 25px
thisObject.curPos = newPos; //update the current position
}
How do I get more accurate determination of how much to move the item by, rather than using a static movement amount. I want it to be based on the percentage of the way I've scrolled toward the module's final reveal position, which would ideally be when the module was fully at the top of the screen at full browser width (max width of 1200px), or some percentage thereof if they had resized the browser smaller.
I don't need exact code, but more just a conceptual understanding of what I should be monitoring / calculating to determine the correct positioning. Thanks!
I figured this out. For various reasons I made the trigger point for the CSS animation start when it first appears on screen rather than halfway up, then used this code:
var scrollProgress = (((self.windowHeight+self.yPos)-thisObject.offset)/thisObject.height);
var scrollAmt = scrollProgress*self.moduleTextHeight;
var translateAmt = -scrollAmt;
if (scrollAmt <= self.moduleTextHeight){
thisObject.textEl.css({ translate: [0,translateAmt] });
} else {
thisObject.textEl.css({ translate: [0,-self.moduleTextHeight] });
}

Is possible to make a fullscreen image zoomable?

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 );
}

How to know when an element will be off screen?

I am writing a simple script that displays a dialog box when a user hovers over a profile picture. It dynamically determines the profile pics location on the page and then places itself to the left of it and about 100px above it. This part is working fine.
My issue arises when a profile pic is at the top of the screen and a user mouses over it. The dialog will appear but the top portion of it will be above the fold (i.e. not in the current browser window). Naturally this is not good usability and I would like it to appear on the screen.
My question is how do I know when a dialog will be off screen so I can recalculate its position on the page?
I saw this question which seems like the same as mine but unfortunately no actual solution was provided other then to link to a jQuery plugin. I am using Prototype.
Prototype already provides positions with Element.viewportOffset().
Edit, as Mathew points out document.viewport gives the rest of the information. For example,
var dialogtop = dialog.viewportOffset().top;
if (dialogtop < 0) {
// above top of screen
}
elseif (dialogtop + dialog.getHeight > document.viewport.getHeight()) {
// below bottom of screen
}
You'll want to find the profile pic's position relative to the document (here's a good article on how, though I suspect Prototype's Element.Offset already handles this), then compare it to the body's scrollTop property to see if it's close enough to the top that it needs to have its dialog repositioned.
I am familiar with this problem, however, last time I was able to use a library (Seadragon) to get the screen dimensions and mouse position. I was also working with a fixed size overlay so no code to share with you other than general approach.
For my pop up box I decided to use the event mouse position rather than location of the div on the page. I then compared the mouse position to the known screen size, which I determined on start or resize.
From How do I get the size of the browser window using Prototype.js?
var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal
var width = viewport.width; // Usable window width
var height = viewport.height; // Usable window height
In Prototype you can also get the mouse coordinates:
function getcords(e){
mouseX = Event.pointerX(e);
mouseY = Event.pointerY(e);
//for testing put the mouse cords in a div for testing purposes
$('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY;
}
Source : http://remorse.nl/2008/06/mouse_coordinates_with_prototype/

image slide gallery with jquery

I'm try to create a sliding banner with jquery here.
I tried to code in this manner
.post(this,{ajax : 1}, function(data){
var oldImage = $('div.banner > img');
var newImage = $(data).insertAfter(oldImage).css('position','absolute').css('left',800);
newImage.load(function(){
oldImage.animate({left:-800},'medium',function(){}); newImage.animate({left:0},'medium',function(){
oldImage.remove();
});
});
});
return false;
However, the transition between the 2 images is not smooth, and there seem to have
a little gap between the 2 image when the old image slide away, and the new image
slide in. I assume is because there is a lag between the execution of image.
Do you guys have any tips on how I can better do this?
What you have should work alright. The perceived lag is probably the image not actually being 800px wide. Since you're animating 800px left and 800px right for the new/old image, if they aren't actually that wide, there'll be a gap in there.
You can either use the slide effect for this, or adjust the left amounts to be the correct size for the images, e.g. via .width().
For the gap "lag" and the width, you can see what I mean here. There's a large gap, but only because the left property of 800px is larger than the 275px image in the example.

Categories

Resources