Tab action for external link

[kosheen1]

Hi there, i was wondering what action should i put to get a list to slide the content just like the tab do

like onclick="liquidSlider.setPanel(2)" or any other way

[KevinBatdorf]

Hi,

You can store the functions into a variable then call them from anywhere

$('#slideshow').liquidSlider();

var api = $.data( $('#slideshow')[0], 'liquidSlider');
$('.list').on('click', function() {
    api.setPanel(2);
});

[kosheen1]

Still not make the link to slide it... maybe im missing something somewhere. Heres the actual part of the list

<div class="mySlides">
     <div class="ListItem"> <a href="#1" class="active">Something</div>
     <div class="ListItem"> <a href="#2">Another Thing</a></div>
     <div class="ListItem"> <a href="#3">One more for the Sake!</a></div>
</div>

mySlides is a simple slide everything works fine except this little part

[KevinBatdorf]

Use the code I have above and adapt it to your markup.

$('.list').on('click' ... would require you to change .list to .ListItem a

[KevinBatdorf]

You would also have to get the href then split the # from it.

[kosheen1]

Yes i did change the class to the appropriate one. And i have no clue what the href thing you meant. From the code you gave me i would assume(if working) that any item in the list i click would return to the value 2 while they should have their own slide panel

Im really lost right now to be honest

[KevinBatdorf]

Can you post the javascript you have?

href as in <a href="#2">

You have to figure out how to extract that number, then use it in the code I pasted above api.setPanel(2);

[kosheen1]

<script>

var api = $.data( $('#main-slider')[0], 'liquidSlider');

$('#main-slider').liquidSlider({
dynamicTabs: true,
dynamicTabsHtml: true,
includeTitle: true,
panelTitleSelector: '.Title',
dynamicTabsAlign: 'left',
dynamicTabsPosition: 'top',
navElementTag: 'div',
hashLinking: true,
continuous: false, 
hashTitleSelector: '.Title',
  autoHeight:false,
  slideEaseFunction:'animate.css',
  slideEaseDuration:1000,
  heightEaseDuration:1000,
  animateIn:"bounceIn",
  animateOut:"bounceOut",
  callback: function() {
    var self = this;
    $('.Title').each(function() {
      $(this).removeClass('animated ' + self.options.animateIn);
    });
  }
});

$('.ListItem a').on('click', function() {
    api.setPanel(2);
});
  </script>

[kosheen1]

I can use this to get the link info but how to integrate it to your existing code...

$(document).ready(function() {
            $("a").click(function(event) {
                alert("As you can see, the link no longer took you to jquery.com");
                var href = $('a').attr('href');
                alert(href);
                event.preventDefault();
            });
        });

[KevinBatdorf]

You cant store the functions if the slideshow doesn't exist yet. Just move the var api... section above the click event

[kosheen1]

gemme a sec im gonna try something

[kosheen1]

Tryed this didnt work either

var api = $.data( $('#main-slider')[0], 'liquidSlider');
$('.ListItem a[data-slide]').click(function(e){
api.setPanel( $(this).data() );