skip to main content

Ryan Hettler

Landscape Design Group

Landscape Design Group’s new website displays photos of their sceneries from different areas in Pennsylvania. The responsive website’s build incorporates HTML5, CSS3, jQuery, PHP, and MySQL.

Project Takeaways

CSS Pseudo Element

One huge project takeaway was utilizing the before pseudo element without the extra markup to integrate the magnifying glass on the thumbnail images.

Below is some sample markup of the HTML and CSS demonstrating the pseudo element on Landscape Design Group:

HTML

<div class="col-sm-6">
   <a href="#url" class="max-450 pushproject glow">
        <strong class="img-title">
             Dollington Residence
        </strong>
        <img src="/cmsadmin/uploads/thumb/1_002.jpg" width="500" height="335" alt="Dollington Residence" class="img-responsive"> 
   </a>
</div>

 CSS

a.max-450::before { 
    content: '';
    position: relative;
    right: -50px;
    top: 50px;
    display: block;
    width: 100%;
    max-width: 360px;
    height: 30px;
    z-index: 50;
    margin: 0 auto;
    background-image: url(../images/zoomin.png); 
    background-position: right bottom;
    background-repeat: no-repeat;
}

The mark up above prevents adding in an extra element or  image tag. Sample code has been provided to illustrate what the above markup is doing behind the scenes:

<div class="col-sm-6">
   <!-- Zoom image is inserted right here. -->
   <a href="#url" class="max-450 pushproject glow">
        <strong class="img-title">
             Dollington Residence
        </strong>
        <img src="/cmsadmin/uploads/thumb/1_002.jpg" width="500" height="335" alt="Dollington Residence" class="img-responsive"> 
   </a>
</div>

The above markup is extremely clean and easy to read in lieu of:

<div class="col-sm-6">
   <img src="../images/zoomin.png" width="30" height="30" /> 
   <a href="#url" class="max-450 pushproject glow"> <strong class="img-title"> Dollington Residence </strong> <img src="/cmsadmin/uploads/thumb/1_002.jpg" width="500" height="335" alt="Dollington Residence" class="img-responsive"> </a> 
</div>

OR

<!-- HTML -->
<div class="col-sm-6">
   <div class="zoomin"></div>
   <a href="#url" class="max-450 pushproject glow"> <strong class="img-title"> Dollington Residence </strong> <img src="/cmsadmin/uploads/thumb/1_002.jpg" width="500" height="335" alt="Dollington Residence" class="img-responsive"> </a> 
</div>

/* CSS*/
.zoomin{
    position: relative;
    right: -50px;
    top: 50px;
    display: block;
    width: 100%;
    max-width: 360px;
    height: 30px;
    z-index: 50;
    margin: 0 auto;
    background-image: url(../images/zoomin.png); 
    background-position: right bottom;
    background-repeat: no-repeat;
}

Both of the above approaches requires extra markup in the HTML and CSS. By utilizing CSS Pseudo Elements, html markup will be cleaner and easier to read. The cleanliness and readability of markup and code should always be a web developer’s priority.

Chocolat: a responsive lightbox solution

Chocolat, a simple responsive lightbox solution, was used to display the images on this website. Chocolat may not be able to load videos, maps, or iframes into the DOM, e.g., Magnific Popup; However, these features were not necessary in this project.

The jQuery code below demonstrates how the Chocolat lightbox was called. The title tags were removed on hover to prevent the yellow box from showing up. However, when clicked, the title would show up in Chocolat’s Lightbox:

$('#ldg-images').Chocolat({
 loop : true,
 fullWindow : false,
 overlayOpacity : 0.8
 });

 $(".chocolat-image").hover(function(){

 // Get the current title
 var title = $(this).attr("title");

 // Store it in a temporary attribute
 $(this).attr("tmp_title", title);

 // Set the title to nothing so we don't see the tooltips
 $(this).attr("title","");
 
 });

 $(".chocolat-image").click(function(){// Fired when we leave the element

     // Retrieve the title from the temporary attribute
     var title = $(this).attr("tmp_title");

     // Return the title to what it was
     $(this).attr("title", title);
 
 });

 

Visit website

Landscape Design Group Tagged with: