Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 31, 2017 at 2:21 am #801749
    0_o

    Hi!
    Is there a way to make a button element or button in a slideshow open a link/page in iframe in a lightbox (Magnific or something else that plays well with Enfold)?

    Many thanks!

    May 31, 2017 at 3:19 am #801757
    Mike

    Hey 0_o,
    This post describes doing that for a mail chimp form, but you could replace the mail chimp shortcode with anything else :)
    https://kriesi.at/support/topic/lightbox-for-mailchimp-form/#post-582439

    Best regards,
    Mike

    May 31, 2017 at 3:33 am #801758
    0_o

    Thanks for the quick response!
    Is it still working on 4.x versions? I’m not sure what I did wrong, but for some reason, the button doesn’t do anything for me.

    May 31, 2017 at 5:34 am #801800
    John Torvik

    Hi,

    You need to install this plugin: https://wordpress.org/plugins/wp-magnific-popup/

    Best regards,
    John Torvik

    May 31, 2017 at 5:02 pm #802105
    0_o

    Thanks, John! I thought Magnific is embedded in Enfold.
    Anyway, I downloaded this plugin and removed all the codes from Mike’s link (because it’s unnecessary with the plugin installed).
    Now, the problem is that the screen is still scrollable even with the lightbox open, I’m attaching 2 links below to show what I mean.

    Edit: for other participants that may be able to help, that’s the code from the website I found the type of popup I like, non-scrollable, looks really good: https://pastebin.com/0U0mwVY1

    • This reply was modified 7 years, 5 months ago by 0_o.
    June 2, 2017 at 2:55 pm #803046
    Yigit

    Hi,

    Please refer to my post here – https://kriesi.at/support/topic/lightbox-for-mailchimp-form/. You can add your HTML code into slider captions

    If you would like to style your button as Enfold buttons, please add following code to Quick CSS as well

    .open-popup-link { 
    background-color: #d63e2d;
    color: #ffffff;
    border-color: #b41c0b;
    padding: 9px 10px 7px;
    font-size: 13px;
    min-width: 80px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
}

    Best regards,
    Yigit

    June 3, 2017 at 4:07 pm #803400
    0_o

    Thank you, Yigit!
    Your code for mailchimp works great!
    For button styling, I’m using class=”avia-slideshow-button avia-button avia-color-theme-color avia-multi-slideshow-button”

    I have one more issue: In desktop view, the (back) page content is not scrollable when the popup is open, but in mobile it is, is there a way to fix it on mobile view? (link for a sample is below).

    Thanks again, you guys are awesome!

    .
    .
    .
    .
    Edit – originally I had another question, but I found a solution for it.
    Question: When I use this a href code in a slideshow caption text, the button text is underlined, is there a way to remove it?
    Solution: #top .avia-caption-content a { text-decoration: none; }

    • This reply was modified 7 years, 5 months ago by 0_o.
    June 4, 2017 at 9:31 am #803532
    John Torvik

    Hi,

    We glad that your problem was solved by yourself :)

    Best regards,
    John Torvik

    June 4, 2017 at 1:30 pm #803575
    0_o

    Just the underline text issue got fixed, I still have a huge problem with the scrolling on mobile.

    June 4, 2017 at 1:46 pm #803581
    Mike

    Hi,
    Perhaps I don’t understand the issue, because I’m have no issue with scrolling the popup on the site.

    Best regards,
    Mike

    June 4, 2017 at 7:41 pm #803684
    0_o

    Hi Mike, on mobile view (cellphone or when you minimize the window to be very narrow), when the popup is open, you can still scroll up and down the page and see the original page (not the pop up).
    I rather it not doing it.

    On desktop view, it’s totally fine, when the popup is open, you can’t scroll the page.

    I added a link in “private content” to a site that has a similar popup, but dosnt let you scroll the page in desktop and mobile view.

    Many thanks!

    • This reply was modified 7 years, 5 months ago by 0_o.
    June 5, 2017 at 12:18 pm #803845
    Yigit

    Hi,

    I can reproduce it only on my iphone and not on browser however that scroll is necessary since if it was fixed, your visitors would not be able to scroll down to fill all the fields on mobile :)

    Best regards,
    Yigit

    June 10, 2017 at 6:47 am #806283
    0_o

    Hi Yigit! I’m attaching link to another site – in it’s popup (on mobile phone) you can scroll the popup content, but it wont scroll the page in the back.
    Is there a way to do it on my site too?

    Thanks again!

    June 13, 2017 at 2:21 pm #807474
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 768px) { 
.white-popup { min-height: 740px; }}

    Best regards,
    Yigit

    June 13, 2017 at 2:46 pm #807487
    0_o

    Hi Yigit,
    The problem is not with scrolling the popup, but scrolling the page on the back of the popup (the grayed-out area).
    That doesn’t happen on mobile browsers but does on mobile browsers.
    Also, it doesn’t happen on resized (small) desktop browser windows, and not on other websites I saw (although not running WordPress) so I know there is some solution for it.

    June 16, 2017 at 7:12 pm #809050
    Basilis

    Hi,

    I am really sorry but would you mind rephrase your last saying please?
    Thank you

    Best regards,
    Basilis

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.