CodePen

HTML

            
              <ul id='products'>

  <li class='columns product three' data-hook='products_list_item' id='product_1' itemscope='' itemtype='http://schema.org/Product'>
    <div class='main-image' data-productid='1' id='single_1'>
      <img src='http://lorempixel.com/100/100/food' />
    </div>
    <!-- main-image -->
    <div id='product_popup_1'>
      <img src='http://lorempixel.com/200/200/food' />
    </div>
    <!-- product_popup -->
  </li>


  <li class='columns product three' data-hook='products_list_item' id='product_2' itemscope='' itemtype='http://schema.org/Product'>
    <div class='main-image' data-productid='2' id='single_2'>
      <img src='http://lorempixel.com/100/100/animals' />
    </div>
    <div id='product_popup_2'>
      <img src='http://lorempixel.com/200/200/animals' />
    </div>
  </li>

  
  <li class='columns product three' data-hook='products_list_item' id='product_3' itemscope='' itemtype='http://schema.org/Product'>
    <div class='main-image' data-productid='3' id='single_3'>
      <img src='http://lorempixel.com/100/100/people' />
    </div>
    <div id='product_popup_3'>
      <img src='http://lorempixel.com/200/200/people' />
    </div>
  </li>



</ul>
            
          
!

CSS

            
              div[id^="product_popup"] {
 display: none;
}

.main-image { cursor: pointer; } 

li { float: left; list-style: none;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready ->
  i = $(".main-image")
  i.each ->
    id = $(this).data('productid')
    button = $("#single_" + id )
    button.click ->
      $("#product_popup_" + id).fadeToggle() 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................