Unslider on Image Hover - javascript

I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});

Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});

Related

Jquery thumbnail gallery changing all images

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);
$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.

some issues with mouseenter and mouseleave functions

I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....

jQuery Tools tabs auto rotate (done) and pause on hover (done) resume on mouseout NEED HELP!

I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj

How to Start/Stop jCarousel by external controls/events

For a current project i need to trigger the Start/Stop Event of the jCarousel Plugin.
carousel.stopAuto();
carousel.startAuto();
I'm not that JavaScript addicted to solve the problem myself. A short explaination what i'm trying to do:
The carousel is a fancy product slider and works already as i expected. But the point is the product-description should be available as a tooltip. So i have to stop the carousel if an tooltip is shown and to restart it after the tooltip is closed. FYI: The tooltip Plugin is Cluetip. Does anyone have any suggestions for me?
Found a solution. Use the following function as init callback for your carousel setup.
function initCarousel (carousel) {
jQuery('#cluetip').live('mouseover mouseout', function(event) {
// Disable default action
event.preventDefault();
// Stop carousel at mouseover
if (event.type == 'mouseover') {
carousel.stopAuto();
};
// Restart carousel at mouseout
if (event.type == 'mouseout') {
carousel.startAuto()
};
});
};
Try below code. It works fine for me :)
Ex :
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$(document).ready(function() {
$('#mycarousel').jcarousel({
initCallback: mycarousel_initCallback
});
});

jQuery function ignore class

I've got an interesting situation. I'm building a music page using an open source flash music player that degrades to html for mobile users. I've got everything working great except for one issue.. and that is that one of my Javascript functions is interfering, specifically an anchor color fade.
There are many hidden buttons involved in the player, but the play/pause button has a translucent anchor underneath it and code is forcing this to be shown when the buttons are hovered over.
I can't seem to get the syntax correct using the not function.. But I'll settle for anything that works!
Thank you!
HTML
<div class="sc-player">
Javascript
jQuery(function ($) {
$('a').not('div.sc-player').each(function () {
var $el = $(this),
orig = $el.css('color');
$el.hover(function () {
$el.stop().animate({ color: '#00B0D9' }, 400);
},function () {
$el.stop().animate({ color: orig }, 400);
});
});
});
In jQuery (make sure you've got the color animation plugin from jQ UI: http://jqueryui.com/demos/animate/):
jQuery(function ($) {
$('a.a').each(function () {
var $el = $(this),
orig = $el.css('color');
if ($el.parents('.sc-player').length!=0) return;
$el.hover(function () {
$el.stop().animate({ color: '#00B0D9' }, 400);
},function () {
$el.stop().animate({ color: orig }, 400);
});
});
});

Categories

Resources