Viewing 30 posts - 1 through 30 (of 45 total)
  • Author
  • #1407730

    Hello Mike! I’m trying to create a button were with the click a lightbox opens. There i should create a “page”, i mean i should put text, video, foto, tables….
    I copied your code in my theme editor, so i’m trying to copy the other css code into my css (appearance). Now, how should i continue to view the box? Where i create the box with text, video, foto, etc….?
    If you want, you can entry in my wordpress..


    Hey Stilecatalini,
    I assume that this button for a popup is different than your team member request, please see the test page example below.
    I created three example columns, each has a hidden element with the custom class mfp-hide then add a button under it, the button will open the hidden element in a popup.
    Try creating another column with a button and a element with the custom class mfp-hide on the page to see how it works.

    Best regards,


    Hi Mike. I’m here! So do you remember what I’m asking? Popup where I should put inside text, photos, video, tables..
    Please review my website examples.
    Waiting for you..


    You have created in my wordpress the Popup page and the team members page.
    We are on the right way but, like I already told you, I want to put all in one page only without navigation button (<>) like you put in the popup page.


    Please check the /popup-example/ page.

    Best regards,


    Hi, just seen. My question is: can i create a real page with color section, blocks…? Imagine a real page.
    So i could build it easily. I find that so limitate for me to build a page in a text block..
    If I create a page, are you able to make it open like this?
    Do you want that i build it?


    You could use iframes but when you create these pages you would need to disable the header and footer for these pages and they would load slower because you are loading a new page, you would be better off just linking the images to the page instead of trying to load them in a lightbox.
    Typically using a iframe to lightbox another page is not satisfactory, the lightbox option works good for a medium amount of information such as will fit in a text element and fits on the screen without scrolling.

    Best regards,


    So what should I do?
    What is iframe?
    Anyway sure it should be scrollable because there are a lot of informations.
    Take a look the page Venticinque..


    I recommend linking your images to the pages and not use the lightbox for this situation.

    Best regards,


    I don’t want to open a new page. I choose one page site.
    Question: is it possible to open a new page like a popup? I mean you open a new page but it is open in overlay.


    Look at these one page website: I like so much how they open the works..


    Thanks for the links to your examples, this is my review of them:
    This site popup under OUR WORK doesn’t show a full page only a little and uses an element like our ajax portfolio
    This site under OUR PORTFOLIO doesn’t use popups, it links to a new page.
    This site popup under WORKS doesn’t show a full page only a single image and a little text in a element on the page just like the text box solution I created for you earlier.

    I changed the /popup-example/ page for you so you can see how the iframe popup works, first you use the link setting in your image and link to your other page with this at the end ?iframe=true then you need to disable the header and footer on the other pages and add css to make the lightbox as large as possible, I did this for you, please clear your browser cache and check.

    Best regards,


    Well Mike. I like.
    It doesn’t work on mobile. Try to see…
    Again, is it possible to remove the sidebar on the right? (Desktop version)


    Now I have seen better. Is it possible (on mobile) to stretch the box? By mobile you have a little box scrollable. Not bad but I think that a visitor don’t understand that should scroll inside that box, so he will scroll out of this. Understand?


    Unfortunately with iframes you can not set the height in the same way, this is a limitation and if you remove the scroll bar the user can not scroll to see your whole page.
    Typically using a iframe to lightbox another page is not satisfactory, the lightbox option works good for a medium amount of information such as will fit in a text element and fits on the screen without scrolling.

    Best regards,


    Hi, how can we do to find a better solution?
    I like it…


    Anyway reviewing my website examples by mobile….they are so so well done!
    Please review my three examples! I love them!
    In all three seems open a new page but is not a new page. Scrollable..etc…
    Very well! I would exactly that!


    Did you see my review of your examples? One of them opens new pages and not in popups, one of them uses an element like our ajax portfolio and the last one uses a text box popup like I created for you earlier, but none of them shows a full page in a popup they all only show enough text that will show in the visible screen area even on mobile.
    So for exactly like this I recommend the text box popup solution from earlier and only add a littel text in the text block like your example sites do.
    Try using the page revisions to go back to that solution.

    Best regards,


    Please restore the previous popup page where there was the navigation button (<>).
    Please make these light boxes like my website examples (with navigation and close buttons CLEAR). I will put inside the first: text and pictures, in the second table and video, in the third links, etc …
    Is it possible?
    If we have to insert all the data necessarily by code, so for me is so difficult, I prefer to create 3 or 4 “mini pages” and you will put inside the light boxes. Ok?


    Anyway in my examples the scrolling work well! Not like mine.


    I have to honestly confess here that I haven’t read the entire content of the topic, but if with a little thinking you don’t give the team member element, but a color-section (or grid-row) an ID and give it the class mfp-hide, the color-section should be able to appear as similar in a lightbox.

    if this is not enough – why don’t you open a page in a lightbox from your site.
    Place that button and insert a manual link with the url of your wanted pages with addendum: ?iframe=true

    see here https://webers-testseite.de/my-website/

    PS: If it is an external page link – you must have allowed on that external link to be running in an iframe.
    for that i allowed it via htaccess by: Header set X-Frame-Options "ALLOW-FROM https://webers-testseite.de/"

    but on internal pages ( X-Frame-Options “sameorigin” ) this is not needed


    Hi Guenny, please try you. I’m afraid to do some errors!!
    Please entry on my WordPress.


    i’m just participant as you – so no private content could be seen by me.
    but maybe the edited tip will help you more than the inline-popup solution


    Have you seen my website examples above?
    Please take a look…
    I would obtain that.


    I mean I have a button (image) and when I click that, should open above (like a new page but not a new page. My website is one page) a page where inside I want insert all: tables, photos, video, text…)


    if this is what you need: https://www.11-76.com/themes/giant/index-SINGLE-IMAGE.html#

    and you like to style the new content like a page – why not use a page? – those “pages” should be only set to template blank – no header – no footer.

    or – if you like to use it with a portfolio grid ( or a masonry with portfolios ) – you can change that opening behavior to show the linked portfolio in a lightbox ( modal window ) and not to open a new page. The trick is then to not make the look and feel like a lightbox ( but to show as white full overlay ) with just a close button on that.


    see f.e. a portfolio masonry:

    i set the popup in child-theme functions.php to:
    ( that is just for that page-id on my code )

    function add_modal_popup_einstellungen() { 
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
      (function($) {
        $('.av-masonry-entry').on('click', function(e){
          removalDelay: 700,
          midClick: true,
        $(document).on('click', '.popup-modal-dismiss', function (e) {  
    add_action('wp_footer', 'add_modal_popup_einstellungen');

    some css ( in this case the opacity is set to 0.97 that you can see it is a lightbox – if it is 1 – it’s nearby your example page from above.

    #top.page-id-42989 .mfp-bg {
      background-color: #FFF;
      opacity: 0.97;
    #top.page-id-42989 .mfp-iframe-scaler {
      width: 100%;
      height: 80vh;
      overflow: hidden;
    #top.page-id-42989 .mfp-iframe-holder .mfp-close, 
    #top.page-id-42989 .mfp-image-holder .mfp-close {
      color: #000;

    Guenny with my permission entry in my WordPress and set it for me. I want obtain that and you are all specialists able to do that. If you or Mike, for me important is the final result.
    This website is mine.


    Guenni007 thank you for sharing your solution, Stilecatalini I have applied Guenni007’s solution to a new page:

    I added the code to your WP Code plugin and copied your three pages to portfolio pages so they would show in the masonry element.

    Best regards,


    Hi guys! I like so much.
    Is it possible to have black background instead of white?
    Is it possible (DESKTOP VERSION) to remove that scroll bar and put another? And to enlarge the page? And a close button (X) more big (like on the burger menu)?

    I tried to insert that color section in my HOMEPAGE but there doesn’t work! Why?!
    Please check!

Viewing 30 posts - 1 through 30 (of 45 total)
  • The topic ‘Lightbox’ is closed to new replies.