jCarousel issue - Hover images opacity settings - javascript

So far I have got jCarousel to display, and load the images via a txt file,
What I want to do is show 4 images at a time, then when the user puts the mouse over 1 of the images the other 3 images to fade opacity, to 30%. Then if they move the mouse to the image next to it I want that image to be 100% opacity and the other 3 images 30% opacity.
So the image with the mouse over it will always be 100% opacity, and the others 30%, so it stands out. When the user moves the mouse out of the jCarousel box I want all images to show 100% opacity.
I'm using code similar to this
Thanks.
Edit
Sorry I should have added code before, here it is: http://pastebin.com/m54cd73d8
This is what I have so far nickrance.co.uk/jcarousel/dynamic_ajax.html
It kind of works, it fades the inactive images, but I think it needs a mouseout event to restore the opacity of all images when the mouse moves out of the jCarousel div.
Also, it seems to be only working for the first 4 images, and I have 10 images in the carousel, the others don't seem to do anything :s
New Current code:
So far
$(window).bind("load", function() {
var activeOpacity = 1.0,
inactiveOpacity = 0.3,
testOpacity = 0.3,
fadeTime = 50,
clickedClass = "selected",
thumbs = "#mycarousel li";
$(thumbs).fadeTo(1.0, activeOpacity);
$(thumbs).hover(
function(){
$(thumbs).fadeTo(fadeTime, inactiveOpacity);
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, activeOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs + '.' + clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});

You can add this code to yours and you will be fine:
$(".jcarousel-wrapper").on('mouseleave', function(){
$(thumbs).fadeTo(fadeTime, 1.0);
});
And your HTML must be something like this:
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul id="mycarousel">
<li>...
Then all images will fade opacity to 1 when mouse leave your carousel...

Related

Gradually fade top of elements only on scroll without fixed background

Not sure if this is even possible, but what I'm trying to do is fade content out as it reaches the header.
I've seen solutions such as this:
// fade content out at top of div before it reaches LD icon and nav
$('.content-block *').each(function (index, item) {
$(item).children().each(function (indexChild, child) {
var st = $(window).scrollTop() - $(child).offset().top + 115;
console.log('st: '+st);
$(child).css({ 'opacity': (1 - st / 1.1) }); // changing the / 1.1 supposedly changes the intensity of the effect
});
});
But this causes content blocks to fade out prematurely on mobile. For instance, the top of the content block will reach the top of the screen, so it fades out, yet the bottom is not visible yet, so they never get a chance to read all the content.
I'm trying to fade out gradually, as if we had a gradient PNG image overlay. However, I'm trying to find a solution that does not require a fixed background, as I'm trying to do this over a live video background.

CSS3 image slider, javascript navigation through slides not working?

I've been trying to adapt the following code to integrate with my CSS3 slider (animated and timed with keyframes) however as you can't use .animate in js when using css3 animations on the same element I either have to use one or the other.
JS I've adapted for my slider
The current js works in the sense that it navigates through the slides my only issue is that it doesn't 'slide' to each slide it jumps.
I'd really like to keep the slideshow as it is and just want to update my js so that the slide transition works. I'm not great with js so I've been finding it difficult to find a solution.
If anyone could give some advice or a solution to my problem it would be truly appreciated.
DEMO
JS
//grab the width and calculate left value
var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);
//if user clicked on prev button
$('#previous').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the last item and put it as first item
$("#carousel .video-list li:first").before($("#carousel .video-list li:last"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) - item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the first item and put it as last item
$("#carousel .video-list li:last").after($("#carousel .video-list li:first"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
I don't see why .animate is needed, because I have used
transition: left 1s ease;
in my CSS to achieve the same things, with a smoother animation than I got with jQuery. I tried deleting the:
//slide the item
$("#carousel .video-list").animate(...
for the left and right. I also added some text to the html divs so that you can see how it's moving better. Sorry that I couldn't get it working, but I really feel that "transition" is what you need to look into. Here's the fiddle :)
...
I think your simplest solution would be to ditch the whole CSS animate, and build your own carousel:
Consider a film strip, which is a bunch of pictures lined up next to each other. Now consider a paper with a box cut-out, the size of one picture. We put the strip behind the paper, and see only one image. If we move the strip, we can change which image we see.
The film strip will be a div with { display: inline-block; } property, containing each of the videos. The box cut-out will be a div with { overflow: hidden } property. To move the strip, we simply use $('#strip').css({'left': positionofstripleft - widthofbox }) in our javascript. And for the animation, a simple setInterval(Nextfunction, 65000) to do what clicking next would do every 65 seconds.
Finally, a CSS transition will make the movements actually animated.

javascript, changing image with animation

I have a page where in the center of the screen there is a div, and below there are a few links. Each link, when clicked, must show in the div a different image. When a link is clicked, the current image must move to the left of the screen and fade out, at the same time the new image must appear from the right with fading and place itself in the div. What I did until now is in the following script, called on each link with
OnClick=("changeImage('name')")
function changeImage(param){
var image = $("#div");
image.animate({"queue": true, opacity: 0.0, right: '650px'}, 1200);
image.attr('src', 'img/'+param+'.png');
}
At the moment the images changes before moving to the left. Then it disappears.
I'd like the first image to move, fade out and then the second to appear from right.
Can you help me?
Thank you
$("#div").click(function(){
var image = $(this);
var param = 'example';
image.animate({opacity: 0.0, right: '1000px'}, 1200).delay(100).animate({opacity: 1, right: '200px'}, 1200);
setTimeout(function(){ image.attr('src', 'img/'+param+'.png').css('right','-1000px'); },1200);
});
Fiddle: http://jsfiddle.net/nKpqU/
jQuery's effects queue only applies to just that: effects and animations. I also changed your onclick setup to bind the click event with jQuery's .click.

Fade in and out background images simultaneously

The problem is my background images are of different sizes and unpredictable, so using a CSS transition will animate the stretch, which looks ugly. Thus, I really need to do this with JS.
var images = [
"http://ns223506.ovh.net/rozne/e800637ee8c7de5cdaed8df8ea3635f1/wallpaper-2585508.jpg",
"http://ns223506.ovh.net/rozne/15382371cb0d5b9319f5f4469bbc4511/wallpaper-2585497.jpg"
];
var counter = 0;
setInterval(function () {
$(".bg").css('backgroundImage', 'url("' + images[counter] + '")');
$('<img>').attr('src', images[++counter]); // preload the next image
if (counter == images.length) counter = 0;
}, 2000);
http://jsfiddle.net/mVAvF/1/
What I want to do is fade in the new background-image whilst fading out the old. Any suggestions?
You cannot fade one background into another in the same element.
You'll have to add another element on top of or behind the current background, then either fade the new element in if it is on top or fade the old one out if the new one is behind.
I answered a similar question before that contains a jsFiddle:
jQuery background image rotation script - looking to modify

"fadeTo" seems to have a bug when I scroll through images too fast

I am slowly learning how to modify and write jQuery from scratch and have been trying to modify some pre-written code, which simply makes an image opacity: 1 and all other images in the same HTML element opacity: 0.2.
When I use fadeTo and I move across the images fast it will stop doing the animation and hang for a while until it fixes itself. Could anyone advise on this situation.
Sorry for being a bit vauge :)
Here is the code:
$(window).load(function(){
var spotlight = {
// the opacity of the "transparent" images - change it if you like
opacity : 0.2,
/*the vars bellow are for width and height of the images so we can make
the <li> same size */
imgWidth : $('#portfolio ul li').find('img').width(),
imgHeight : $('#portfolio ul li').find('img').height()
};
//set the width and height of the list items same as the images
$('#portfolio ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });
//when mouse over the list item...
$('#portfolio ul li').hover(function(){
//...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
$(this).find('img').addClass('active').fadeTo('fast', 1);
//get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array
$(this).siblings('li').find('img').fadeTo('fast', 0.2);
//when mouse leave...
}, function(){
//... find the image inside of the list item we just left and remove the active class
$(this).find('img').removeClass('active');
});
//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){
//find the images and change the opacity to 1 (fully visible)
$(this).find('img').fadeTo('fast', 1);
});
});
Use the hoverIntent plugin. It allows you to set a small configurable delay after which the hover is triggered and not just if you move your mouse over elements really fast.

Categories