Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery AnythingSlider inside link question Re: Jquery AnythingSlider inside link question

#89436
Mottie
Member

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.