[Resolved] Linking to an external image viewer…

Home Forums Support [Resolved] Linking to an external image viewer…

Home Forums Support Linking to an external image viewer…

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #637247
    Craig

    This could be a noob question, please do not tar and feather.

    But, I am trying to create an experience where my user can view the image viewer on this URL:

    https://v360.in/viewer4.0/vision360.html?d=VETRING1&surl=https://s4.v360.in/images/company/289/

    By creating a pop-up / lightbox (or similar) on the Woocommerce product page. Or, by just allowing the visitor to click on a link to view the link in a pop-up window.

    I’m sorry if I am missing something obvious, thank you!

    Craig

    GP Premium 1.6.2
    #637325
    David
    Staff
    Customer Support

    Hi Craig,

    so the easiest way to display other content form another site is to use a iFrame.

    This would be the HTML for your iframe, link included:

    <div class='embed-container'><iframe src='https://v360.in/viewer4.0/vision360.html?d=VETRING1&surl=https://s4.v360.in/images/company/289/' style='border:0'></iframe></div>

    The we can add some CSS to style it – you can add this to the Customiser > Additional CSS or your Child Theme Style sheet if you have one:

    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }
    
    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    You could just add the HTML to your product description and see if it works 🙂

    If you want it in a pop up or in a modal window the next step would be to get a plugin that allows you to add an iframe and create a button shortcode that you add to the description.

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