Toggle a body class based on active slide using Cycle2

StackOverflow https://stackoverflow.com/questions/16871178

  •  30-05-2022
  •  | 
  •  

Question

Hi Stack Overflow peeps,

I don't have working code for this, as I'm unsure where to even begin. So apologies in advance.

I've scoured the internet for a solution but this feels like it could either be really simple (and I'm over complicating things) or it's somewhat specialised.

Current Situation: I'm using Cycle2 as my slider of choice (and would prefer to stick with that - will be difficult to make me go with another slider, TBH). Each slide will have a specific "colour" class, as well as a 'slide' class

What I need: I need to change a class on the <body> based on the active class' colour.

Thoughts: So I don't have a naming convention yet for the colour classes, but my thought was it could be something like .col-[name] were [name] is yellow, red, etc. So when the active class of the slider is col-yellow, it adds this class to the <body>, and therefore I can add a background colour/image (whatever CSS I want) to the body.

Then once the active slide changes and if it happens to change its body class to something like col-red, then the <body> matches.

I hope this makes sense and is something some awesome person out in Stack Overflow land can help me with.

Thanks for taking the time to read this!

Was it helpful?

Solution

I answered a similar question not that long ago.

DEMO http://jsfiddle.net/kevinPHPkevin/7VzaQ/3/

$('.cycle-slideshow').on('cycle-before', function (event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
var bg = $(incomingSlideEl).find('img').css('backgroundColor');
$('body').css('background', bg);
});

Hope this helps

[edited] I've edited the code so now it assigns the same class to the body that is assigned to the active slide

DEMO http://jsfiddle.net/kevinPHPkevin/7VzaQ/4/

Just to explain what i did - As you can see in the above code i creat a var called bg. This var is the CSS background color of the active slide. I then assign that var to the background of the body tag. As you requested you wanted a class change, not just a style change. In light of this i simply changed the code so that it is finding the attr class rather than the CSS background color.

Var Snippet before:

var bg = $(incomingSlideEl).find('img').css('backgroundColor');
    $('body').css('background', bg);

Var snippet after:

var bg = $(incomingSlideEl).find('img').attr('class');
$('body').attr('class', bg);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top