花式盒子上的花式盒子

Question

I am trying to figure out a way where I click an image and a fancy box appears with 3 buttons and when I click on any of the buttons, i get a gallery using fancy box. Is that possible? I want an Fancy box 1:iFrame-->Fancybox 2: One Image gallery

I read somewhere it is, and the others said its not, everyone is giving different can anyone help?

Answer 1

If you are using fancybox v2.x, it's as easy as binding fancybox to your box with buttons and your image galleries so, to launch the fancybox with buttons, create a html like

<a class="fancybox" href="#buttonsContainer"><img src="images/01t.jpg" alt="" /></a>

..... notice that we are targeting an inline content with id="buttonsContainer" . Then the hidden html content can be like

<div style="display: none;">
 <div id="buttonsContainer">
  <a class="fancybox myButton" href="images/01.jpg" data-fancybox-group="gallery01" title="gallery 01">open gallery 01</a>
  <a class="fancybox myButton" href="images/02.jpg" data-fancybox-group="gallery02" title="gallery 02">open gallery 02</a>
  <a class="fancybox myButton" href="images/03.jpg" data-fancybox-group="gallery03" title="gallery 03">open gallery 03</a>
 </div>
 <div>
  <a class="fancybox" href="images/04.jpg" data-fancybox-group="gallery01" title="gallery 01"></a>
  <a class="fancybox" href="images/05.jpg" data-fancybox-group="gallery02" title="gallery 02"></a>
  <a class="fancybox" href="images/06.jpg" data-fancybox-group="gallery03" title="gallery 03"></a>
  <a class="fancybox" href="images/07.jpg" data-fancybox-group="gallery01" title="gallery 01"></a>
  <a class="fancybox" href="images/08.jpg" data-fancybox-group="gallery03" title="gallery 03"></a>
 </div>
</div>

Notice that we have set to sections, one for the buttons ( buttonsContainer ) and one for the galleries.

The custom fancybox script can be as simple as

$(document).ready(function(){
 $(".fancybox").fancybox();
}); // ready

...which will work for both, the box with buttons and the image galleries.

see WORKING DEMO