multiple easy fancybox on the same page

Hi Alina, welcome on these forums and thank you for your purchase!

As I understand it, you wish to style the light box differently for different use cases? Appart from difference in sizes and title area, this might be difficult to do. The actual source code that will serve for all light box instances is created at page load and all style rules (like colors etc) applied to it, will apply for each instance.

Looking at your site, I see the “Customer review” link that opens up the CF7 form. Where can I find the photo link?

I see what you mean… Do you wish that photos open in a light box too or do you prefer they are not opened in a light box at all? If the latter, then you could try switching OFF the option Images on the Settings > Media admin page.

Otherwise, there is no way to prevent the style rules you added to apply to all light boxes instead of only the Inline contact form one… The only difference between an image and the inline form inside the light box is this:

<div id="fancybox-content">
  <img ... />
</div>

versus:

<div id="fancybox-content">
  <div style="...">
    <div id="contact_form_pop" ... /div>
  </div>
</div>

Note how the inline content div (with ID contact_form_pop) is wrapped in a anonymous div. This means that if you want a specific background color for that inline content, you could apply it with #fancybox-content div { background-color:... } for example. Or if you want to pass any of the light box script options from http://fancybox.net/api you could use the Metadata method but otherwise, not much else.

Positioning the light box differently, for example, will apply to all other media too. In that case, you are obliged to add another light box (must be a different one than FancyBox otherwise the same problem occurs) to open up the contact form.

You could still open up everything with FancyBox but then you’d have to remove the custom style rules. Then only use rules like #fancybox-content div { background-color:... } for customizing the contact form inside the light box.

Downside is of course that that is a lot less flexible. The advantage is that you do not need to make the site heavier with a second light box script.

Hope these considerations help 🙂

Rolf