KevinBatdorf / liquidslider

A Responsive jQuery Content Slider
161 stars 62 forks source link

Active menu item class on page load #143

Closed realrandal closed 9 years ago

realrandal commented 10 years ago

Hello Kevin,

You refactored direct/cross linking. Like: onclick="api2.setNextPanel(0);api2.updateClass($(this))" Thanks, it's great.

But in former version we have auto detect active menu item from hash on page load. When page was open directly like domain.com/#slide4 - then menu item was highlighted with ls-current class.

Is current version can do this?

KevinBatdorf commented 10 years ago

I think that can still work, but give me a few days to go through the code and see the best way.

On Saturday, August 9, 2014, Randal notifications@github.com wrote:

Hello Kevin,

You refactored direct/cross linking. Like: onclick="api2.setNextPanel(0);api2.updateClass($(this))" Thanks, it's great.

But in former version we have auto detect active menu item from hash on page load. When page was open directly like domain.com/#slide4 - then menu item was highlighted with ls-current class.

Is current version can do this?

— Reply to this email directly or view it on GitHub https://github.com/KevinBatdorf/liquidslider/issues/143.

Kevin Batdorf Freelance Web Developer http://paniki-studios.com http://kevinbatdorf.com http://kevinbatdorf.com

realrandal commented 10 years ago

Thank you, I'm subscriber of your carousel (multi slide) template from few months. :) But finally never use this live. Hope now I will be able. Cause I need this menu to fully react.

realrandal commented 10 years ago

For now, I used this solution. The best I've found. http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

KevinBatdorf commented 10 years ago

I think the best way is to build it like this:

<a href="#3" data-lsc="3" class="lsc">3</a>
<a href="#4" data-lsc="4" class="lsc">4</a>

And then update the first panel using the onload function.

$('#main-slider').liquidSlider({
  hashLinking:true,
  onload: function() {
    var _this = this,
    panel = $('.lsc[data-lsc=' + (_this.getFirstPanel() + 1) + ']');

    _this.updateClass(panel);
    _this.transition();
  }
});

You could build out each crosslink using a similar function too instead of using inline javascript. I put the inline code in the example because I believe it's easier for beginners.

realrandal commented 10 years ago

Great, thanks for this example.

hercules4 commented 9 years ago

Hi Kevin, I am a newbie, follow instructions but it doesn't move, do i have to toy with timing to have it to start to function?