Support Center Visit Demo License manager Buy @ envato

Text link to image popup

sarahpellersarahpeller
in Shortcodes
Hi there,

I'd like for some text on my homepage to open a popup of an image with a subtitle/caption when you click on the text link. Is this possible to do with the shortcodes? The spot where I'd like to add a popup of an image is already appearing in a "Flat Box", so I can't use the content blocks or elements to add this feature. 

The spot where I'd like to add this is on www.soakonthesound.com
In the OFFERINGS section on the homepage, there are 3 Flat Boxes. The last one says PRIVATE SOAK & SAUNA SUITE. See the bold text below that says "Salt Therapy"? That is the text that I'd like for the viewer to be able to click on to see a pop-up that shows the image of the salf therapy nook with a little description.

Can this be done?

Thanks,
Sarah

Comments

  • PabloPablo
    Hello Sarah,
    Please take a look at this documentation:

    I know, in the documentation there is an example with button, but you can change that [button] to <a> tag.
    After doing that, copy the "link", "target" and "rel" attributes to the <a> parameter, and insert inside that tag content.
    Be aware, not all of the shortcodes will work in that case (flatbox won't work, I tested it), that's why we suggest to build your own content inside the <a> tag ;)

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    I don't  think I quite understand... I tried this, but I  definitely have something wrong:

    <a link="SALT THERAPY NOOK" target="_blank" rel="lightbox">Salt Therapy Nook</a></strong> & a shower with natural body-care products

    <div id="SALT THERAPY NOOK" style="display: none;">Salt Therapy</div>

    Also,  where would I enter the photo link  that I want to appear in  the  lightbox?
  • PabloPablo
    You should not use the blank spaces in the link attribute and your link should be linked to id, like anchor (#)
    There is my fault too, because I told you about the "link" and it should be like in normal link "href".
    About the image, you can insert the <img> tag or [image] shortcode inside the content of the popup/lightbox.
    See the working code below:
    <a link="#salt" target="_blank" rel="lightbox">Salt Therapy Nook</a> & a shower with natural body-care products
    <div id="salt" style="display: none;">< img src="https://soakonthesound.com/wp-content/uploads/2020/08/infrared1.jpg"/>Salt Therapy</div>
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    Thanks! But I don't think it worked... On  the homepage, you can see that there still is not link to click on... What did I do wrong? Here's the exact text that I typed  into the Flat Box:

    Enjoy 90 minutes of complete ahhhhhh Including our largest Salt-Water Soaking Tub, large Finnish Steam Sauna, a private 

    <a link="#salt" target="_blank" rel="lightbox"><strong>Salt Therapy Nook</strong></a> & a shower with natural body-care products
    <div id="salt" style="display: none;">< img src="https://soakonthesound.com/wp-content/uploads/2020/09/Salt-Nook.jpg"/>Salt Therapy</div>
  • PabloPablo
    Well, it will not work in this item - what I mean, it will not be opened in the lightbox.
    You have to insert it in the column item to make it work :(
    Create two wraps, insert the feature box in first one and in second the column items :)

    Also, there is a problem with your <a>, it's still "link", not "href"
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    :-(
    I tried that, and it worked better. I was able to click on the linked text and a lightbox opened!

    But, the lightbox just had this text in it:



    Is there any way to get the column text to line up the same as the first 2 flat boxes are? With the paragraph indented a bit to the right?
  • PabloPablo
    Remove the space after "<" and it will work fine :)
    You want to remove the yellow space, right?

    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • sarahpellersarahpeller
    Ok. Getting closer!

    I took that space out and now it does display the lightbox! But the lightbox is oddly stuck to the right side of the page and the border  of the lightbox doesn't surround the image, it  gets cut off in the middle. See here: https://soakonthesound.com/home-3/
    The password to view the page is BeTheme2020

    In regards to the yellow space that you pointed out in the screen shot, I would like to ADD that yellow space under this flat  box about the Salt Therapy Nook, so that it matches all of the other flat box layouts. Can I do that somehow? 


  • PabloPablo
    1) About the image, you should upload smaller image, but you can change that behavior and make all of the images fit in this popup using this CSS code:
    .mfp-inline img{max-width:100% !important;}


    2) You can do that by adding in the "Custom Styles" of the column with the description this small CSS code:
    But, on mobile it might look ugly, so you should insert the "Custom Class" and style it, to display that margin-left attribute on desktop only, using the media queries.

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.