Jquery AnythingSlider inside link question

[chamo]

Hello,

First, I’ve searched through this and other forums and was not able to find a solution.

I’m using the AnythingSlider plugin found at https://css-tricks.com/anythingslider-jquery-plugin/
In a nutshell what I’m trying to do is to have a link that goes to a specific slide, which I already know it’s possible, however when the link is placed inside the slider it doesn’t work. I tried all kind of things with no luck.

Here are the steps to see the issue:
1) Go to http://samaritan.com/slide/
2) Click on the "Go to slide 6" link on top of the slider.
3) The slider will go to slide 6.
4) Go to slide 2 by clicking 2 on the yellow navigation bar.
5) Notice I included the same Go to slide 6 link. Click on it.
6) Notice it doesn’t work.

I used the same code as for the link at the top <a href="#" id="slide-jump6">Go to slide 6</a>
I tweaked the code several ways and nothing.

I’d appreciate any help, thanks!!

– J

[Chris Coyier]

Both of those links have the same ID value. JavaScript is only binding the first one. They need different ID’s, or use a class name or something.

[chamo]

That worked!
Thanks so much.
Hopefully this will help others as well.

– J

[rm450]

Hi,
I’m having the same issue with having a link to another slide within a slide. I don’t see chamo’s example working either. Please help!

-r

[Deckard]

Hello

I realize this thread is a little old, but I’m having the same issue here (and the above comments basically cover it). I’ve tried the solutions above, but that doesn’t work.

Static links outside the slider are fine. These solutions wok fine for that. Just inside, going to another panel, doesn’t work.

Are there any links to a demo of links within the slider working?

Thanks for any help!

[Mottie]

Hi Deckard!

Try this demo. The extra code looks for a “#” plus a number in the link, then uses the number as the slide to go to. If it doesn’t find that combination, it lets the link function as normally – opening up the external page.

[Deckard]

Hi Mottie,

Thanks for the reply! I’m still at the basics with js and can’t see the solution in the demo? Currently I have external links to the sliders panels like so:

panel1


panel2

$("#slide-jump").click(function(){

$('#slider2').anythingSlider(1);

return false;

});

$("#slide-jump2").click(function(){

$('#slider2').anythingSlider(2);

return false;

});

If I wanted to have a link to panel2 within some text in the slider, I would think this would work:

go to panel2

$("#slide-jump3").click(function(){

$('#slider2').anythingSlider(2);

return false;

});

But this hasn’t worked? I’ve also tried changing the #ids to .classes, but to no avail. The slider responds in reloading the current panel and its fx, but not moving onto the next panel.

In the demo I see the fixed panelNav. I tried just the

2

with the additional js, but no joy.

Hmm. Bit stumped.. I know this must be possible, but I can’t see it.

Any laymen point in the right direction is much appreciated! Thank you.

[Mottie]

Ahh ok, sorry for not explaining better. Basically, I’m guessing you want links to be added to every slide. So it would be better to not use ID’s because they have to be unique. So, in the demo I made, I started off by adding these links to every slide

1 2 3

4 5

Google

You could wrap them with a div and position it inside of the panel, or be lazy like me and just make the panel that much taller (I added 30px to the height) so you can see the links underneath.

Then I added this code to do all of the work

$('#slider li a').click(function(){

var href = this.href, slideNumber;

// external links will fall through and go to the external url

if (/#d/.test(href)) {

slideNumber = href.substring( href.lastIndexOf('#') + 1, href.length );

$('#slider').anythingSlider(slideNumber);

return false;

}

});

So the function does the following:

• The first thing you see is the function to monitor for clicks on the all of links inside of the slider.
• We then grab the “href” of the clicked link and look for the “#” followed by a number.
• If that pattern is found, it assumes it is a link to another slide, so it separates the number from the “#” and calls anythingSlider, making it go to that page.
• After the page updates, the code finds a return false, which prevents the link from updating the browser location window.
• If that pattern isn’t found, then it is an external link. So all of this code is bypassed and the link acts like normal and redirects the browser to the new page.
• One small problem would be if you had an external link with an address ending with “#” plus a number… it would assume that that link is pointing to a slide in the slider, so that code would execute.
• Another possibility would be to just grab the text of the link and set the slider to go to that number – this would bypass the previous problem.

[Deckard]

I am so blind. Thank you so much for taking the time to do that, Mottie. I’ve only just noticed the nav links moving/sliding with the panels, so wrap it up in a div it is. Perfect.

Thank you again for the code and support!

Deckard.

[Author]

Posts