Jquery - Change Image When Tab Is Clicked

I am trying to get a WordPress image to change based on which tab is clicked. I want the image to be replaced with a new image using jQuery's fade effect. The image must be relativ

Solution 1:

Here is a way to do what you want using jQuery UI tabs. It uses the "show" event to detect which ui.panel element is being displayed.

​$('#tabs').tabs({
  show: function(e,ui){
    switch(ui.panel){
      case $('#tabs-1')[0]: src = 'image1.jpg'; break;
      case $('#tabs-2')[0]: src = 'image2.jpg'; break;
      default: src = 'default.jpg';
    }
    $('#myimg').attr('src',src);
  }
});​​​​​

In the future, I'd recommend adding more specifics to your question, and providing a more simplified example. Your page had numerous scripts on it, which makes it difficult to look at your specific situation.

Solution 2:

try this: $('.ui-tabs').click(function(e) { e.stopPropagation(); });

Solution 3:

It looks like the jQuery UI tabs component is being used. It has a custom "tabsselect" event when the tabs are switched. You could tap into it as so:

jQuery('#wp-tabs-1').bind('tabsselect', function(event, ui) {
    var$img = jQuery('li.imageslide img');

    $img.fadeOut('slow', function() {
        $img.attr('src', 'my' + ui.index + '.jpg');
        $img.fadeIn('slow');
    });
});

The index of the clicked tab will be stored as a property of the ui argument object passed into the callback. You could build the file name by concatenating 'my' to it.

I'm not sure exactly what image you want switched, I assumed it was the main large one on the page. If not, switch out the 'li.imageslide img' selector to the one that targets your image element.