Most of this is standard practice for most everyone.
My employer has been in business online for over 20 years. They are a small business, and not everyone has time or resources to stay on the cutting edge of everything. This is natural and they really do work hard with what they have.
I have long been the company advocate for clean, future-proof, and W3C complaint code. There are times when they ask me to reign it in, and I do. Again, I respect that every project has different needs and everyone at the business has different strengths.
There are times when they set me loose on a project, and I gleefully take care of business. This is a lot of happiness about one of those times.
Before going into detail: I am already thinking of several ways this could be made better. My happiness comes out of cheerfully writing code for a couple of hours instead of cheerlessly editing code for a couple of days.
My setup is Windows 7 Professional, three monitors, Atom text editor, Bootstrap framework, SASS maintained through Koala, and a third party web host. Node/npm isn’t an option this time around. In fact, I’ll probably have to stop using SASS the moment anyone else changes the stylesheet. But, for getting these sites set up, it’s a dream come true.
My manager had a concern. When clicking a product image, the end-user will be taken off of the page to view the image. Is there any way to instead display the image over top of the page?
In the old days, the answer would have been to go through each product image one at a time, replace the href="" attribute with some form of javascript, maybe write a function for it to call, or maybe just write all of the code inline. Then go to the next image, and do the same.
That would have looked like finding every line such as
<a href="/images/large/image.jpg"><img src="/images/small/image.jpg"></a>
And replacing it with some form of:
<a href="#" onClick='DisplayLargeImage("/images/large/image.jpg")'><img src="/images/small/image.jpg"></a>
In the past, I would have looked through a few thousand lines of code for every instance. I have done just that.
Today, it’s nicer. My code is set up like this.
<div class="product-row">
<div class="product-image">
<a href="/images/large/image.jpg"><img src="/images/small/image.jpg"></a>
</div>
<div class="product-info">
<h2>headline text</h2>
<p>Information</p>
</div>
</div>
While not perfect, that .product-image class just saved me days of work and headaches. It saved my boss money. It made today a lot of fun.
The Nuts and Bolts of Today
New Jquery:
<script>
var $FadeSpeed = 600; /* Fade in and out, in milliseconds. Change to make faster or slower */
/* Add the necessary div for the lightbox */
$(document).ready(function() {
$("#FullPageContainer").append('<div id="FancyNewLightBox"><h2 id="FancyNewLightBoxHeadline"></h2></div>');
});
/* Begin code to find & show the lightbox + image when clicked */
$("#FullPageContainer").on("click", ".product-image a", function(e) {
var $ThisLink = $(this).attr('href');
$("#FancyNewLightBox").css('background-image', 'url(' + $ThisLink + ')');
/* Begin Add Headline */
var $picParent = $(this).closest("div.product-row");
var $picHeadline = $picParent.find("h2");
$("#FancyNewLightBoxHeadline").text($picHeadline.text());
/* End Add Headline */
$("#FancyNewLightBox").fadeIn($FadeSpeed);
e.preventDefault();
});
/* End code to find & show the lightbox + image when clicked */
/* Begin Close the lightbox area when clicked. */
$("#FullPageContainer").on("click", "#FancyNewLightBox", function() {
$("#FancyNewLightBox").fadeOut($FadeSpeed);
});
/* End Close the lightbox area when clicked. */
</script>
As an afterthought, I was even able to quickly write code that displays each product’s title over the large-view image. That is the code in the Add Headline section.
Finally, a little CSS. SASS will add it to all five sites requiring the code.
/* Begin code fancy-new-lightbox */
div#FancyNewLightBox {
background-color: #404440;
background-color: rgba(64, 68, 64, 0.875);
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
display: none;
z-index: 1001;
}
h2#FancyNewLightBoxHeadline {
color: #fff;
width: 100%;
text-align: center;
}
/* end code fancy-new-lightbox */
When I return to work, I plan to add an [X] to the top right corner.
I’ll openly confess that some of this is inefficient. But I’ll happily gloat because taking the time to write the code
Andrew, Why Are You Bragging?
I solved half of this problem before I knew it existed.
When I designed the template, I also looked ahead. “At some point, I may need to manipulate what is happening with these images.” “At some point, perhaps the headline text will need to change appearance.”
Now I don’t need to dig through code by hand. Now I can even display useful text along with the image overlay. Now I can actually have fun, save time, and save my employer money. Now the same HTML will work, minus one function, across any web site the CMS will send it to. Now my end of the code is still W3C valid. Now the image stills shows if, for some reason, the javascript is disabled.
Half of this problem was solved by thinking ahead, anticipating changes, and writing code in anticipation of those changes.
One final thought: This is a nearly non-issue when working with Angular and React. For good and ill, I still need to write much of this code by hand.
In the “good” column, I love writing it.
He has worked as a level designer for a small online video game, as the grim reaper in a haunted house, and traded web design for concert tickets and tattoos.In years past, he could be found performing improvised comedy or stage magic in the south side of Austin, Texas.
- The Price of Kickstarter Tarot Decks - March 17, 2021
- Halfway Through My Facebook & Twitter Media Hiatus - September 24, 2020
- Moving My Social Media Presence - August 18, 2020