I was working on a site, it’s your standard WordPress site. I’ve worked with WordPress a long time and seen a lot of different scenarios. The client had this important image on their site that needed to be enlarged in a lightbox or modal, visitors just had a hard time reading small text. Of course you would think hey just use a bootstrap modal component. Well they didn’t have bootstrap installed – well they did but they were just parts of it based on another plugin they had installed. This would even further complicate things.
My second solution was to see if they had jquery installed – well of course they did. But is it in the header? In the footer? Some weird spot, yeah I’ve see that before. If it was in the footer where it ideally ought to be then we should be good right? Oh yeah by the way I haven’t even talked about writing the script – I’m looking for a good place to put the script first. Yeah, that’s this is just the first part. So I was thinking maybe I should just use a plugin for this – easy and get it over with. But why when I could write it all myself, so that’s what I did .
Well it looked like they had it in the footer – I was able to call it using Google Web Developer Tools Console. I get really excited when I see that jQuery is installed, gives me something to work with.
Google Web Developer Console
Where jQuery is usually placed
<html> <head> // sometimes jquery is placed here. </head> <body> // but preferably it should be placed here. </body> </html>
I was ready to get my hands dirty with jQuery and the image to enlarge within a lightbox. So I whipped up a pretty good script, just needed to sprinkle some id’s and classes here and there. Then with jQuery, attach them into memory and to event handlers. After all that is when the fun begins.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function() {
var modalSource = jQuery("#modalSource");
var modalImageSource = jQuery("#modalImageSource")
var closeModal = jQuery("#closeModal");
jQuery("#img-source").click(function(e) {
e.preventDefault();
modalSource.css("display", "block");
});
closeModal.click(function(e) {
e.preventDefault();
modalSource.css("display", "none");
});
});
</script>
Looks pretty clean, we just use that document ready event handler and wrap all the goodies inside of it. The click() event handler is attached to the image itself. And thank you jQuery for the css() method – we can style everything on the fly!
And then the css for styling…
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Nothing really fancy here except for it’s positioning. Setting the positioning to fixed or absolute will do the job. This allows for styling the modals positioning on the page, modify as needed.
Your HTML should look something like this, squeezed between your body tags.
<img id="img-source" src="image.jpg" height="200" width="200"> <div id="modalSource" class="modal"> <span id="closeModal" class="close">×</span> <img class="modal-content" id="modalImageSource" src="#"> </div>
HTML, Javascript/jQuery, CSS
Yeah if you know know these three alone and you’re starting out, you’ve already got some killer tools in your toolset. Of course you shouldn’t stop here I’m just saying this is a powerful trio to know. So keep on goin’.