jquery responsive image crossfade transition - javascript

Does anyone knows how to transform this jQuery effect, instead of having fixed sized images, I need to set the size in percentage (width:100%; height:auto) so they can be responsive. Any ideas?
<script type="text/javascript">
$(function (){
$('img.fade').each(function (){
var $$ = $(this);
var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '');
$$.wrap('<span style="position: relative;"></span>')
.parent() // span elements
.prepend('<img>')
.find('img:first')
.attr('src', target);
$$.css({
'position' : 'absolute',
'left' : 0,
'top' : this.offsetTop
});
$$.hover(function () {
$$.stop().animate({
opacity: 0.2
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 350);
});
});
});
</script>

I think you mean that the background image isn't scaling.
You could use the css command "background-size" to solve this problem..
Values that could help you are "cover" or "contain":
http://www.w3schools.com/cssref/css3_pr_background-size.asp
var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '').css({ 'background-size': 'cover' });
If this is not working, you could read out the actual absolute width of your image an set it as background-size. But then you need an resize-event for when you're scaling the browser window..
I would recommend to use two pictures and show/hide the pictures instead of using a background-image for the hover.

Related

Hover (mouseleave) method not showing effects

I have a series of images which change their image when hovering on them and also a div animate (as an overlay) on the image during hover.
The code is as follow:
// hide overlays
$(".mini-shop .item .image a div").hide();
// toggle overlay and second image
$(".mini-shop .item .image").hover(
function() {
$img = $(this).find('a img');
$img.stop().hide();
var src = $img.attr('src');
$img.attr('src', $img.attr('data-csrc'));
$img.stop().fadeIn(300);
$img.attr('data-csrc', src);
$(this).find('a div').stop().animate({
'top': '80%'
}, 300).css('display', 'block');
},
function() {
$img = $(this).find('a img');
$img.stop().fadeOut(100);
var src = $img.attr('src');
$img.attr('src', $img.attr('data-csrc'));
$img.stop().fadeIn(300);
$img.attr('data-csrc', src);
$(this).find('a div').stop().animate({
'top': '100%'
}, 300).css('display', 'none');
}
);
my problem is, only the effects in the first function (mouseenter) work and in the mouseleave method the overlay disappears immediately and the fade effect does not work! What is the problem of this code?
I know this may be a bit of a hassle, but have you tried separating them into one mouseenter() function and the other a mouseleave()? I know the hover() is supposed to cover both, however, I see no errors in your code so I cannot propose much more than to do what I have said.

Using Javascript to center images and getting some funny behavior

