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.
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();
}
});
What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them.
I tried this javascript for it (totally new to JS)
$(window).scroll(function(){
if($this.scrollTop()>300)
{
$('.onfoot1').slideright();
}
function slideright(){
var a = getElementsByClassName('.onfoot1');
var stoppos = 100;
if (parseInt(a.style.left)< stoppos )
{
a.style.left = parseInt(a.style.left) + 3 + "px";
setTimeout(slideright , 1);
}
}
});
Markup
<div class="onfoot1"></div>
CSS
div.onfoot1{
content:url(../img/onfoot1.jpg);
left:0;
}
I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/
I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.
EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/
How Squarespace centered every image even though they have different dimensions varying between landscape and portrait images?
I've been trying different solutions all day and I can't seem to figure it out.
http://bryant-demo.squarespace.com
Take a look at their lightbox and the code for it. I tried emulating it, but I can't seem to replicate their results.
Don't know what they do, as i can see they get image dimensions and many other things as attributes... but here is simple method for centering, related to screen size, that's basic calculation which is applied in their case, too, i guess. Also, there are different css methods for centering...
screen_width=$(window).width();
screen_height=$(window).height();
img_width= $('#images img').eq(i).width();
img_height= $('#images img').eq(i).height();
//set to center
$('#images img').eq(i).css('margin-top',(screen_height-img_height)/2+'px');
$('#images img').eq(i).css('margin-left',(screen_width-img_width)/2+'px');
Demo: http://jsfiddle.net/dfwosy4m/
P.S. If you set images in some other container, not body, you just have to apply same calculation, for different element.
EDIT:
Actually, same method works, of course, no matter if container is bigger, or smaller than image... So, simple:image center = container center, and overflow:hidden for the rest.
function centralize() {
screen_width = $('.box').width();
screen_height = $('.box').height();
$('#images img').each(function(i) {
img_width = $(this).width();
img_height = $(this).height();
//set to center
$(this).css('margin-top', (screen_height - img_height) / 2 + 'px');
$(this).css('margin-left', (screen_width - img_width) / 2 + 'px');
});
}
centralize();
NEW DEMO:
http://jsfiddle.net/dfwosy4m/3/
P.S. Inspect elements on their page, and in my demo: you will see that same technique is used (hidden image parts will be shown by inspector)... Key is overflow:hidden for the fixed boxes, so... you should apply similar css to get desired effect.
I have a website that uses a parallax background, the background is 1200px long.
The issue is:
I have a page with indefinite height, the page get expanded dynamically to its content. So if a user press read more it expands without refresh, which ruin the parallax effect because the background reaches its end before the page finish.
The background is complex design image, it cannot be repeated and adding background-color to cover up the white space cant be done, but I wish I can keep the cool parallax effect!
My question:
Is it possible to make the parallax stop when it reaches a specific y-position, and freezes the background when scrolling beyond the specific y position? But also to be able to trigger on the parallax effect when scrolling back to the specific y-position and above?
If we assume background is moving at 0.1 speed, then the max height will be 1200/0.1 = 12000px.
If page reaches y-position = 12000px -> stop parallax effect and freeze image as is -> and if page return back to 1199px start parallax again
How to do this in Javascript? If possible in CSS would be great too.
Edit:
here is what I did before posting on Stackoverflow:
I used Stellar.js for the parallax effect, simply i added the following javascript:
$(window).stellar({responsive:false});
and added the following code to the tag (which hold the background-image):
<body data-stellar-background-ratio="0.1">
I also tried another approach, by using a custom JavaScript I found in the web:
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1261; //image height
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
in this case, it do scroll until the end of the background, But I can't figure out how to slow down the scroll speed of the background.
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.