Can I create a CSS JavaScript Lightbox popup?« Back to Questions List

I'd to be able to add lightbox code, or something that allows for popup videos from an image or link within the PSD opposed to doing it later in dreamweaver.

Once I learn from your examples I'll be able to add other external code.

Added December 28, 2014 5:00 am

Do you have the right answer? If you do other users will benefit from your contribution, share your knowledge with the community!

Yes you can!

You will need to ”tell” Export Kit how to handle some elements, and use a little bit of CSS and JS to do this directly in Photoshop.

Step 1:

You will need to create a click event, or something to trigger the lightbox. In this case we are using onclick with a custom div. Use our ${class} tag to create the following 2 click events:

${class|div:onclick="open_lightbox()"} open lightbox
${class|div:onclick="close_lightbox()"} close lightbox

These click events will (a) show/hide the lightbox, and (b) prevent the user from click elements under the lightbox.

Step 2:

In Exports Panel > Customize > Custom HEAD, add this:

<style type="text/css">
#lightbox {
     display: none;
     position: fixed!important;
     z-index:99;
     overflow: hidden;
     top: initial!important;
     left: initial!important;
}
#lightbox_bg{
     display: none;
     position: fixed!important;
     top: 0!important;
     left: 0!important;
     width: 100%!important;
     height: 100%!important;
}
</style>
<script type="text/javascript">
function open_lightbox(){
     document.getElementById('lightbox').style.display='block';
     document.getElementById('lightbox_bg').style.display='block';
}
function close_lightbox(){
     document.getElementById('lightbox').style.display='none';
     document.getElementById('lightbox_bg').style.display='none';
}
</script>

This will render the required CSS for the background element and the lightbox container. The logic is the background will (a) fill the screen, aka 100% width and height; and the lightbox will (b) display on top of the background when called.

Note: We are using the ID of the layer in JavaScript for quick reference.
Note: The light box will display AS-IS, meaning the position you place the lightbox in your PSD, is the position it will render on screen.
Eg. You should place your lightbox relative to the top of the PSD design, which will render at the top of the user screen.  If you place your lightbox content too low in your PSD design, the user may need to scroll to see the lightbox content.
Warning: Hide Overflow will have NO EFFECT on fixed elements. You must size the fixed content per your project requirements.

Advanced

You can turn the external CSS and JS into a module for use with any PSD project. Watch our virtual scripts tutorial for more details.

Download the PSD template

We included a PSD template file with basic elements to demo a lightbox CSS JS popup.

Answer by admin
Answered On December 29, 2014 1:47 am #
Looking for another answer? View other questions in Image or get premium support for guaranteed results.
Asked by Freethink★★★
2762 views
1 answer
Last Answered 7 years ago by admin

Categories

Recent Answers

asked by alindagiri
asked by elsymgomez
asked by Amos
asked by rjanairo
[+] View All Recent Questions

Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.