Photo Swivel

Published by Guest Author

The following is a guest post by Alex Young (@the_alexyoung). Alex has created a simple technique to "rotate" the subject of a photo simply by hiding and showing multiple stacked photographs taken at different angles. Enjoy!

Web designers and developers have always fascinated us with fun and engaging ways we interact with their websites. I love discovering new techniques that these designers/developers have come up with. One technique in particular that sparked my interest is something that I saw on Warby Parker’s website. They were able to create a cool effect where model follows the user’s mouse, showing off the different angles of the frames.

I’ve seen this technique mainly used for showing off sunglasses, but I’m interested to see what you guys can come up with for other real-world applications.

Before we begin, you will need a few things. Well, seven things to be exact. You are going to need seven photos of something taken at seven different angles.

HTML Setup

What we are setting up is a container called “faces”, then have created an area that we are going to use to display the photos – “face-area”. We also have a div to hold each of the seven individual images.

<div id="faces">

  <div id="face-area">

    <div id="image-1" style="display: none;">
      <img src="/images/look-left-3.jpg">
    </div>

    <div id="image-2" style="display: none;">
      <img src="/images/look-left-2.jpg">
    </div>

    <div id="image-3" style="display: none;">
      <img src="/images/look-left-1.jpg">
    </div>

    <div id="image-4" style="display: none;">
      <img src="/images/look-center.jpg">
    </div>

    <div id="image-5" style="display: none;">
      <img src="/images/look-right-1.jpg">
    </div>

    <div id="image-6" style="display: none;">
      <img src="/images/look-right-2.jpg">
    </div>

    <div id="image-7" style="display: none;">
      <img src="/images/look-right-3.jpg">
    </div>

Now we'll create a div that is going to do exactly what the name implies. It is going to lay on top of the other div. We can divide this div into 7 small columns and divide them equally across it. These 7 columns will be used to listen for when the mouse is hovering over that specific one. Adding “data-number” to each div will allow us to refer to each in jQuery later on.

    <div id="the_faces_overlay">
      <div class="the_faces" data-number="1"></div>
      <div class="the_faces" data-number="2"> </div>
      <div class="the_faces" data-number="3"></div>
      <div class="the_faces" data-number="4"></div>
      <div class="the_faces" data-number="5"></div>
      <div class="the_faces" data-number="6"></div>
      <div class="the_faces" data-number="7"></div>
    </div> 

  </div><!-- END #face-area -->

</div> <!-- END #faces --> 

CSS Setup

Most of the CSS is pretty self-explanatory. There is one thing I need to mention that is important, make sure that the 7 columns fit perfectly together across the span of the div.

body {
  background: #333 
}

#faces {
  height: 333px;
  width: 500px;
  margin: 0 auto;
  border: 8px solid white;
}

#face-area {
  height: 500px;
  width: 333px;
  position: relative;
}

#the_faces_overlay {
  position: absolute;
  width: 500px;
  top: 0;
  left: 0;
}

#faces .the_faces {
  height: 333px;
  width: 14.2857143%;
  float: left;
  margin: 0;
  padding: 0;
}

jQuery Setup

We need to listen for when each of the columns are hovered over. This is where those “data-numbers” come in handy. If we wanted to add more columns down the road we wouldn't have to add any more JavaScript.

// Reveal the "center" image
var centerImage = $("#image-4").show();

// Bind hovers to each column
$(".the_faces").each(function() {

  $(this).on("mouseover", function() {
  
    $("#image-" + $(this).attr("data-number")).show();
  
  }).on("mouseout",function() {
  
    $("#image-" + $(this).attr("data-number")).hide();

  });
  
});

// Reset center image
$("#face-area").on("mouseleave", function() {
  centerImage.show();
}).on("mouseenter", function() {
  centerImage.hide();
});

Tada!

Check out this Pen!

There you have it! Now you have your very own, head turning model. Use it to show off your very own products. There are tons of uses for this out there. Let me know what you come up with.

Editor's note: this would be a fun demo to work on adding touch support, wouldn't it? Follows a swipe or something.