Forum Replies Created

Viewing 15 posts - 16 through 30 (of 401 total)
  • Author
  • November 10, 2020 at 10:33 pm #30123

    Hi Timothy, yes the issue is known and being worked on as we speak (write).

    The current transition is a fade-out (of the old image) and then fade-in (new image) which exposes the white background visible like a short flash.

    The next release will have a cross-fade effect, which means the old image will fade into the new one straight away. After that, a slide effect is planned for another release.

    In any case, the upcoming version should not take too long now πŸ™‚

    October 30, 2020 at 10:47 pm #30007

    Hi Johannes, thanks for sending the zip. I’ve sent an email to you after testing with different gallery blocks but in all cases the fancybox light box seems to work wihtout any modifications… I’ll need more info to be able to reproduce the issue so I hope you can tell me more via email πŸ™‚

    October 30, 2020 at 10:44 pm #30006

    Great work! πŸ™‚

    December 30, 2019 at 7:24 pm #18254

    but now on desktop is aligned on left…

    Yes, that is what I meant with “Changing it through CSS will move the frame out of center position, leaving a larger margin on the right side.”

    What you could do is bypass the 20px minimum limit on your Settings > Media admin page by doing this:
    1. Go to Settings > Media and find the field Margin in the Window > Appearance section.
    2. Right-click the input field and select “Inspect” (or similar, it depends on your browser)
    3. In the developer tool box that now opens (usually on the right side) you will see the part of the page source code that matches this input field. It should look like this:
    <input type="number" step="1" min="20" max="80" name="fancybox_margin" id="fancybox_margin" value="0" class="small-text">
    4. Change the element attribute min="20" to min="0" by double-clicking it and then manually removing the 2, then hit the Enter key.
    5. Now back on the settings page itself, you can lower the Margin to 0
    6. Hit the Save Changes button at the bottom.
    7. Remove the style rule #fancybox-wrap { padding: 0 !important; left:0 !important; } because that will only confuse the script.

    Now you should get a better result…

    December 30, 2019 at 6:55 pm #18252

    Hi Eugenio, are you talking about the space between the light box frame and the edge of the browser window? This is calculated on the fly by the light box script. You can reduce it to 20 pixels but lower than that is prohibited because it will partially hide the close button and (depending on theme CSS) force the site width to surpass browser screen width, adding a horizontal scroll bar.

    I’ve put up an example on https://demo.status301.net/ if you click the link Google Maps “embed test” you will see the result.

    Changing it through CSS will move the frame out of center position, leaving a larger margin on the right side.

    The best approach to fully cover your site, is to set the Margin to its lowest value (20px) and then set the Overlay to have Opacity: 1, and Color: #FFF or another color that matches either the embedded site or your site background color…

    November 11, 2019 at 4:20 am #17543

    To get the popup to show on the top left will take more that some custom CSS or alternative image. The script was designed to seek the center so our only option would be to make the popup as large as possible and then have the form align top left of its content.

    Go to Settings > Media and find the section Window. There, under Dimensions, set both “Width” and “Height” to 100% and test your popup again…

    November 11, 2019 at 4:02 am #17542

    Hi Bianca, to change the background transparency, there is the field Opacity in the Overlay section on Settings > Media. Give it a value 1 to completely remove any transparency.

    Changing the close button appearance will be more difficult. We have an experimental plugin available that replaces the standard close button but it will look different to what you want. You’d have to create your own alternative button image to replace the one in that plugin.

    Or we could try to construct some custom CSS to get the close button to look like you want…

    Let me know what you prefer πŸ™‚

    November 7, 2019 at 10:52 pm #17483

    Ok, if I understand you correctly, you want a button on your site that (when clicked) opens a FancyBox light box in which you can see a slider that is managed by MetaSlider.

    This can be done, following these steps:

    A. Prepare FancyBox
    Go to Settings > Media, enable the option “Inline Content” and save.

    B. Get your slider shortcode
    1. Go to your MetaSlider admin page and either create a new slider or open the slider that you want to use.

    2. Scroll down to find on the right side the block “How to use”.

    3. Click on the shortcode there (it looks like with [metaslider id="xxx"]) which will copy that code to your clipboard.

    C. Add the button and popup to your content.
    1. Now go to edit the page or post where you want your button to appear and add a HTML block (or switch to the HTML tab if you are using Classic Editor). If you prefer the button in a widget area, then go to Appearance > Widgets and add an HTML widget.

    2. Now paste the shortcode there with Ctr+v.

    3. Next, copy/paste this code before the shortcode:

    < a href="#slider-1" class="fancybox-inline button">BUTTON TEXT</a>
    < div class="fancybox-hidden">
    < div id="slider-1" style="width:600px;height:400px">

    4. Next, copy/paste the following code after the shortcode:

    < /div>
    < /div>

    5. Now edit the code once more:
    – remove each space that appears right after each < in the code (the space was added to make the forum not parse these code snippets as html)
    – adapt the style="width:600px;height:400px" in the code above to better fit your slider
    – change the BUTTON TEXT to the text you want.

    6. Then save your post/page and test the link. It may not look like a button yet if your theme does not support the “button” class, but the link should already open the light box and show your slider.

    D. Style your link as a button (optional)
    Your theme may already have style rules for the class button but if not, then you have two options: 1. Add your own style rules or 2. use another class that is inside your theme style.css. The second option may be available if you notice that your theme is using call to action buttons in the front page hero area/header for example. You’ll have to find out which class these buttons use and adapt the example code (above, used in your post/page/widget) to use the same class. But if this is not possible, then I suggest the following:

    To make the link appear as a button, add the following CSS code in the theme Appearance > Customize > Additional CSS field:

    .button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;

    This CSS example is from https://www.w3schools.com/css/css3_buttons.asp where you can find more examples. But you can adapt it to anything you like. There are many examples out there if you do a search for “css button example” πŸ™‚

    November 7, 2019 at 10:11 pm #17480

    Hi Todd, I’ll have to take a closer look at the Meta Slider. To make sure: is that https://wordpress.org/plugins/ml-slider/?

    September 26, 2019 at 6:57 pm #16920

    Hi Richard, could you tell me which device and browser app you are using specifically?

    September 26, 2019 at 8:22 am #16912

    Hi, we cannot seem to be able to replicate the issue. We’ll have to look into this further and let you know…

    September 10, 2019 at 12:22 pm #16651

    Hi Richard, my sincere apologies for responding so late. The message somehow escaped our attention.

    It sounds like the script is failing to detect the screen width correctly. Could you share a link to the page where you see this happening?

    July 30, 2019 at 3:50 pm #15617

    Hi Philippe, there is one crucial condition for opening a light box on the parent frame: both parent and child frame must live on the same domain. If not, the script will be blocked by any browser that respects cross-site scripting security.

    Next, it’s important to realize that this is not possible with the standard WordPress plugin. It would either need a heavy modification or (better) a custom implementation of the light box script on the child page.

    I’m afraid this is out of the scope of possibilities of Easy FancyBox…

    July 18, 2019 at 10:15 am #15478

    Hi Claudio, is the “add to cart” button the one that sais “Jetzt Vorlagen herunterladen!” on your example product page? And do you want it to open the target page inside a light box?

    If so, then you will have to find a way to give that button link an extra class “fancybox-iframe”. It currently has class="single_add_to_cart_button button alt" but this needs to become class="single_add_to_cart_button button alt fancybox-iframe" but it depends on your theme how.

    Is that a widget area or are there options related to the button on the product edit page maybe? If you see any option to set additional classes, then please try that and let me know so I can take a look at the resulting page source πŸ™‚

    If not, then we’ll have to either modify a theme template file or try to devise some javascript to set the class dynamically…

    July 8, 2019 at 7:19 am #15339

    Hi Russell, you can make FancyBox open on specific URL hashes. Assuming you already have your popups ready on a particular page and each one can be opened by clicking a specific link on that page, follow the following extra steps:

    1. Go to Settings > Media and find the option called Open on page load under Miscellaneous / Auto popup. Set this to Link with ID matching URL hash and save settings.
    2. Go back to the page/post where your popups should appear and if the media/popup links do not already have a unique ID (for inline content) then give each a unique ID, like id=”popup1″, id=”popup2″. Note that if your popups are inline content popups, then they should already have a unique ID and you do not have to do this step.
    3. Now test each popup by visiting your page in an anonymous browser window with #popup1 or #popup2 etc. appended to the URL. Each time, the corresponding link should be triggered, automatically opening the corresponding popup.

    Redirect your users to these URLs (with different hash after them) to make the get a specific popup.

    Let me know if you need more information or help. You can send me the page URL if you want via https://efbpro.firelightwp.com/contact/ so I can take a look.

Viewing 15 posts - 16 through 30 (of 401 total)