I'm looking to create a slider where one image fades in, then another fades in next to it, then the slide changes. Thus far I've tried using "wowslider" and "rhinoslider" and googled it extensively... however I cannot seem to find a slider tool where this can be accomplished. Every tool I've tried and read about allows for a fade in effect - but only for one image per slide - I need to fade in two images [one, then the other] then change slides.
How might this be accomplished? (either with an existing tool such as wowslider - or perhaps using pure code)
Any suggestions are GREATLY appreciated!
you could use http://getbootstrap.com/javascript/#carousel Bootstrap Carousel Plugin.
it has an event handler for between slide times:
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
// This event fires immediately when the slide instance method is invoked.
})
or
$('#myCarousel').on('slid.bs.carousel', function () {
// do something…
// This event is fired when the carousel has completed its slide transition.
})
you can use the second one and instead of //do something you can write your fade function. I mean by this: you put two images under each slide. after slide is complete, faceOut the first shown image and fadeIn the second hidden image.
Related
I have a website that is using bootstrap 3 and is doing an collapse panel when images are clicked. I have code in place that watches for the 'show' event that will 'hide' all panels. The issue im having is that the transition animation is not waiting for eachother to be completed resulting in some weird animation happening. example page is here ( http://urbantimber.ca/newsite/product-flooring.html).
my function looks like:
$(function () {
var active = true;
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
});
I have also tried to negate the transition by setting the speed to 0.001s but the blip still shows.
looking for any ideas on how to watch that the animation is completed before the show event is finished. im thinking it needs to be a click event that happens before the show even starts but im not sure how to go about this. any ideas or comments are greatly appreciated.
I'm wondering if you're not better off just creating your own implementation. You're not really using any of the 'accordion' like functionality. Perhaps it would be easier to just have a click event handler attached to each of your images that checks if the details panel is displayed, if not, you would just display it using jquery show method. If it is displayed already, you could just replace the panel html with the item's details. (btw, nice looking site).
Once the carousel has slid, I want to add a value to an input outside of the ID myCarousel.
The function to implement an event once the carousel has slid is this:
$('#myCarousel').bind('slid', function() {
$('input[name=linkOnly]').val('Test')
}
I want to fire an event once a particular slide slides. I've tried something like $('#myCarousel li[data-slide-to=1]').bind('slid', function() ... but it doesn't register.
Any help appreciated, thanks.
You could just setup an event handler on the appropriate event and then choose to do anything based on which slide is .current. For example, to trigger some javascript when slide 1 cycles in:
$(document).on("slid", function(event) {
if ($(event.target).find(".active").data("slide-to") == 1) {
// do stuff
}
});
From a quick test, this doesn't seem to work unless it attached to an element above the carousel (you'd also need to change things a little if you had more than one carousel).
EDIT: After a quick look, the reason the above doesn't work if bound to the carousel itself is that the active class isn't added until immediately after the slid event is triggered (it seems that if the handler is added to a parent element, the active class gets added while the slid event bubbles up). You can get around this by using setTimeout to delay the triggered behaviour (works even with a timeout of 0):
$("#myCarousel").on("slid", function(event) {
var carousel = $(event.target);
setTimeout(function() {
if (carousel.find(".carousel-indicators .active").data("slide-to") === 1) {
// do stuff
}
}, 0);
});
Whether the extra code is worth it is up to you, although it may be a little more stable. It may even be worth putting in a small delay (instead of 0), just to make sure that things do work the way you expect them to.
So I've got a little problem (similar to this one I posted the other day: http://bit.ly/11JpbdY) with using SlabText on a piece of content that is hidden on load. This time, I'm trying to get slabText to update the display of some content that is in a slider (using Twitter Bootstrap's Carousel plugin).
Following Twitter's documentation (http://twitter.github.com/bootstrap/javascript.html#carousel) for Bootstrap's Carousel plugin, I'm trying to use slide event so that I re-call SlabText to make it display correctly.
Using developer tools I can see that Carousel adds a .next class as it processes the slide of one .item element to the next. This is then removed before the .active class is transferred.
I can access the "slide" event without any issue, but trying to get hold of the .next element is proving troublesome. Here is a JSFiddle of my code thus far: http://jsfiddle.net/peHDQ/
To put my question simply; how should I correctly use the slide event to trigger a function?
Please let me know if any additional information would be useful.
Further notes:
As I've been unable to get hold of the .next class, I'm attempting to do this with some jQuery. Here is my code thus far:
$('.carousel').carousel({
interval: 5000
}).on('slide', function (e) {
$(this).find('.active').next().find('.slab').slabText();
});
From what I understand this should be grabbing each .slab element and triggering the SlabText plugin.... alas I get an error:
"Uncaught TypeError: Object [object Object] has no method 'slabtext' "
Can anyone advise what I am doing wrong here...? I've used the exact same process to add a class and it works fine (as per this JSFiddle: http://jsfiddle.net/peHDQ/2/)
I identified the problem. The issue is that the event 'slide' is called before the next slide is made visible. I added a little delay, and it works fine now. Try this:
$('.carousel').carousel({
interval: 5000
}).on('slide', function (e) {
var xx = $(this);
setTimeout(function() {
xx.find('.active').next().find('.slab').slabText();
} , 0);
});
Per the documentation you should be using Slid not Slide
https://getbootstrap.com/docs/4.3/components/carousel/#events
Event Type: slid.bs.carousel
This event is fired when the carousel has completed its slide transition.
$("#" + id).hide(2000);
I have a div I'm trying to hide thusly, but doesn't seem to be doing the animation properly.
Just disappears.
Based on your comments, my guess is that your code is deleting it right after the animation STARTED. The animation is an asychronous process. Your code will continue to run right after the animation is started. If you are then removing the object after the call to hide(), then you will be removing it before the animation has completed and it will "just disappear" rather than fade out slowly.
To fix that, you will need a completion event on the animation and you will need to remove it upon completion.
You will need something like this:
$("#" + id).hide(2000, function() {
// remove it from the page here upon completion of the animation
});
Just to show people that the .hide(2000) function works just fine, here's a working example: http://jsfiddle.net/jfriend00/XDQwU/.
I have a jQuery tooltip plugin that displays a tooltip when I hover over a anchor tag.
I have modified my jCarousel so that my images are contained in anchor tags. When I hover over the first batch of images the tooltip hover function gets called. However, when the next batch of images come into view, the tooltip function does not get called again.
I have created a basic example of my issue here: http://jsfiddle.net/QAFZX/3/
I have tried using the itemVisibleInCallback callback but that doesn't allow my function to fire on all visible images.
You made a function that requires a parameter, and when you called the function, you didn't bring the parameter!
itemLastInCallback: {
onAfterAnimation: afterAnimationLastInCallback($(this))
}
instead of:
itemLastInCallback: {
onAfterAnimation: afterAnimationLastInCallback
}
Fixed it for you, click here
I managed to fix this issue by using a different javascript tooltip. So that on mouseover and mouseout elements on my image would either show or hide the tooltip.