Skip to main content
kineticcreative123
kineticcreative123
Inspiring
February 5, 2018
Answered

Having trouble adding lightbox feature to responsive menu item

  • February 5, 2018
  • 2 replies
  • 3585 views

Hi Everyone,

I'm having trouble figuring out how to add a lightbox feature to a mobile menu. I have the lightbox built and working on its own but can't figure how to incorporate it into my responsive menu without breaking everything. I'm not looking for anything fancy. Just a lightbox feature that can open a url.

This is my menu:

untitled document

This is my lightbox:

http://offers.premierinc.com/header_lightbox.html

    This topic has been closed for replies.
    Correct answer osgood_

    Hey there

    Thanks for the reply. No I need the external webpage to open in a lightbox (MENU). Just like the working lightbox example. The other link "learn more" to go to another page inside the site like normal. The lightbox MENU is opening a table of contents where you can click a chapter and go to that page. Once you click a chapter the lightbox disappears and it goes to that URL in the parent window.

    I'm only using ION for specific assessments and ebook things. Once I have the header correct I can re-use the code. I am building landing pages and other mini sites that I would like to carry over the header outside of the ION platform.


    kineticcreative123  wrote

    Hey there

    Thanks for the reply. No I need the external webpage to open in a lightbox (MENU). Just like the working lightbox example. The other link "learn more" to go to another page inside the site like normal. The lightbox MENU is opening a table of contents where you can click a chapter and go to that page. Once you click a chapter the lightbox disappears and it goes to that URL in the parent window.

    So your document below IS now opening the the lightbox when you click on the MENU button, is the page which is coming into the lightbox your table of contents?

    untitled document

    OK I see what you mean that is the stupid Bootstrap classes causing confusion for you! Add the class 'open-lightbox' to the MENU link, like below:

    class="btn-nav open-lightbox" href="#">MENU</a></li>

    Then change the click function in the script to as below: (marked in red)

    <script>

    $(document).ready(function() {
    $('#page-overlay, #lightbox-wrapper').hide();
    $('.open-lightbox').click(function(){
    $('.lightbox-content').html("    <div class='close'>&times;</div><iframe width='100%' height='390' src='http://www.premierinc.com' frameborder='0' allowFullScreen></iframe>");

    $('#page-overlay, #lightbox-wrapper').fadeIn();
    });
    $('.close, #page-overlay').css('cursor','pointer').click(function() {
    $('#page-overlay, #lightbox-wrapper').fadeOut();
    });
    });
    </script>

    2 replies

    O
    osgood_
    Legend
    February 5, 2018

    You already have a part lightbox on your page - remember we created for your other project?

    Delete the below script at the foot of the page:

    <script>

    $(document).ready(function() {
    $('#page-overlay, #lightbox-wrapper').hide();
    $('.show_video').click(function(){
    $('.view_video').html("    <iframe width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

    $('#page-overlay, #lightbox-wrapper').fadeIn();
    });
    $('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {
    $('.view_video').html('');
    $('#page-overlay, #lightbox-wrapper').fadeOut();
    });
    });
    </script>

    Then replace it with the code below (you can move the css to an external link or to the top of the page) I'm not really sure what all that other rubbish is in your page?

    <style>

    #page-overlay{

    position: fixed;

    left: 0px;

    top: 0px;

    height: 100%;

    width:100%;

    background: rgba(0, 0, 0, 0.8);

    }

    #lightbox-wrapper {

    height: 100%;

    width: 75%;

    margin: 0 auto;

    }

    @media screen and (max-width: 768px) {

    #lightbox-wrapper {

    width: 80%;

    }

    }

    @media screen and (max-width: 480px) {

    #lightbox-wrapper {

    width: 95%;

    }

    }

    #lightbox-wrapper .lightbox-content {

    position: relative;

    top: 50%;

    transform: translateY(-50%);

    background-color: #fff;

    text-align: center;

    }

    .close {

    position: absolute;

    right: 0;

    top: -60px;

    font-size: 40px;

    color: #fff;

    }

    </style>

    <script>

    $(document).ready(function() {

    $('#page-overlay, #lightbox-wrapper').hide();

    $('.btn-nav').click(function(){

    $('.lightbox-content').html("<div class='close'>&times;</div><iframe width='100%' height='390' src='http://www.premierinc.com' frameborder='0' allowFullScreen></iframe>");

    $('#page-overlay, #lightbox-wrapper').fadeIn();

    });

    $('.close, #page-overlay').css('cursor','pointer').click(function() {

    $('#page-overlay, #lightbox-wrapper').fadeOut();

    });

    });

    </script>

    <div id="page-overlay">

    <div id="lightbox-wrapper">

    <div class="lightbox-content">

    </div>

    <!-- end lightbox-content -->

    </div>

    <!-- end lightbox-wrapper -->

    </div>

    <!-- end page-overlay -->

    kineticcreative123
    kineticcreative123Author
    Inspiring
    February 5, 2018

    Thanks osgood. Thats right I used that youtube lightbox. That project dropped off and i forgot that you helped me with that. Your code is working but the lightbox is applied to all the links in the header not just the "menu".   How would I be able to get "learn more" to open a url in the parent window not the lightbox?

    I cleaned up some of that code crap that wasn't being used.

    Thanks man!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 5, 2018

    kineticcreative123  wrote

    How would I be able to get "learn more" to open a url in the parent window not the lightbox?

    With AJAX.

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 5, 2018

    I'm not sure what your goal is.   The shortest distance between 2 points is a straight line:  click menu,  open URL.  No Lightbox required.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    kineticcreative123
    kineticcreative123Author
    Inspiring
    February 5, 2018

    I need a lightbox to get around pop up block. basically it's acting like a table of contents for an ebook/website. I don't want it to be a pop up window.

    O
    osgood_
    Legend
    February 5, 2018

    What, you want the modal window to appear on page load, no pop up link?

    Then just alter the script to as below:

    <script>

    $(document).ready(function() {

    $('.lightbox-content').html("<div class='close'>&times;</div><iframe width='100%' height='390' src='http://www.premierinc.com' frameborder='0' allowFullScreen></iframe>");

    $('#page-overlay, #lightbox-wrapper').fadeIn();

    $('.close, #page-overlay').css('cursor','pointer').click(function() {

    $('#page-overlay, #lightbox-wrapper').fadeOut();

    });

    });

    </script>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices