product quick view
September 19, 2014 | 203 Feedbacks

Product Quick View

A 'product quick view' modal window, animated using CSS3 and Velocity.js, that provides the user a quick access to the main product information.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

There are some patterns in the e-commerce design world aimed at increasing the conversion rate by simplifying the user experience. Other patterns try to achieve the same goal by providing additional information where needed. The product quick view modal belongs to the second category.

The standard process is straightforward: click on the quick view button to fire a modal with additional information and a call-to-action button. By building our resource, we didn’t reinvent the wheel: at the end you still get the same result. We tried to enhance the transition from point A to point B though.

These days native applications are using the full power of the device and motion design notions to provide the best UX possible. The web needs to run at the same speed. There are great tools like Bounce.js by Joel Besada and Velocity.js by Julian Shapiro that can help you build smooth animations.

Getting back to our nugget, here is a quick animation to show you what we had in mind (.gif created in After Effects):

product quick view animation

Creating the structure

The gallery is an unordered list. The cool stuff happens into the .cd-quick-view <div>, which contains a slider (.cd-slider-wrapper) and the product information (.cd-item-info).

Adding style

First of all, the quick view effect is hidden on small devices. The reason being that on a phone it’s easier to access directly the product page.

That said, most of the animations have been created in jQuery using Velocity.js to avoid jank effects. The dark overlay layer was created by animating the body::after pseudo-element:

A lot of elements are animated or have a CSS3 transition. To keep a good performance we used the translateZ(0) hack on some of them (while we wait for the new will-change property to get more browser support).

No more CSS tricks worth mentioning. Let’s dive into jQuery!

Events handling

When user clicks the .cd-trigger element, we evaluate the top, left and width values of the gallery selected image and assign them to the .cd-quick-view element (which is in position: fixed). This way the .cd-quick-view has the same dimensions of the gallery image and completely covers it (meanwhile the gallery image is hidden using the .empty-box class).

We then animate the .cd-quick-view element. First step we animate the .cd-quick-view width to the sliderFinalWidth (this is a variable set to 400 in the .js file). This value represents the width of the slider image inside the quick view panel; we also animate the .cd-quick-view position (top and left values) so that it’s centered in the viewport (the height of the quick view panel is automatically given by the image slider height). Note that during this step, only the image slider is visible, while the rest of the quick view content is hidden.

Second step we change the .cd-quick-view width to its final value ( 80% of the viewport width, with a max value of 900 – defined by the maxQuickWidth variable) and change its position accordingly so that the panel is always centered.
After this second step, we assign the .add-content class to the .cd-quick-view to show its hidden content.

For the animation, we used Velocity.js, a plugin that re-implements jQuery’s $.animate() for significantly greater performance (if you’ve never used it, you should definitively give it a try!). We used the ‘spring’ easing for the first animation step, and the ‘ease’ for the second one.

When user closes the quick view panel, the reverse animation is performed (in this case, ‘ease’ is used for both animations).
One additional note: before closing the quick view panel, we update the galley image src value, this way it’s equal to the slider visible image.

Changelog

Oct 11, 2014
  • Bug fixed: slider not working with dynamically loaded content - by CodyHouse
Sep 30, 2014
  • Bug fixed: close quick view panel while it's loading - by CodyHouse
