multiple easy fancybox on the same page

Home Forums Easy FancyBox Pro multiple easy fancybox on the same page

This topic contains 7 replies, has 2 voices, and was last updated by  RavanH 11 months, 3 weeks ago.

  • Author
    Posts
  • #6740

    Alina Lautaru
    Participant

    Hi,

    Im trying to use fancy box pop up multiple times on the same page once with contact form 7 and second just on some photos , but no matter how much I’ve tried i simply don’t know how to give them a proper class or id in order to style them in a different manner, the settings i have added to CF7 also take place on my photo and apparently i have no idea what I’m doing.

    Please help :)))

    My site : http://www.top10datingcasino.com/site1/top10dating/

    Best,

    Alina

  • #6741

    Alina Lautaru
    Participant

    Forgot to mention that I’m trying to work on css hero and Beaver Builder if it makes a difference!

  • #6742

    RavanH
    Keymaster

    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?

  • #6743

    Alina Lautaru
    Participant

    Thank you!

    Sorry i was keep on playing around and removed it, but now is back on the page above the customer review left side top of the page.

    I was just trying to zoom the photo like in this example : https://status301.net/wordpress-plugins/easy-fancybox/ screenshot 1 .

    Looking forward for your reply!

    Best,

  • #6744

    Alina Lautaru
    Participant

    I also have tried to add the nolightbox class in order to skip the photo opening through fancy box but that didn’t worked either.

  • #6745

    RavanH
    Keymaster

    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.

  • #6746

    Alina Lautaru
    Participant

    I would have preferred to open everything in a fancy box pop up including the photos, anyway thx so much for your reply i have never thought to switch off images option from settings :)) so i will be using the fancy box pop up only for testimonials and a different plugin for photo enlarge.

    PS i like the plugin!

    Best,

  • #6747

    RavanH
    Keymaster

    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

You must be logged in to reply to this topic.