CODEWITHSUNDEEP
jqueryimagetabsswapflowplayer
Chris
Chris

Reputation: 483

jQuery code to change an IMG on load of a div

I am using Flowplayer tabs (http://flowplayer.org/tools/demos/tabs/index.html) and after some research it seems that you can't have one set of tabs to change the content of two different panels.

On my page is a large banner image, below this are the tabs, and below this is the content container. Clicking a tab changes between different divs in the content container. How can I get the banner image, which is outside the content container, to change depending on what tab has been selected? Am I right in thinking that each tab can have some jQuery code immediately after its div tag begins, which changes the banner image as soon as the div loads?

Many thanks, I'm still getting my head around jQuery so hopefully this is something basic..!

Upvotes: 0

Views: 339

Answers (1)

Mickey Mouse
Mickey Mouse

Reputation: 1771

You can do this

   $("#example").tabs(".panes > div", {
      onClick : function(e, index) { 
            switch(index) {
              case 1:
                   // first tab 
                   $('#banner-img').attr('src', 'images/img1.png');
                   break;
                  case 2:
                   //second tab
                   $('#banner-img').attr('src', 'images/img2.png');
                   break; 
           }
     }
    });

Upvotes: 1

Related Questions