0

I am creating map link on a image and it has two links to open video and contact form. I am making popup with lightbox but its not working. here is my code..

HTML

<div class="map">
    <img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg"/>
    <a href="#pop-up-form" id="pop-up-form" shape="rect" coords="31,572,499,1028" class="a lightbox"><?php echo do_shortcode("[contact-form-7 id='4' title='Registration Form']"); ?></a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
</div>

CSS

div.map {
    position: relative;
}

div.map > img {
    display: block;
    max-width: 100%;
}

div.map > a {
    display: block;
    position: absolute;
}

div.map > a:hover {
    background-color: rgba(255, 0, 0, .5);
}

div.map > a.a {
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
}

div.map > a.b {
    top: 0;
    left: 50%;
    width: 20%;
    height: 50%;
}

div.map > a.c {
    bottom: 0;
    right: 0;
    width: 20%;
    height: 50%;
}

#pop-up-form { display: none; }
  • What does not working means? The popup doesn't appear? the shortcode doesn't process? What is not working? – Sisir Mar 11 '14 at 9:04
  • Means contact form not popping up. – Kesar Sisodiya Mar 11 '14 at 11:21
  • What script are you using for lightbox? – Sisir Mar 12 '14 at 4:51
  • I am not using any script , I am using lightbox plugin – Kesar Sisodiya Mar 12 '14 at 6:50
  • which lightbox plugin you are using? Do you have a live example of the problem? That would Make it easier to see whats going on. – Sisir Mar 12 '14 at 7:50
0

So far I guess, you need the following corrections:

<div class="map">
    <img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg"/>
    <a href="#pop-up-form" shape="rect" coords="31,572,499,1028" class="a lightbox">Registration Form</a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
</div>

<?php //This should be a hidden DIV; ?>
<div id="pop-up-form" style="display:none"><?php echo do_shortcode("[contact-form-7 id='4' title='Registration Form']"); ?></div>
| improve this answer | |
  • It's not useful trick ! – Kesar Sisodiya Mar 12 '14 at 12:33
  • 1
    I have made a small change in your answer and i got the result. – Kesar Sisodiya Mar 13 '14 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.