Here is a link to the page I'm referring to:
http://ellen-paul.com/interiorpage3_new2.html
I am aware that images can be centered either by absolute positioning left 50% and giving a negative margin of half the image width -- or by using margin: auto; Neither of these solutions without Java works for me, because the image is not a fixed width...
So I've created a simple javascript image viewer, consisting of a main image and thumbnails. When a thumbnail is clicked the javascript replaces the main image with the image depicted in the thumbnail in this way:
$("#largeimage").attr('src','images/interiorcontents3/1.JPG');
To center the main image, I placed it in a div called "testcenter" which has auto margins.Since the images are not all the same width, the width of #testcenter is set by a javascript that detects the width of the main image and makes that variable the width of its parent div.
The code doesn't work the first time you click a thumbnail, but after you click through all of them a couple times, or click on one twice it properly centers the image -- it's very very glitchy. I'm learning Java as I go, so for all I know this could be the dumbest way of going about centering -- any suggestions?
Here is the java I wrote up -- you'll see some lines with ".zoomy" in them, these are for a magnifying glass script:
HTML
<div id="imagegallery">
<div id="testcenter">
<span id="hoverpad">
<span class="moreimages">more images</span>
<div id="thumbscolbg"></div>
<div id="thumbnailscol">
<img src="images/interiorcontents3/3_1.jpg" class="verticalthumbs" id="imgbutton1">
<img src="images/interiorcontents3/3_2.jpg" class="verticalthumbs" id="imgbutton2">
<img src="images/interiorcontents3/3_3.jpg" class="verticalthumbs" id="imgbutton3">
<img src="images/interiorcontents3/3_4.jpg" class="verticalthumbs" id="imgbutton4">
<br /><br />
</div>
</span>
<a href="images/interiorcontents3/2.JPG" class="zoom">
<img src="images/interiorcontents3/2.JPG" id="largeimage">
</a>
JAVASCRIPT
$("#imgbutton1").click(function () {
$("#largeimage").attr('src','images/interiorcontents3/1.JPG');
$("#imagegallery a").attr('href','images/interiorcontents3/1.JPG');
var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
$('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
zoomStart: function(){ $("#hoverpad").css({'display' : 'none'}); },
zoomStop: function(){ $("#hoverpad").css({'display' : 'block'}); } });
});
$("#imgbutton2").click(function () {
$("#largeimage").attr('src','images/interiorcontents3/2.JPG');
$("#imagegallery a").attr('href','images/interiorcontents3/2.JPG');
var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
$('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
zoomStart: function(){ $("#hoverpad").css({'display' : 'none'}); },
zoomStop: function(){ $("#hoverpad").css({'display' : 'block'}); } });
});
$("#imgbutton3").click(function () {
$("#largeimage").attr('src','images/interiorcontents3/3.JPG');
$("#imagegallery a").attr('href','images/interiorcontents3/3.JPG');
var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
$('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
zoomStart: function(){ $("#hoverpad").css({'display' : 'none'}); },
zoomStop: function(){ $("#hoverpad").css({'display' : 'block'}); } });
});
$("#imgbutton4").click(function () {
$("#largeimage").attr('src','images/interiorcontents3/4.JPG');
$("#imagegallery a").attr('href','images/interiorcontents3/4.JPG');
var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
$('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
zoomStart: function(){ $("#hoverpad").css({'display' : 'none'}); },
zoomStop: function(){ $("#hoverpad").css({'display' : 'block'}); } });
});
$(window).load(function(){
var imagewidth = $("#largeimage").width();
var textwidth = $(".projecttext").width();
$('#testcenter').width(imagewidth);
if ($('#largeimage').width() < 500) {
$('#bottomborder').width(textwidth);
$('#right').right(30);
} else {
$('#bottomborder').width(imagewidth);
$('.projecttext').width(imagewidth);
}
});
It works after a few times, because the browser has to download the image before it knows it size. After a few clicks, the image get cached and that's why it'll start working.
You should preload the big images at the beginning or if you do it onclick, wait until the image is there before you try to center it.
$('<img/>')[0].src = 'img_url.png' // <-- this would cache/preload your img
You can still use the %50 left positioning and then get image size and divide it by 2 and add margin left with .css. It's probably a good idea to add max-width to images as well so they wont be bigger than window size.
$('#imagediv').css('marginLeft',-( imagewith / 2));

JQuery animate .css() rather then using .anmiate()?

I want to aniamte the change of the margin-top of a div.
Normally I would so this as such:
$("#mydiv").animate({ marginTop: '+='+myvar}, 200);
But this always adds (or subtracts) the value. I want a way to simply aniamte the change in value.
For example: if the div starts of with a margin top of 100 and myvar value is 50 I want to animate the div so it shrinks back to 50. Likewise if the myvar value is 200 I want to animate the change so grows to 200.
I can achieve this somewhat but resetting the CSS, eg:
$("#mydiv").css("margin-top", "0px");
$("#mydiv").animate({ marginTop: '+='+myvar}, 200);
each time but that makes it a bit clunky.
Does anyone know of a may to achieve this?
(Ps: without using CSS transitions)
EDIT: Added my code below
$("#info1tab").click(function() {
$(".textbox").slideUp('200');
$("#info1").delay(300).slideDown('200');
var itemheight = $("#info1").css("height");
var itemheightint = parseInt(itemheight);
$("#photobox").animate({ marginTop: itemheightint }, 200);
});
$("#info2tab").click(function() {
$(".textbox").slideUp('200');
$("#info2").delay(300).slideDown('200');
var itemheight = $("#info2").css("height");
var itemheightint = parseInt(itemheight);
$("#photobox").animate({ marginTop: itemheightint }, 200);
});
what is wrong with $('#mydiv').animate({marginTop: myvar});?
http://jsfiddle.net/muVsE/
Create additional CSS classes that has the CSS properties you want and then do:
$("#mydiv").addClass("classname", 1000);
OR
$("#mydiv").removeClass("classname", 1000);
Try this code:
$("#mydiv").css("margin-top", "0px");
$("#mydiv").animate({ marginTop: topMargin+myvar}, 200);
I hope this helps JSFiddle
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
});
Or you can use this JSfiddle
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Or you can use this to expand one div and shrink other at the same time:
$('.cell')
.on('mouseenter', function(){
$(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow");
})
.on('mouseleave', function(){
$(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow");
});
Regards.

Last Div Flickering During jQuery Hover Animation

Here's my code: http://jsfiddle.net/ZspZT/
As you can see from the example, the fourth div block is flickering pretty badly, particularly on the hover-over effect, but also occasionally with the other divs as well.
Thanks in advance!
It appears that the easing function built into .animate is causing your percentage widths to add up to greater than 100%, causing the last sub-DIV to disappear. There are a few ways to solve this.
When I replace your percentage widths with fixed numerical widths, the problem vanishes. I used this in the code below (and your code had a LOT of redundancy to reduce):
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: 425
}, speed).siblings().stop().animate({
width: 25
}, speed);
}, function() {
$(this).siblings().andSelf().stop().animate({
width: 125
}, speed);
});
});
http://jsfiddle.net/mblase75/ZspZT/10/
Another possibility is to use percent widths that add up to 99% instead of 100%, and set a background color on the container DIV to hide the gap. Adding linear easing to the .animate method helps keep the total width from exceeding 100%:
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: '75%'
}, speed, 'linear').siblings().stop().animate({
width: '8%'
}, speed, 'linear');
}, function() {
$(this).siblings().andSelf().stop().animate({
width: '24.5%'
}, speed, 'linear');
});
});
#four-ways-slide-4,#four-ways-slider{background:#999999;}
http://jsfiddle.net/mblase75/ZspZT/9/
try using 'mouseenter' and 'mouseleave' rather than 'hover'. also you should assign variables rather than repeating divs
var one = $('#four-ways-slide-1');
var two = $('#four-ways-slide-2');
var three = $('#four-ways-slide-3');
var four = $('#four-ways-slide-4');
var all = $('.four-ways-slide');
thisIn = function(){
all.animate({width:'8%'},{duration: 450,queue:false});
};
thisOut = function(){
all.animate({width:'25%'},{duration: 450,queue:false});
};
one.mouseenter(function(){
thisIn();
$(this).animate({width:'76%'},{duration: 450,queue:false});
one.mouseleave(function(){
thisOut();
$(this).animate({width:'25%'},{duration: 450,queue:false});
});
});

