Web Dev Tuts

/ Stuffs About Website Development /

Menu
  • Home
  • Wp Plugins
  • How To
  • FAQ
    • GIT
    • JQuery
    • PHP
    • WooCommerce
    • WordPress
  • Contact Us
Menu

How to Create a Lightbox

Posted on June 24, 2016September 24, 2017 by admin

To make it easy for me to create lightbox for any web development projects, I made the simple lightbox function that you can I can easily add and call.

Step 1: Copy the scripts below to your javascript file.

jQuery.fn.smplLightbox = (function(trigger /*, ... */){
$ = jQuery;
id = 'smpl-lb-' + trigger.substr(1);

html = '
<div id="' + id + '" class="smpl-lightbox">
<div class="smpl-lightbox-inner">
<div class="smpl-lightbox-inner2">
<div class="smpl-lightbox-box"><a class="smpl-lightbox-close" href="#">x</a>
<div class="smpl-lightbox-box-inner"></div>
</div>
</div>
</div>
</div>
';

$('body').append(html);
$(this).appendTo('#' + id + ' .smpl-lightbox-box-inner');

$(trigger).attr('rel', id).click(function(){
id = $(this).attr('rel');
$('#' + id).css('display', 'block');
return false;
});

$('#' + id + ' .smpl-lightbox-close').click(function(){

$(this).parents('.smpl-lightbox').css('display', 'none');
return false;
});

css = '#' + id + ' {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .8); z-index: 99999; display: none;} .smpl-lightbox-inner { display: table; table-layout: fixed; width: 100%; height: 100%; } #' + id + ' .smpl-lightbox-inner2 { display: table-cell; vertical-align: middle; } #' + id + ' .smpl-lightbox-box { background: #fff; border: 2px solid #aaa; box-sizing: border-box; margin: 0 auto; max-width: 90%; padding: 20px 0 20px 20px; position: relative; } #' + id + ' .smpl-lightbox-box-inner { overflow-y: auto; height: 100%; } #' + id + ' .smpl-lightbox-close { position: absolute; right: 10px; top: 10px; color: #000; font-weight: bold; }';

$('body').append('

');
});

Step 2: Create the contents of your lightbox, e.g:

<div class="mylib">contents here</div>

Step 3: Call the lightbox function.

$jx('.mylib').smplLightbox('#button');

Where .mylib is the class name of your div in Step 2.#button is the id of the trigger. If the user clicks on the trigger, the lightbox will appear.

Category: Javascript

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • How to add wp_editor Dynamically
  • How to Hide Certain Pages from Certain Users (WP Dashboard)
  • How to Set Up Gmail SMTP
  • How to Set Up Virtual Host in Localhost & Xampp
  • How to Determine the Current WordPress Version Used
  • AngularJs
  • CSS
  • For Me Only
  • geo location api
  • GIT
  • GoDaddy
  • Hosting
  • How To
  • Javascript
  • JQuery
  • Magento
  • My Notes
  • PHP
  • Private
  • Sass
  • WooCommerce
  • Wordpress
  • Xampp
© 2023 Web Dev Tuts | Powered by Minimalist Blog WordPress Theme