Sep 19, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Mirko

    Couldn’t come at a better time! I was just building my own quick view, but this one is definitely cooler :)

    • Mirko

      Maybe I overlooked something trivial, but how should I add product info for each product? I think it is hardcoded, but as I said, maybe I missed something obvious !

      • Claudia Romano

        Hi Mirko, in the demo we have used static data for the quick view panel. But you should retrieve product info using, ie, an ajax call (this way content is loaded only if required by the users).

        • Mirko

          Got It. Thanks!

  • http://marcusolsson.me Marcus Olsson

    Looks really cool! Will bookmark for the future.

    One minor typo though (hate to be “that” guy) – all the products say “Produt Title” ;)

    • http://codyhouse.co/ Sebastiano Guerriero

      Fixed!

  • http://sclausen.dk Søren Clausen

    Smooth! :) But it fails if you scroll during the animation.. Maybe you could work out a smart solution for that too :)

    • Claudia Romano

      Thanks for the heads up, we’ll work on that! :)

  • Francesca Fuladuf Primo

    It looks awesome! thank you for sharing!

  • http://prijm.com Hasan

    cant believe! amazing

  • http://www.gleenk.com/ Davide De Maestri

    Really nice! Congrats! :) But, what happens while resizing browser? Quick view link disappear on lower-res!

    • Claudia Romano

      Hi Davide, we hid the quick view on purpose. We thought that on mobile, it could make more sense to drive the user to the product page directly, rather than opening a quick view panel.

      • http://rodwyn.net63.net/ Rodwyn Moreno

        HI, logic is fine for mobile, but for tablet, How I can show the quick view link?

        • Claudia Romano

          Hi Rodwyn, the quick view is visible when viewport is larger than (or equal to) 1024px (so it’s visible if you test it on an iPad in landscape mode). If you want to show it on smaller screen, you need to change the media queries in the style.css file (or in the _layout.scss file if you use SASS). Hope this helps! :)

          • http://rodwyn.net63.net/ Rodwyn Moreno

            thanks

  • Efren Castillo

    Nice! Thanks.

  • Reza

    its awesome !!! thank you cluadia

  • Eric L. Tompkins

    wow! very cool!

  • http://afroniquelyu.com/ afroniquely | shae

    Very cool! I definitely think this would also be great for a portfolio, especially if it’s a one page portfolio, just swap add to cart for say view site/project. Thanks for sharing!

  • http://rodwyn.net63.net/ Rodwyn Moreno

    Hello. Great contribution. I want to have a title and a description for each item. How I can do that? I add a link to exemplify. http://rmoreno.comuv.com/product-quick-view/

    • Claudia Romano

      Hi, glad you like it! :)
      In the demo we have used static data for the quick view panel. But you should retrieve product info using, ie, an ajax call (content is loaded only if required by the users). This way you don’t have to create (and load) a quick view div for each product.

      • http://rodwyn.net63.net/ Rodwyn Moreno

        ;) you’re right

  • Pradeep

    How to add content for each product?

    • Claudia Romano

      Hi Pradeed,
      see reply to Rodwyn Moreno (right below). Hope this helps! :)

  • Zenin

    Can this be used without an image? if i wanted a div to animate into the popup, how could I achieve this?

    • http://codyhouse.co/ Sebastiano Guerriero

      You can, but you should set also a height (that in our resources is given by the image)

  • charbelrami

    Great! Thank you. The link “quick view” does not appear to me on hover, tested in Chrome and Firefox, using laptop with touch screen. It works in IE. Tested on another laptop without touch screen and it worked fine.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi, the problem is that with large devices we used modernizr to detect no touch devices and have the hover effect. Therefore a devices with a large screen, yet a touch device, won’t have any hover effect if you’re not using a mouse. We can fix this by detecting the touch property as well with modernizr and make the button always visible. Thanks for the heads up!

      • charbelrami

        Thanks for your reply!

  • http://kaberco.com/ Ali Master

    How can a list for each of the defined box.

  • Kantamani Tagargunti

    i am working on mobile appshow can i display the product image with good look on phone.. can u help me please

    • http://codyhouse.co Claudia Romano

      Hi Kantamani, we hid the quick view on mobile because we thought it would be better to drive the user to the product page directly, rather than opening a quick view panel. If you need it anyway, you can change the media queries in the style.css file (or in the _layout.scss file if you use SASS).

  • Erik

    What theme are using?

    • http://codyhouse.co Claudia Romano

      It’s a custom one! ;)

      • Erik

        I want also =)

  • karthikphp

    Hi
    I used the files all and in the anchor tag i added class, after in run the file its show error in js
    TypeError: image.offset(…) is undefined
    topSelected = image.offset().top – jQuery(window).scrollTop(),

    • http://codyhouse.co Claudia Romano

      Hi, do you have a live link?

  • Simon

    Hello – it’s really nice, great job. If you click the viewer and then outside during the animation it breaks. Keep up the great work, love all of your updates.

    • http://codyhouse.co Claudia Romano

      Fixed! Thanks for the heads-up ;)

  • http://www.example.com/ taylan

    This is awesome!

  • Dan Wareham

    Hey, this is great!! I understand the pulling of data via AJAX but how do you link the various quick view links to the individual products? I see now way of passing a product Id or anything…. What am I missing here? In the demo all the images pull the same quick view… Need to get this working for multiple products…. Thanks.

    • http://codyhouse.co Claudia Romano

      Hi Dan, glad you liked it! :)
      Actually you should always use the same quick view (div.cd-quick-view) element and update only its content (slider, title …). Hope this helps!

      • Uzair

        dear please tell me how can we add different content for each popup please tell me quickly

  • http://47hats.com Bob Walsh

    very nice effect – thanks for creating it.

  • http://lukespoor.me Luke Spoor

    Hey guys, how do I go about pulling in content via ajax? I’ve never used ajax before so wouldn’t know where to start.

  • Adi

    hey!! this worked…i just want a little modification!!
    I want to change the text content(product title/paragraph) also with image change!!!
    how can i do it? plz tell me!!!!!

  • Adi

    i never used ajax…please please please provide me with the code!!!!

  • http://lukespoor.me Luke Spoor

    Can you give us guys with no ajax knowledge at all a hand? I need to use this for individual products but have no clue where to start, even with the link provided below..thanks

  • Thomas Haberkorn

    Got it to run, very nice! However, as I’m new to the game, how do I add new content (images&text) to the individual cd-items ?

    • http://codyhouse.co Claudia Romano

      Hi Thomas, glad you like it. :)
      In the demo we have used static data for the quick view panel but you should retrieve the correct product info using,for example, an ajax call . This way you don’t have to create and load a quick view div for each product.

  • Dom

    Hi guys, thanks for the lovely UX. Any ideas why I have an image resize jump when the animation is playing out?
    https://www.bgparamotor.com/features

    Thanks in advance
    Dom

    • http://codyhouse.co Claudia Romano

      Hi Dom,
      I have been checking the page. Are you sure you have inserted al the main.js code? Because I can see that the slider inside the quick view panel is not working too.

      • Dom

        Thanks Claudia.

        I believe the slider is an ajax issue but all the js is there and the image jumps, odd. Your demo is nice and smooth…I’ll keep toiling.

        • http://codyhouse.co Claudia Romano

          Hi Dom,
          I was checking your code and noticed that you have added a margin-right to the .cd-slider-wrapper element and that is what’s breaking the effect! Just remove it and it’s going to work fine (of course you’ll need to change the style a little ;) ).

          Btw, for the slider, there’s an issue with the code provided (you can check the reply to Alex’s question).
          Hope this helps!

          • Dom

            Hey Claudia. Thanks so much for your time and effort …I really appreciate it

    • Angelos

      Nice implementation Dom!
      I haven’t done ajax calls before so I have one question. For each product you have a seperate php file on the server or you have them all in one and through jQuery you load the right one? Also it has to be a .php
      file or .html works fine too?

      Same question goes also to you Claudia.

      Thank you very much!

      • Dom

        I mostly did the front end on this project, having some help with back-end stuff. We did one php file – I imagine splitting it up would be slow and messy especially if you have lots of items. We added an ajax call to the existing js which then referenced the php file. I guess you need to use php because it echoes out he results…html wouldn’t do the job. Hope that helps…. my back-end knowledge is limited

        • Angelos

          Oh nice. You are right I tried .html and it didnt work.
          So does this file has any special php code in it? Or it has just the products and some php notation?

          • Dom

            //We wrote this

            <?php
            header("Cache-Control: no-cache");
            header("Pragma: nocache");
            $request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']);
            if($request_id=="1")
            {

            //then echoed out our .html like so

            echo ' ‘;
            }

            //then just go through using elseif like so

            elseif($request_id==”2″)
            {

            //just give each chunck of .html for each product an id as above – hope that makes helps :)

          • Angelos

            Yeah thanks a lot, that was really helpfull!

    • Abid

      Hi Dom,
      I have to deactivate session (lightbox) after the last image…
      please tell me how it’s possible…

  • Guest

    oops, this link…the grid of images.
    https://www.bgparamotor.com/features

    Thanks

  • Alex

    Hi Claudia thx for this amazing demo!!! I tried to add multiple products via ajax but the slider won’t work as “Dom’s projetc” any idea ?

    • http://codyhouse.co Claudia Romano

      Hi Alex,
      thanks for the heads-up!
      Since the slider (and the slider navigation) is not yet inserted in the DOM the ‘click’ event is not detected. To fix that, replace the following:

      With:

      That should solve the problem (I’ll update the resource in the next few hours!). Let me know if it works! :)

      • Abid

        Hi Claudia
        I have to deactivate session (lightbox) after the last image…
        After the last image the lightbox is scrolling continue.
        please tell me how it’s possible…

  • Alex

    The page is visible here: http://www.actarus.ch/devside/2015/

    • Erick

      hi, how you can use one diferent description for one of the items?

    • legolass73

      hey, you speak french ?

  • Alex

    Thank you very much for your quick answer Claudia. It works quite perfectly now, there is just a small problem with the updateQuickView now… When you open the “modal” and slide next (ie), then close the image is updated but if you click again the image jups to the first one on opening…

    It’s still visible @ the same url, and only the first item works.

    • http://codyhouse.co Claudia Romano

      Hey Alex, actually the updateQuickView() is a function you don’t need if you are using an Ajax call (we have been using it since we have static content, but you can just comment it). You should add the .selected class to the right image using your ajax call (retrieve the data, check which image is displayed and assign the . selected class to the corresponding image inside the slider). Hope this helps!

      • Alex

        Hi Claudia, I tried quite everything but I can’t succeed in retrieving the image to add the class .selected :-( could I ask you one last little help ? I completely lost…

  • Erick

    hi, claudia thank you, i have one question, who can i do the descripton for one of the products? i change the name, add some and just the lastest description its in all the descriptions of the products?

    • danilinked

      You find the solution for that Erik?

  • hearthfanatic

    This is great but unfortunately unusable for devs that aren’t familiar with AJAX. Any possibility of expanding the article to demonstrate how one would call different product information into the quick view – rather than referencing sitepoint?

    • Lorenz

      The same problem)

  • http://lukespoor.me Luke Spoor

    Would anybody be so kind to share how they are calling different product info via ajax?

  • Luca Zonarelli

    Hi Claudia, congratulations for your great work!
    I’like to ask you how to use this quick view in WordPress Loop (in a particular category page).
    I’ve already set it up but there are a few things that doesn’t work properly: the image and content selection in the view..

    Have you got any idea how to do it?

    Here’s the website: http://www.playerdimension.it/recensioni/

    Hope you’ll help me :)

    • Mojtaba Kamarkhani

      Hello my friend

      I’m your problem

      Can I ask you how you used this form loops WordPress…

  • Michael Scherpenisse

    hello i tried to change the text for the subjects but the are all related to one text in the html. how do i make different text for all items.

  • pixeloinc

    Can you help me? I’ve tried and error, topSelected is not defined. Why?

  • Pixi Buex

    Can you show an example on how to add different descriptions to each thumbnail with AJAX?

  • ziiCz

    Hello,

    I have a little problem !

    I’m developping a web site, I use “Product Quick View” but it doesnt work on smartphone for responsive.. :/

    How can i resolve this problem ?

    Hope you’ll help me :)

  • Vaisakh JR

    really nice gallery script,

    but I have a problem that how can we add different contents for each popup menu

    • http://glitchwood.com/ Luigi Libet

      Maybe is a good start point for you. Regards

      https://www.dropbox.com/s/d3fj3f4wx6twv6d/product-quick-view.zip?dl=0

      • Vaisakh JR

        Thank you very much, It works .
        I will use it in next project because I use another script already.

        Thanks. :-)

      • http://www.israelandyou.com/ israelandyou

        Great code man, tnks!
        In your demo, when a modal is opened it scrolls the entire page back up no matter where it is.
        Any idea why?

        • http://glitchwood.com/ Luigi Libet

          You need to add some styles to the body, like overflow:hidden, height:100%.

          Here it is an update with:
          https://www.dropbox.com/s/d3fj3f4wx6twv6d/product-quick-view.zip?dl=0

          • http://www.israelandyou.com/ israelandyou

            Thanks for the reply man! your fix seems to have the same issue yet, but thanks for the effort.

          • sagarrmore

            HI @Luigi Libet, This is great Example of quick view, but when even i click on image its works fine but popup(overlay) open at top of page ,but actually its become in middle of screen any solution

      • thiago ferreira

        Very very very very thanks man. God bless.

      • Naggar

        its very good but with me its make a conflict with my parallex mazayadesign.com/iac/

  • Uzair

    Sir please please please tell me how can we add different content for each popup please sir tell me

    • http://glitchwood.com/ Luigi Libet

      I just did some modifications and put the content of each “product” inside the li.cd-item element. The content is shown in the quickview wrapper. Maybe is a good start point for you. Regards

      https://www.dropbox.com/s/d3fj3f4wx6twv6d/product-quick-view.zip?dl=0

      • Abid

        Hi Luigi,
        please help me, this lightbox is not working on smartphone.
        please tell me how is it’s possible.

      • Bloke

        you are a legend. thank you

      • http://giometri.com egiova

        Keep it simple… Very clever solution. Thanks for that and to share.

      • MD Zakir Hossain Shamol

        nice work :)

  • Sup

    Hello,

    This product doesn’t work on smartphone with a responsive web design. How can I do to resolve it?

    Regards

    • Faliq

      Same here. How to resolve those things? Thanks.

    • Silvan B.

      I think it shouldn’ be that way.

    • Abid

      Hey Sup,

      you will have to change css @media.

      Replace style css code and javascript.
      Do this:

      var sliderFinalWidth = 300,
      maxQuickWidth = 900;

      /* ——————————–

      Primary style

      ——————————– */
      *, *::after, *::before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      }

      *::after, *::before {
      content: ”;
      }

      body {
      font-size: 100%;
      font-family: “PT Sans”, sans-serif;
      color: #3e585f;
      background-color: #ffffff;
      }
      body::after {
      /* dark overlay layer – visible when we fire .cd-quick-view */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(71, 55, 78, 0.8);
      visibility: hidden;
      opacity: 0;
      -webkit-transition: opacity .3s 0s, visibility 0s .3s;
      -moz-transition: opacity .3s 0s, visibility 0s .3s;
      transition: opacity .3s 0s, visibility 0s .3s;
      }
      body.overlay-layer::after {
      visibility: visible;
      opacity: 1;
      -webkit-transition: opacity .3s 0s, visibility 0s 0s;
      -moz-transition: opacity .3s 0s, visibility 0s 0s;
      transition: opacity .3s 0s, visibility 0s 0s;
      }

      a {
      color: #f82f53;
      text-decoration: none;
      }

      img {
      max-width: 100%;
      }

      /* ——————————–

      Modules – reusable parts of our design

      ——————————– */
      .cd-container {
      /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
      width: 900 px;
      max-width:;
      margin: 0 auto;
      }
      .cd-container:after {
      content: “”;
      display: table;
      clear: both;
      }

      /* ——————————–

      Main components

      ——————————– */
      html, body {
      height: 100%;
      }

      header {
      position: relative;
      height: 160px;
      line-height: 170px;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      }
      header h1 {
      color: #ffffff;
      font-size: 20px;
      font-size: 1.25rem;
      }
      @media only screen and (min-width: 768px) {
      header {
      line-height: 180px;
      }
      header h1 {
      font-size: 26px;
      font-size: 1.625rem;
      }
      }
      @media only screen and (min-width: 1024px) {
      header {
      line-height: 220px;
      }
      }

      .cd-items {
      padding: 1em 0;
      }
      @media only screen and (min-width: 768px) {
      .cd-items {
      padding: 2em 0 0;
      }
      }
      @media only screen and (min-width: 1024px) {
      .cd-items {
      padding: 4em 0 0;
      }
      }

      .cd-item {
      position: relative;
      margin: 0 0 1em;
      }
      .cd-item > img {
      display: block;
      width: 100%;
      }
      @media only screen and (min-width: 768px) {
      .cd-item {
      width: 48%;
      float: left;
      margin: 0 4% 2em 0;
      }
      .cd-item:nth-child(2n) {
      margin-right: 0;
      }
      }
      @media only screen and (min-width: 1024px) {
      .cd-item {
      width: 22%;
      float: left;
      margin: 0 4% 2.8em 0;
      }
      .cd-item:nth-child(2n) {
      margin-right: 4%;
      }
      .cd-item:nth-child(4n) {
      margin-right: 0;
      }
      .cd-item.empty-box::after {
      /* box visible as placeholder when the .cd-quick-view zooms in */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #392c3f;
      }
      }

      .cd-trigger {
      position: absolute;
      height: 50px;
      line-height: 50px;
      width: 100%;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.1);
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #ffffff;
      opacity: 0;
      visibility: visible;
      -webkit-transition: opacity 0.2s, background-color 0.2s;
      -moz-transition: opacity 0.2s, background-color 0.2s;
      transition: opacity 0.2s, background-color 0.2s;
      }
      .no-touch .cd-trigger:hover {
      background: rgba(0, 0, 0, 0.2);
      }
      @media only screen and (min-width: 1024px) {}
      .cd-trigger {
      /* always visible on small devices */
      visibility: visible;
      opacity: 1;
      }

      @media only screen and (min-width: 1170px) {}
      .cd-trigger {
      /* only visible on hover on big devices */
      opacity: 0;
      }

      @media only screen and (min-width: 1170px) {}
      .no-touch .cd-item:hover .cd-trigger {
      opacity: 1;
      }

      .touch .cd-item .cd-trigger {
      opacity: 1;
      }

      .cd-quick-view {
      /* quick view non available on small devices */
      display: none;
      }
      @media only screen and (min-width: 1024px) {}
      .cd-quick-view {
      display: block;
      position: fixed;
      max-width: auto;
      width:900px;
      visibility: hidden;
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      will-change: left, top, width;
      z-index: 1;
      }
      .cd-quick-view:after {
      content: “”;
      display: table;
      clear: both;
      }
      .cd-quick-view.is-visible {
      visibility: visible;
      }
      .cd-quick-view.animate-width {
      background-color:#ffffff;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
      -webkit-transition: box-shadow 0.3s;
      -moz-transition: box-shadow 0.3s;
      transition: box-shadow 0.3s;
      }

      .cd-slider-wrapper {
      position: relative;
      display: inline-block;
      float: left;
      }
      .cd-slider-wrapper:after {
      content: “”;
      display: table;
      clear: both;
      }

      .cd-slider {
      float: left;
      }
      .cd-slider li {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      }
      .cd-slider li img {
      display: block;
      width: 100%;
      max-width: 400px;
      }
      .cd-slider li.selected {
      position: relative;
      z-index: 3;
      }
      .add-content .cd-slider {
      margin-right: 0 !important;
      }
      .cd-slider-navigation li:first-child{right:0px;}
      .cd-slider-navigation {
      opacity: 0;
      }
      .add-content .cd-slider-navigation {
      opacity: 1;
      }

      .cd-slider-navigation li {
      position: absolute;
      top: 50%;
      bottom: auto;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 3;
      }
      .cd-slider-navigation li:first-child {
      left: 0;
      }
      .cd-slider-navigation li:last-child {
      /* equal to the .cd-slider-wrapper margin-right */
      right: 0;
      }
      .cd-slider-navigation li a {
      display: block;
      width: 40px;
      height: 50px;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      opacity: 0;
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: opacity 0.2s, background 0.2s;
      -moz-transition: opacity 0.2s, background 0.2s;
      transition: opacity 0.2s, background 0.2s;
      }
      .cd-slider-navigation li a::before, .cd-slider-navigation li a::after {
      /* create arrows in CSS */
      position: absolute;
      top: 18px;
      left: 14px;
      display: inline-block;
      background: #ffffff;
      height: 3px;
      width: 12px;
      }
      .cd-slider-navigation li a::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      }
      .cd-slider-navigation li a::after {
      -webkit-transform: translateY(7px) rotate(-45deg);
      -moz-transform: translateY(7px) rotate(-45deg);
      -ms-transform: translateY(7px) rotate(-45deg);
      -o-transform: translateY(7px) rotate(-45deg);
      transform: translateY(7px) rotate(-45deg);
      }
      .add-content .cd-slider-navigation li a {
      opacity: .2;
      }
      .no-touch .cd-slider-navigation li a:hover {
      background: rgba(71, 55, 78, 0.8);
      opacity: 1;
      }
      .touch .cd-slider-navigation li a {
      opacity: 1;
      }
      .cd-slider-navigation li:first-child a::before {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      }
      .cd-slider-navigation li:first-child a::after {
      -webkit-transform: translateY(7px) rotate(45deg);
      -moz-transform: translateY(7px) rotate(45deg);
      -ms-transform: translateY(7px) rotate(45deg);
      -o-transform: translateY(7px) rotate(45deg);
      transform: translateY(7px) rotate(45deg);
      }

      .cd-item-info {
      position: absolute;
      padding: 3em 3em 3em 0;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: opacity .3s, visibility 0s;
      -moz-transition: opacity .3s, visibility 0s;
      transition: opacity .3s, visibility 0s;
      }
      .cd-item-info h2 {
      font-size: 28px;
      font-size: 1.75rem;
      }
      .cd-item-info p {
      line-height: 1.6;
      margin: 1em 0;
      color: #67919c;
      }
      .cd-item-info .cd-item-action li {
      display: inline-block;
      margin-right: 1em;
      }
      .cd-item-info .cd-item-action li:first-child {
      margin-left: -4px;
      }
      .cd-item-info .add-to-cart {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      border-radius: 0.25em;
      border: none;
      padding: .6em 1.2em;
      background-color: #f82f53;
      color: #ffffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-family: “PT Sans”, sans-serif;
      font-size: 16px;
      font-size: 1rem;
      cursor: pointer;
      }
      .add-content .cd-item-info {
      /* class added at the end of the width animation, used to show the content */
      position: relative;
      visibility: visible;
      opacity: 1;
      }
      .add-content .cd-item-info h2 {
      -webkit-animation: cd-slide-in 0.3s;
      -moz-animation: cd-slide-in 0.3s;
      animation: cd-slide-in 0.3s;
      }
      .add-content .cd-item-info p {
      -webkit-animation: cd-slide-in 0.4s;
      -moz-animation: cd-slide-in 0.4s;
      animation: cd-slide-in 0.4s;
      }
      .add-content .cd-item-info .cd-item-action {
      -webkit-animation: cd-slide-in 0.5s;
      -moz-animation: cd-slide-in 0.5s;
      animation: cd-slide-in 0.5s;
      }

      @-webkit-keyframes cd-slide-in {
      0% {
      -webkit-transform: translate3d(-40px, 0, 0);
      }
      100% {
      -webkit-transform: translate3d(0, 0, 0);
      }
      }
      @-moz-keyframes cd-slide-in {
      0% {
      -moz-transform: translate3d(-40px, 0, 0);
      }
      100% {
      -moz-transform: translate3d(0, 0, 0);
      }
      }
      @keyframes cd-slide-in {
      0% {
      -webkit-transform: translate3d(-40px, 0, 0);
      -moz-transform: translate3d(-40px, 0, 0);
      -ms-transform: translate3d(-40px, 0, 0);
      -o-transform: translate3d(-40px, 0, 0);
      transform: translate3d(-40px, 0, 0);
      }
      100% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      }
      }
      .cd-close {
      position: absolute;
      top: 10px;
      right: 10px;
      display: inline-block;
      width: 30px;
      height: 30px;
      /* image replacement */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      visibility: hidden;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      -webkit-transition: -webkit-transform .3s 0s, visibility 0s .3s;
      -moz-transition: -moz-transform .3s 0s, visibility 0s .3s;
      transition: transform .3s 0s, visibility 0s .3s;
      }
      .cd-close::before, .cd-close::after {
      /* close icon in css */
      position: absolute;
      top: 12px;
      left: 5px;
      display: inline-block;
      height: 4px;
      width: 20px;
      background: #47374e;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      }
      .cd-close::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      }
      .cd-close::after {
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
      }
      .no-touch .cd-close:hover {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
      }
      .add-content .cd-close {
      visibility: visible;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transition: -webkit-transform .3s 0s, visibility 0s 0s;
      -moz-transition: -moz-transform .3s 0s, visibility 0s 0s;
      transition: transform .3s 0s, visibility 0s 0s;
      }

      • http://querysystemsi.com.br/ Matheus Sousa

        everything worked out here

  • Abid

    I have to deactivate session (lightbox) after the last image…
    every body please tell me how it’s possible…

  • Hans Kloss

    hmm, i have this error.. TypeError: image.offset(…) is undefined on line 85 in main.js and it doesnt work for me. :(

    • Silvan B.

      Maybe you wrapped the the ‘cd-item’ in a wrong way. In this demo the link- and image-tag are on the same dom level. If you’d like to have the image-tag within the a-tag, denn you should modify a few lines:

      e.g.
      instead of

      var selectedImage = $(this).parent(‘.cd-item’).children(‘img’)
      change it to:
      var selectedImage = jQuery(this).parent(‘.cd-item’).children().children(‘img’)

      I think you have to modify 2 or 3 lines and then it works like a charm.

      Great script codyhouses! Thank you for that.

  • Antonio Pinto

    That’s amazing but on mobile device don’t work when tap the image.

  • Gerardo Rodriguez Garcia

    how to add more descriptions for products ?

  • http://haneedesigns.com/ soulstatic

    First off, Claudia: Excellent code. Thank you so much. Now: Can anyone help me out here? I have it working. But there’s a lot of jerking motion going on when the card opens.

    http://rxrmain.agilepixelstudio.net/team.html#0

  • Allie

    So I have a mock website for a class and we need to add products on it and be able to have a quick view. How do I integrate it with the design I already have?

    • htjutyu

      i want to do that as well

  • Ampasenjo

    Hey guys! I needed this one for my project am working on still. If you need an differente popup for each product you can check this out ! https://www.dropbox.com/s/r6isjg7eep3g4nl/product-quick-view-custom.zip?dl=0 I did some changes to main.js but nothing on HTML, structure stays the same ! Hope it will help you in some way. Cheers

    • Rone

      Hey man… you are awesome!!

      thanks alot mate..

    • Alex

      Could you re-upload as I dont think the link is working anymore?

    • Bloke

      this would be amazing as I can’t figure out how to do that and your link is dead – any chance you can upload it again?!?! Pretty please :)

  • albert1903

    Hi to everybody! I have been reading about the main problem of some of you: The objective of use this plugin is add different content for each popup.

    I have done an example to solve this problem. (This problem is done based on WordPress) – (CODE PHP)

    Structure:

    — QUERY (to generate all the cd-item) —
    — LOOP —

    — END LOOP —

    — NEW ELEMENT CREATED BY ME —

    — LOOP (One more time, to generate all contents for each popup) —
    — NEW ELEMENT CREATED BY ME (I generate all contents but hidden) —

    — END LOOP —

    With this structure, I generate all cd-items and all boxes but hidden. It’s necessary create a script for detect which button has been clicked and which box should be shown. (CODE JS)

    Ok! Now I show you a real example:

    PHP CODE:

    ‘date’, ‘order’ => ‘ASC’)); ?>
    have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

    ‘ w100 hauto’)); ?>
    <a id="” class=”cd-trigger” href=”javascript:return false;”>Quick View

    have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
    <div id="box_” style=”display: none;”>

    ‘ w100 hauto’)); ?>

    Add to cart
    Learn more


    Close

    // Annotation: In functions.php (wordpress), I have created a new image size (post): add_image_size(‘post’, ‘400’, ‘450’, true);

    JS CODE:

    // Create by: Albert Viñas (@_albert vinas) – http://www.interactius.com

    jQuery(document).ready(function ($) {
    $(“.cd-trigger”).click(function () {
    var id = $(this).attr(“id”);

    var $box_id = “#box_” + id;
    var $wrapper = $($box_id).clone();

    $(‘#wrapper’).html($wrapper);
    $(“#wrapper “+$box_id).css(‘display’, ‘block’);
    });

    $(“.cd-close”).click(function () {
    $(‘#wrapper’).html();
    });
    });

    I hope you work!

    • Mehadihasan Sheliya

      yes it works but after ajax call its not wrking

  • john

    hi, ive been using and need to be able to add more houses in the qucikview for my project. please help me, need to do this by tomorrow.
    thanks

  • kaushal

    is it possible to link image the next web page i wont to display,
    i tried and it was working fine but then the Quick View button didn’t work !
    Help Plz

  • Tofanelli

    Hi @claudiarrromano:disqus… how’s going?? Awesome script you have it here… but… there is only one issue so far…. is there a way to make it responsive? I have the Web Developer from Chris Pederick extension and the script wont work on responsive layouts…. mind to give us a hand here?? =)

    • http://codyhouse.co Claudia Romano

      See my reply to Davide De Maestri (below) ;)

      • Tofanelli

        Swell =)… I just got here =)…. i will try here =)…

        Cheers =)

  • eddiefunky

    Hi @claudiarrromano:disqus , what can i do if i need to show 2 or more different products? each of them in a different box? i mean each product with a dedicated quickview and slideshow.

    thanks in advance

  • rtrfgyhgf

    bhfgbsdghbsegffhgaevefhgbhesrvberjhgbairuegbeigfrvaejibe

  • thiago ferreira

    Very good, thank you Claudia. :)

    • Brahime Y-ch

      plz help me to get it !

      • thiago ferreira
        • Brahime Y-ch

          thanks for your reply
          but my problem is when i click on photo (instead of quickview) nothing happen !
          if you can i’ll send you an example and do the changes on it and resend it to me ! if that not disturb of cours
          thank you verry much

          • thiago ferreira

            make sure that you called all files. Test the download out of your project.

          • Brahime Y-ch

            thank you so so much
            my problem now is that i’m using this quick view in the midlle of the page & when i click on quick view modal
            it takes me higher i cant find the setting to not let the modal do that !
            if you try to add more & more article you can see that !
            (12 qview for exemple)

          • thiago ferreira

            I do not know if I understand correctly. But to create a container Our tends see if you are among the “lis” correctly.

          • http://www.example.com/ taylan

            @TyYalniz
            #WashingtonDC

          • thiago ferreira

            send me, when I see der what I can do.

          • hidelberto

            Use onclick on img scr to open an url, like this:

        • http://www.engenhariadozero.com Engenharia do Zero

          Perfect! Thanks!

        • sagarrmore

          Hi @thiago ferreira , This is great Example of quick view, but when even i click on image its works fine but popup(overlay) open at top of page ,but actually its become in middle of screen any solution the give me

  • Alexandra Meth

    Hello! Thank you so much for this beautiful resource. I am quite new to jQuery and unfamiliar with most of the language and different components. I was wondering how to make the content of the ‘Project Info’ change for each different image? Thank you! :)

  • Ruli Baiq

    Hi, Thank You Claudia.

    i have a problem and i have a question to anyone whoever here,

    since this block :- cd-items cd-container- contain a looping list items,
    when i put this: -cd-quick-view- block outside the loop area, the pop up window only show the last item.
    it is working when i put -cd-quick-view- block on the loop area but the images are all loaded behind the choosen image, anyone can solve this problem?

  • Rachel

    Hi and thank you for the code. It looks amazing!!
    I’m having troubles with adding in different images into each of the items. I have done what someone suggested below and put the item description part of the code within the list item for 2 items.
    It is working to an extent as each of the different images are showing up when on the normal page in grid form, however, when I go to click on the first image (after having put in 2) that first image in the ‘quick view’ section doesn’t show, instead an small image of the last picture shows.
    Does anyone have an idea on how to fix this? I need it asap for an assignment!

  • Anup Majumdar

    I’m developping a web site, I use “Product Quick View” but it doesnt work on smartphone for responsive.. :/

    How can i resolve this problem ?

    Hope you’ll help me :)

  • Kenza

    I have the same problem than Anup Majumbar, Quick View isn’t responsive and it’s a really big problem…
    Can someone know how to fix it ?
    Thanks.

  • Syed Ashhar Ali

    hey claudia amazing work!!!!
    i tried to implement product quick view but cannot add description to multiple items..
    i also triedd to study ajax with the link you have provided but facing many problems…
    So can you plz suggest anything as i am switching to any other plugin

  • Rizal Az

    if you are looking to have different description for each product. Scroll down and check out what Luigi LIbet did.
    If you want to keep the modal from scrolling to the top. take out

    $(‘body, html’).css({
    ‘overflow':’hidden’,
    ‘height':’100%’
    });

    from main.js)

    • Aymará Samudio

      Hi! I’ve removed this, modal keep in his place, but when closing modal, it scrolls to the top!! Weird!! could you please help me out?

    • Becky Kelly

      I have removed this, and it stopped the modal scrolling to the top when opening, however when closing the modal it jumps back up to the top :( Any other suggestions would help so much!

  • Rizal Az

    Thank you Codyhouse and Claudia for such an amazing work!

  • http://www.carnfieldwebdesign.co.uk ItsAdam

    Guys any way to get the pop up to stay in place where the page is? Or at least go there when closed? Rizal Az’s works when opening, but on Closing it closes the box in to the wrong direction and then moves to the top of the page.

    • jack heeney

      I have this problem to mate… been racking my brain over it and cant seem to figure it out… Any help with this problem would be greatly appreciated. Thanks in advance.

      • Nicole P

        Did you figure this out?

  • Rahul Mehra

    okay so when i tried to replace the blank images with the new one there size seems to be changed n the quick view isn’t working properly.. can any one tell me how am i supposed to implement the images i want with correct sizes to be displayed on browser? please help i am new to this..

    • Gette

      Make sure that you have changed both the image in the cd-items AND put the same image in the cd-quick-view slider. If the 2 items don’t match, the effect will be a bit wonky. if you’ve done this and are still having problems, would you mind sharing your code so we can better troubleshoot?

  • Peter Moore

    Great code. 2 things though, When I add a footer into the code it seems to freak out when I close the image, strangely when I only press the X. If I just click anywhere outside the box, it seems to slide back into place. This only happens when I put the footer in, and unfortunately I need the footer. I’ve tried deleting bits of the code, refreshing the page, and testing it out, all to no avail and which point I undo the delete and then move onto the next part of code. Also when I click an image, it seems to erase the footer colour, a dark grey before hand turns to white leaving behind only the facebook logo and erasing the white contact text. Would anybody know how to fix this bug?

  • Kamil Štangelj

    Guys, ive got a problem. I want to make contents for each product and i want my page to stay in unchanged possition. Luigi Ibets idea slove the problem with more contents but it making a new problem. When im opening a Quick View then page`s possition is changing to the top. I want it to stay it in unchanged possition.

  • Benevides Lecontes

    Can you guys make this plugin for angular?

    • sarosh

      hey Benevides…. did u find any solution for angular?

  • Herbert Kumordzie

    I am unable to add individual product images and description to the repeated images on the same page. can anyone help please?

    • Lori Scheidt Koenig

      I, too, am having the same problem. Could you post a solution to adding multiple products with different descriptions. Thanks so much.

  • Mike Definitivo Version Siete

    Im on the same problem the images are Ok, but i dont know how to change each content info the cd-item-info is the same in all the boxes

  • Alex

    not working on tablet and mobile =(

  • Nur Alam

    Every image with same content!!!! how funy??

    • Shakibul Islam Khan

      I am also thinking about this.

  • petears

    Claudia, that is what I was looking for, you’re an angel.

    Now, comes the hook:
    Can you (for some extra fee) adjust it so the quick view will work on androids and tablets, too, and
    Can you also (apart from the grid view) pack it into a mobile friendly “slider”
    I’d be happy to discuss with you my ideas.

    Cheers
    Pete

  • mirjam

    Hi Claudia, What a wonderful quick viewer. A client wants to have something like this as a menu on her website. People see an image in grey and open the box read more about it and then go on to the right page for more details.
    But what she really wants is to let the viewer open like a door. So you see that de door goes open wide with an animation. Doesn’t need to look like a door, but behave like a door.
    Is it easy to change your code that instead of sliding a door goes open?

    Second question, is it possible to use it as a menu on a homepage?

    Thanks already!

  • Rajatmohan Singh

    What to do if I have lots of products and I have to put different text and image for each one?

  • Rithik Soni

    can we make it responsive for mobile user ? or if it is possible then please teach me how to do it.

  • Alex

    Hello, thank you very much for the work done. Please tell me how to add hammer.js, so you can close the window like this https://dribbble.com/shots/2371725-Screen-transitions-feed-to-details-and-баск thanks in advance

    • Alex

      Please help me

  • Aymará Samudio

    Hi!! I have this working. The only thing: how to prevent to scrolling to the top of the page? is annoying!!

  • Khanh.luong

    thank you so much Claudia,
    it’s so cool,
    but can you help me resolve a problem,
    i want to expand .cd-quick-view full screen on pc, so how can do that.

    plz help me

    thanks you :) <3

  • Jack Lew

    how to prevent to scrolling to the top of the page?

  • Becky Kelly

    How can we stop this from jumping to the top of the page?? Can anyone help!?

    • http://codyhouse.co Claudia Romano

      hi there! I just tested it and can’t see any jump. Could you please provide more info (browsers, when the jump happens …)? Thanks @disqus_shuo60ApN1:disqus @aymarsamudio:disqus

  • Jack Lew

    solved the problem from jumping to the top of the page.

    under index.html

    find a class named.. cd-close
    and you will see this.
    Close
    than replace that with this..

    • Nicole P

      Replace it with what?

  • Jack Lew

    replace that with this..

  • Jack Lew

  • Becky Kelly

    Solved it! Make sure you don’t have any href=”#” on the a.cd-trigger within the HTML markup, as this is obviously an anchor point to the top of the page!

    • Nicole P

      Do you mean where it’s #cont1? The pop up won’t work at all if you remove that. If you’ve figured out a solution please let me know asap!

  • kyoko

    Hi @claudiarrromano:disqus ! Thanks a lot ! Great auto. But I’m a newbie and I have truble to create a block of 9 pictures (3 column x 3 lines) with no space between picture. Can someone help me? I know it’s basic question.

    • kyoko

      No one to reply?

  • Aishwarya Taneja

    how can i combine this with product compare?

  • sagarrmore

    This is great Example of quick view, but when even i click on image its works fine but popup(overlay) open at top of page ,but actually its become in middle of screen any solution the give me

    • rottenfinger

      remove the href atribute on the cd-close.

      • Nicole P

        This doesn’t fix it :(

  • Stevie Starosciak

    This is lovely :) Would you or anyone else happen to know how to retrofit this into a ReactJS app? Is it even possible? :P

  • hassan x146

    how to rtl this nuggets to right

  • Jan Yu

    Is is possible to add a product description for each photo in each slider?

  • Nicole P

    Wonderful quick view. I’ve fitted this into my page however, like many others said, it jumps to the top of my page. When opening anything on the second row or lower, it jumps to the top but the quick view is cut off halfway. I’ve yet to find a solution despite having tried what’s been suggested below. If anyone has a fix for this please let me know asap!!

    • http://codyhouse.co Claudia Romano

      hi there! I just tested it and can’t see any jump. Could you please provide more info (browsers, when the jump happens …)? Are you experiencing this issue on our demo too?

      • Nicole P

        Hi Claudia! I’ve just quickly thrown it in between my header/footer includes and have been trying to get it to work. You can see this here: http://completeequipment.ca/dewalt.php I have the regular demo on this page here: http://completeequipment.ca/qvdemo.html

        You’ll notice it will work almost perfectly on the demo page (except for the jump to the top of the page) but on the other it won’t after the first click. I’m using iOS, Safari but testing with Chrome and Firefox on another computer. Thanks for replying!

        • http://codyhouse.co Claudia Romano

          Hi Nicole, the jump is an issue I’m not able to replicate on our demo (using both Safari and Chrome). Since it happens on your version only, I’ld suggest you make sure to properly include all the code of the resource. Hope this helps.

      • Nicole P

        I’ve figured out the main part of my problem, just not the jumping. To keep the box in view I changed all of my body tags to and it seemed to keep it in the right spot. Also had to add : finalTop = (windowHeight – (finalHeight + 90)*2)/2 … on line 136 of main. The boxes still jump to the top of the page but it’s all in view. Please let me know if you have a fix for this!

  • Stephan Cain

    Hi can someone tell me what code needs to be change so that different images and different popups can be added? I tried adding different id’s which worked for the content but there is a pb when using different images… it does load them. Anyone try this?

  • Narendra

    not working on mobile…Why?

  • nancy

    it’s only show and hide the div / html element… How about hack the other page in the same domain..

  • Naveen Guddoji

    hi codyhouse team
    i am unable to show individual product box to particular info, as all boxes opens same info