CODEWITHSUNDEEP
javascriptjqueryfancyboxtabpanelspry
Nidhi Ranpura
Nidhi Ranpura

Reputation: 87

How to open FancyBox in a Spry tabbed panel

I am using a Spry tabbed panel for an HTML base site.

I want to open fancybox, by clicking on a tab (four tabs in total). Once the user fills the fancybox form, only that particular tab panel content should be open.

Is this possible? Below is my code.

    <div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
     <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
     <div class="TabbedPanelsContent">Content 3</div>
    <div class="TabbedPanelsContent">Content 4</div>
  </div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

I want to a form to be filled on tab #2 in fancy box. Once user fill that form and submit successfully after that only tab panel content should be opened.

Upvotes: 0

Views: 210

Answers (1)

user2454606
user2454606

Reputation:

As you have not posted any code ..I can tell only logic .. U can get the selectedtab index by

var index= ($tabs.tabs('option', 'selected'));

and then you compare your index with the fetched index and if it matches then open your fancybox by 

$(".fancy").fancybox().trigger('click');

and you can write your own function on sumbit/close of fancybox

$("<YOUR-SELECTOR>").fancybox({
  onClosed: function() {
 // your own functions
      });
  });

Upvotes: 1

Related Questions