3D Product Display with a hover effect

It has been a long time since I last posted. But that doesn’t mean I haven’t created stuff in the mean time. For this post I have a 3D Product Display system. A simple menu on the left handed side and thumbnails in a 3D space on the right. Each link in the menu can represent multiple thumbnails. I’ll teach you how you can make something like this, but will not go into great detail on how the 3d space was created. I am saving that for another post.

You can see the final result on: My codepen

Clicking a link

When you click on a link in the left menu, it will of course light up. Just like a normal link would do. But it also raises certain thumbnails on the right side. This means that each link has a set of thumbnails it is associated with. There are multiple ways you could accomplish this, even without JavaScript. I choose to include jQuery as the project that this initially was going to be used in already had it loaded.

How can we tell the links in the menu what thumbnail to raise?

If you can count to 10, this step would be no problem. Go over to my codepen post and fork it. This enables you to make changes to my code and see it in action. For now we focus on how to set the thumbnails. In the code for the menu you can see an attribute called data-highlight=”1,3,5″ . What this means in English is: “Raise thumbnail number 1,3 and 5”. On the web we read from the top to bottom and from left to right. This means that the first thumbnail that is present in the code will be raised. And so on for number 3 and 5.

<ul class="productlist">
  <li><a data-highlight="3,4,5">webdesign</a></li>
  <li><a data-highlight="1,6,7">wapdesign</a></li>
  <li><a data-highlight="2,4,8">icondesign</a></li>
  <li><a data-highlight="9,4">videodesign</a></li>
  <li><a data-highlight="2,4,6,9">papierdesign</a></li>
</ul>

But I can also click on the thumbnails!

True, what better way to show off you product and have it highlight all the key features on the left side. Or if you show off your portfolio to see under what categories it falls.

The way this is set up is essentially the same as for the menu links. You have a data-highlight attribute with numbers. These numbers represent the index of the menu items. So if the number 1 is entered in the data-highlight attribute, the first menu item will be made active. It’s that simple.

How does this work?

Whenever a link is clicked, be it the menu link or the thumbnail a script is fired. This script extracts the data-highlight attribute from the clicked element. It splits the string it extracted and creates a loop for all the entry’s. But first it will reset all cards and links to their default positions.

$(".productlist li a").click(function() {
  $(".productcard .card").removeClass("active");
  $(".productlist li a").removeClass("active");
  $(this).addClass("active")
  var sHighlight = $(this).attr("data-highlight");
  
  var aHighlight = sHighlight.split(",");
  var arrayLength = aHighlight.length;
  
  for (var i = 0; i < arrayLength; i++) {
    $(".productcard .cardc:nth-child("+aHighlight[i]+") .card").addClass("active");
  }
});
$(".productcard .card").click(function() {
  $(".productcard .card").removeClass("active");
  $(".productlist li a").removeClass("active");
  $(this).addClass("active");
  var sHighlight = $(this).attr("data-highlight");
  
  var aHighlight = sHighlight.split(",");
  var arrayLength = aHighlight.length;
  
  for (var i = 0; i < arrayLength; i++) {
    $(".productlist li:nth-child("+aHighlight[i]+") a").addClass("active");
  }
});

With the use of the handy nth-child()  (more info) css psuedo-selector we can count elements in the source code. So for example, we have clicked on an element with one entry in the data-highlight attribute. For this example let’s say it has 5 as a value. The script would generate the following line of javascript:

$(".productcard .cardc:nth-child(5) .card").addClass("active");

This means, that in the thumbnails the fifth card will get an active class.

It’s that easy, and you can extend this concept to many more places. Now I can hear you thinking, what if the order changes. Or if I have to make changes I have to count every card, every time. True and all of this will be a pain in the bottom, but this script was created as a proof of concept. It can easily be made more manageable with labels. Which shouldn’t be that hard to implement. But that is not what this post is for. See you next time!