javascript - position not being set properly on page load

I am creating a coverflow plugin but I have a slight problem when it first loads.
The size/styles of the images is set based on their position in the coverflow. When the page first loads the images all resize properly but they do not reposition themselves. If I them use the left and right navigation they work correctly.
I am not sure what is causing this. I thought it might be something to do with the variable that sets the starting position of the coverflow...
Here's my code:
<script type="text/javascript" src="/scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var coverflowPos = Math.round($('#coverflow img').length / 2)
$('#coverflow img').each( function(i) {
$(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
});
// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it
$('#moveLeft').click( function() {
if(coverflowPos > 1) {
coverflowPos = coverflowPos-1
}
testme();
});
$('#moveRight').click( function() {
if(coverflowPos < $("#coverflow img").length -1) {
coverflowPos = coverflowPos+1
}
testme();
});
function testme() {
$('#coverflow img').each( function(i) {
$(this).animate({
opacity: 1-(Math.abs(coverflowPos-i)*0.4),
width: 200-(Math.abs(coverflowPos-i)*50),
height: 128-(Math.abs(coverflowPos-i)*50)
}, {
duration: 500,
easing: 'easeInOutSine'
}).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
});
};
});
</script>
And here's a link to a jsfiddle:
http://jsfiddle.net/r8NqP/4/
Calling testme() at the end of the ready() function moves them into place. It does ease them in though, which looks a bit odd, could get rid of the ease in testme() by adding a doease parameter.
Check you fist each :
'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
I think U mean:
'z-index' : 100-(Math.abs(coverflowPos-i)),
'width' : 200-(Math.abs(coverflowPos-i)*50),
'height': 128-(Math.abs(coverflowPos-i)*50)
Linke In your testme() function ?!
After that, you can also add a "Hack", by executing testme(true); at the end of script.
And add, in your testme() function , a test parameter to set the duration at 0 or simply disable animate and replace by CSS().
But, it just a Hack.
200-(Math.abs(coverflowPos-i)*50) may be less than 0 -- e.g.,
200-(5-0)* 50= 200 - 250 = -50
And the negative width ends up not being applied, leaving the width at its original 200px value. The opacity gets set properly, so all you get is a huge blank space where the image is.
var width = 200-(Math.abs(coverflowPos-i)*50);
if ( width < 0 ) width = 0;
covers the init nicely.
I haven't bothered to check why it's okay once it's animated -- my guess is, that the images were already small, so it's not as noticeable.
The problem came from "Each index", that not correctly used to compute the Width and Height of the first image.
Try this :
$('#coverflow img').each( function(i) {
i++;
$(this).css({...
And remove the Blank.gif...
Here, you find my fork fiddle : http://jsfiddle.net/akarun/FQWQa/

Categories

Resources