Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #214381

    Hey there,

    i would love to be able to set the Link of buttons or slides to display in an iframe/lightbox.

    See my link: http://www.virtuelle-touren.de/portfolio-eintrag/lippeschutz-bevoelkerungsschutz-kreis-lippe/
    I would love to make the tour (linked in the Slider) open in an iframe such as the Link “PC/Desktop: Tour öffnen” wich is on the same page a little way down.

    How can i do that?

    • This topic was modified 10 years, 1 month ago by Arne.
    #215226

    Hi Campleiter!

    You can’t link the entire/slide image to an lightbox iframe popup. However you can select “Slide Link?” – “No Link” and then insert your iframe link into the slide title or description field (both fields support html code). The link must look like

    
    <a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>
    

    and replace http://www.google.com with your url and the title and link text with your custom text. Note that you can not use the slide itself as a link if you add a link to the title/description field . otherwise you would add a link to a link and that’s not a valid html code.

    Regards,
    Peter

    #282842

    Hi Peter,
    Can you shed some light – why this does not work for a google map ?

    <a href="http://maps.google.com.au/maps?q=new+york&hl=en&sll=43.299428,-74.217933&sspn=6.571804,14.765625&hnear=New+York,+New+York+County,+New+York,+United+States&t=m&z=10&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="New York Map">New York Map</a>

    even short url does not work
    <a href="http://goo.gl/maps/ShS5K?iframe=true&width=640&height=360" rel="prettyPhoto[iframes]" title="New York Map">New York Map</a>

    The lightbox opens but no content is loaded into the iframe

    I have even checked out the authors website :: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone

    Is there another way within ENFOLD theme to have a google map open in a lightbox from a button or link ?

    #283527

    Hey!

    Google forbid the use of iframe for google maps: http://tech.slashdot.org/story/11/10/23/1949227/google-not-reciprocating-on-iframe-usage

    Cheers!
    Ismael

    #283573

    Hi Ismael,

    thanks for the reference blog which mentions embedding a google map
    it only took 5 min to workout the embed and test!

    It took much longer to write these instructions ;)

    You can open a google map in a lightbox iframe as long as your google map url reference includes “&key= ” a google map API key.

    https://developers.google.com/maps/documentation/embed/guide#api_key

    https://console.developers.google.com/
    login with your google account
    Create a project – “website domain name”
    on the left menu
    APIS &AUTH / APIs
    enable :: Google Maps Embed API
    on the left menu
    APIS & AUTH / Credentials
    Create new Key / Browser Key “This key can be deployed in your clients’applications.”
    Enter the domain name of your clients website
    A Public API Access key is generated.
    copy the API KEY
    GO HERE :: https://developers.google.com/maps/documentation/embed/start
    setup your map / looks good!
    paste your API KEY
    click DONE!
    Copy the <iframe code

    you can use the <a href=”https://
    for your lightbox

    don’t forget to add the “&iframe=true&width=100%&height=100%” to the end or the URL address

    see example below ::

    <a href="https://www.google.com/maps/embed/v1/place?q=New%20York%2C%20NY%2C%20United%20States&key=apikeyhere&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="New York Map">New York Map</a>
    

    cheers :)

    #283940

    Hi!

    Thanks for sharing the instructions!

    Cheers!
    Peter

    #533028

    You can also embed using an iframe without the API as Google fully allows it. I use it all over my travel website.
    Here is some sample code
    <iframe src="https://www.google.com/maps/d/embed?mid=zkPgKhjKqT-I.kt828za9IaU0" width="460" height="490"></iframe>
    Works great and is responsive depending on how you use it.

    Thanks for the heads up on the light box method

    #534830

    @millertimesites
    Thanks for sharing!

    Regards,
    Andy

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Open link in Lightbox/iframe’ is closed to new replies.