need a fancybox with a minimum width.

[Mona Reilly]

Hello, I want to launch a fancybox containing 3 images that are very tall. I bought the pro extension hoping to dictate the width to a minimum width, have the fancybox height to match the window and leave the content scrollable, and then be able to click through the images.

Ive managed to get it to open all three images in a stacked column to the correct width by using an inline container, but am not able to click through the three images within the container. What is the best way to achieve this? Thank you so very much.

[RavanH]

Hi Mona, welcome on these forums.

… have the fancybox height to match the window and leave the content scrollable… but am not able to click through the three images within the container.

So as I understand it, you wish to be able to scroll the height of one image and then click trough to the next image?

You will indeed need the Inline Content mode (allowing scrolling) but I suggest dividing them up into three inline content instances, linking them into a gallery with the rel attribute.

In code, that would look something like:

<a href="#image_1" class="fancybox-inline button" rel="image_gallery">My gallery</a>
<a href="#image_2" class="fancybox-inline" rel="image_gallery"> </a>
<a href="#image_3" class="fancybox-inline" rel="image_gallery"> </a>
<div class="fancybox-hidden">
<div id="image_1" style="width:300px"><img src="..." alt="..." /></div>
<div id="image_2" style="width:300px"><img src="..." alt="..." /></div>
<div id="image_3" style="width:300px"><img src="..." alt="..." /></div>
</div>

Of course adapting the src and alt values to your images and width and height values to match your desired maximum FancyBox width. The text My gallery can be replaced by a thumbnail image or dressed up as a button with some CSS style rules via the .button class.

[Mona Reilly]

thank you so much for helping! However Im getting an unexpected result. Could I have some settings wrong? Would you be willing to look at my page? I kept your code as-is for testing, inserting my own images. No image pops up, neither does the close button, and the tiny part of the modal showing is on the top left instead of centered. When I check the code it seems the image IS in there but not sure whats happening.

[Rolf]

Hi Mona, sure we’ll look at your site. Just send us a link either on this forum or via the Contact page form.

[Mona Reilly]

thank you so much! I have emailed all the information and included the thread.

[Author]

Posts