I'm using carouFredSel to create multiple carousels on the same page. If you look at this JSFiddle you will see that there are two carousels, but only one is able to be scrolled with the next / prev buttons.
Without adding a class or ID, I am trying to tell the buttons to only scroll the corresponding carousel. I believe this be accomplished with a function, but I'm not entirely sure how. Something like this:
prev: {
button: function() {
$(this).next('.prev');
}
},
Give this a look, it's right in the documentation:
prev: {
button: function() {
return $(this).parent().siblings(".prev");
}
},
next: {
button: function() {
return $(this).parent().siblings(".next");
}
}
Working JSFiddle demo
oh and notice, I took out the key, because then you would have to have the carousels synchronized... and you can have one or the other, not both. (unless you conditionally assigned keys, but there goes your small code)
--
http://caroufredsel.frebsite.nl/code-examples/configuration.php
search: "Get the HTML-elements for the buttons and the container dynamically"
I think thats better set an ID.
$("#list1").carouFredSel({
direction: "up",
auto : false,
items: 3,
prev : "#prev1",
next : "#next1"
});
$("#list2").carouFredSel({
direction: "up",
auto : false,
items: 3,
prev : "#prev2",
next : "#next2"
});
See a working demo.
may be this one is usefull for you.in my page its workin good.
prev: {
button : ".prev"
},
next: {
button : ".next"
},
Related
I have a simple accordion working, except for one thing. I would like to be able to re-click the same accordion item again, and be able to set height to '0'.
Currently, the open accordion item closes when I click a different accordion item, which is exactly what I want to do — but I also want the ability to re-click the open accordion item and have that one close, when clicked. See working example below:
https://codepen.io/celli/pen/BaNLJWb
// set heights to 0
gsap.set('.content', {
height: 0
});
// click function
$('.accordianItem').click(function() {
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {
duration: .25,
height: 0
});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {
duration: .25,
height: "auto"
});
$(this).addClass('on');
});
What code can I add to add this extra functionality?
I have modified your code by adding another if that checks if the element clicked has 'on' class already. It should now work as you intended it to (hide when the user clicks on the already opened header).
// set heights to 0
gsap.set('.content', {height:0});
// click function
$('.accordianItem').click(function() {
if($(this).hasClass("on")){
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
else{
if ($('.accordianItem').hasClass('on')) {
gsap.to($('.content'), {duration:.25, height:0});
$('.accordianItem').removeClass('on');
}
gsap.to($(this).children('.content'), {duration:.25, height:"auto"});
$(this).addClass('on');
}
});
You can do this much more simply than how you're currently doing it:
// Create the animation that you need
const tl = gsap.timeline({paused: true});
tl.to('.content', {duration: 0.25, height:0});
// Set the timeline to its end state
tl.progress(1);
// Toggle the timeline's direction
$('.accordianItem').click(function() {
tl.reversed() ? tl.play() : tl.reverse();
});
Demo
I highly recommend checking out the GreenSock forums. They're super useful and you can get quick help from people who are experts in GSAP and web animation :)
I'm trying to make a cycle div. The wanted final effect is : being able to click on div1 to see div 2. Being able to click div 2 to see div 1 again. Being able to also do this with only keyboard ==> this is done and working.
But the second part of my goal is giving my problems.
Basically I want this : when I hover div1, the slide go to div2. But it has to stop sliding immediately. It must go back to div 1 when the hover is ended.
Here is what I tried but doesnt work :
$(document).ready(function() {
$('#s1').cycle({
fx: 'slideY',
speed: 300,
next: '#s1',
timeout: 0,
after: function (curr, next) {
$(next).find('.goto').focus();
}
});
var cycleConfigured = false;
$('#s1').hover(
function() {
if(cycleConfigured)
$(this).cycle('resume');
else
{
$(this).cycle({
fx: 'fade',
speed: 600,
timeout: 300,
slideResize: false,
pause: 0,
after: function() {
$(this).cycle('pause');
}
});
cycleConfigured = true;
}
},
function(){
$(this).cycle('pause');
}
).trigger('hover');
});
jsfiddle http://jsfiddle.net/gy8p5ewv/3/
basically as you can see, when I hover the div, it starts sliding and I cant stop it.
To sump up, here is the wanted effect I cant reach :
on hover container div > go div 2 permanently
on leaving hover container div > go back to div 1 permanently
documentation : http://jquery.malsup.com/cycle/options.html
Instead of getting it complicated, just replace the hover callback with a trigger like this :
$('#s1').hover(function () {
// Trigger a click.
$('#Goto2').click();
});
Working fiddle
When we hover on #s1 we want the div to behave as if #Goto2 was clicked, and switch the slides.
I am using raty to perform the rating functionality and I am showing it inside a popover.
The problem is that the first time I click on the link, it correctly create the stars but, when I click for the second time, the stars are replicated, so it popups 10 stars instead of 5.
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
I replicate the error in this fiddle.
Can anyone let me know how to fix this, and, therefore, only show 5 stars?
Thanks!!!!
I am not overly familiar with raty, but it seems like you need to destroy the existing before running the code a second, or third time.
$(this).raty('destroy');
something like that, check the raty doc for the exact implimentation
please review this code
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty('destroy');
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
Demo :http://jsfiddle.net/x9WhH/3/
I have a page with a slider showing posts from a category. When the user clicks "next category", the content goes left and the new content is loaded along with it's slider.
This .load() is making a request to the same page, with different parameters (don't really know if this is relevant to the question).
Problem is, the loaded slider doesn't work. You can see it here, click on the top right arrow and you'll see my problem.
This is the script I'm using:
function carousels(){
if ($("#projectos-carousel").length) {
$("#projectos-carousel").carouFredSel({
items: { visible: 5 },
circular: false,
infinite: false,
auto: false,
prev: { button : "#prev-proj" },
next: { button : "#next-proj" },
pagination : "#pager-proj",
});
}
}
...
$('.right-trigger').click(function () {
var toLoad = $(this).attr('href')+' #container';
$('#container').attr('id','to-go');
$('#to-go').css({'position': 'absolute'});
$('#wrapper').append('<div id="newcontainer"/>');
$('#newcontainer').load(toLoad, function () {
$('#newcontainer').append($('#container').children()).css({'position': 'absolute', 'left': '942px'});
$('#to-go, #newcontainer').animate({left:'-=937'},600, function () {
$('#to-go').remove();
});
$('#container').remove();
$('#newcontainer').attr('id','container');
searchform();
triggers();
carousels();
});
return false;
});
searchform() and triggers() functions work but not carousels(). I've already tried using setTimeout(); with carousels() in the last part of the code but it only works on this example, not where I really want to.
Thank you for your time!
It appears to work for me. One problem that I see in your code that will manifest itself as a bug in Internet Explorer is that you have a trailing comma on this line:
pagination : "#pager-proj",
Removing the comma may fix everything for you. Additionally, I would suggest wrapping all of your object properties in single or double quotes. For example, the previous line would become:
"pagination": "#pager-proj"
I am using the jquery cycle plugin with a custom animation. It is working great!
However, I would like the slides to advance to the right or left depending upon the index#, i.e. if the user clicks on link 1 while slide #3 is the active slide the animation will transition out to the right, while if link 4 was clicked on the slide would transition to the left.
The functionality I'm looking for is the same as the scrollHorz/scrollVert transitions.
I understand that what I need is some logic to relate the current frame and the next frame: if (frameclicked on is a higher index than the current slide) {animate to the left} else {animate to the right}
I just don't know where to put it in the code. I hope that makes sense. Any help would be greatly appreciated! Thanks!
Not that it probably helps, but my custom code is below.
$('#s4').before('<div id="nav" class="nav">').cycle({
fx: 'custom',
cssBefore:{
left:1000,
opacity:0,
display:'block'
},
animIn:{
left:0,
opacity:100
},
animOut:{
left:-1000,
opacity:0
},
cssAfter:{
display:'none'
},
speed: 'slow',
easeIn: 'easeInExpo',
easeOut: 'easeInExpo',
next: '.nextnav',
prev: '.previous',
timeout: 0,
containerResize: 1,
fit: 0,
height: 600,
pager: '#slideshow-nav',
pagerAnchorBuilder: function(idx, slide) {
return '#slideshow-nav li:eq(' + (idx) + ')';
}
});
You need to hook into to onPrevNextEvent. They have something called isnext wich gets passed wich basically tells you which direction you are going in.
Example I updated a fiddle I whipped up yesterday for cycle.
http://jsfiddle.net/gx3YE/12/
$(function() {
$('#megaWrapper').cycle({
next : "#next",
prev : "#prev",
timeout : 0,
onPrevNextEvent: function(is,i,el) {
if (is === true) {
alert('slide right');
}
else {
alert('slide left');
}
}
});
});
Isn't what you're describing part of Cycle's core functionality?
Here's how I do it:
$('.slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '#next',
prev: '#prev'
});