0

特定のグループの各製品を一覧表示する製品ページがあり、メイン画像をクリックしたときに個々の製品の製品表示ページに移動する代わりに、画像をcss3ライトボックスにロードしたいと思います。

_product.html.erbの私のコードは次のとおりです。

<% if products.any? %>
<ul id="products" class="inline product-listing" data-hook>
  <% products.each do |product| %>
    <% if product.on_display? %>
      <div class="grid_1">
      <li id="product_<%= product.id %>" class="columns product three <%= cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
    <div class="main-image" type="button" value="Zoom In Modal Window" class="popup_button" data-type="zoomin" data-productid="<%= product.id %>">
      <%= large_image(product, :itemprop => "image", :class => "product-image", :class => "popup_button") %>
    </div><!-- main-image-->
    **<div class="overlay-container">
    <div class="product-container zoomin">
        <span class="close">X</span>
        <%= product %>
        <%= large_image(product, :itemprop => "image", :class => "product-image") %>
    </div><!-- window-container zoomin -->
    </div><!-- overlay-container -->**
    <div class="prod_info_box">
    <%= link_to truncate(product.name, :length => 50), product, :class => 'info', :itemprop => "name", :title => product.name %>
    <span class="price selling" itemprop="price"><%= product.price_in(current_currency).display_price %></span>

ライトボックスコードは太字で示されています。main-imagedivで使用されているのと同じ'product'変数を使用して、選択した単一の製品をライトボックスにプルしていますが、ここで使用すると、複数の製品をプルして1つの製品の上に重ねているようです。別。そして、それは正しい製品オブジェクトを引っ張っていません。「TheTemptress」をクリックすると、グリッドの右下にある製品である「TheTim」が表示されます。私が同じ「製品」を使用しているので、なぜこれを行うのか考えてください

<% products.each do |product| %>

ご協力いただきありがとうございます！

PSこれがコーヒースクリプトです：

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")
  $(".overlay-container").fadeIn ->
    window.setTimeout (->
      $(".product-container." + type).addClass "product-container-visible"
    ), 100


$(".close").click ->
  $(".overlay-container").fadeOut().end().find(".product-container").removeClass "product-container-visible"
4

1 に答える 1

1

ID（または必要に応じてデータ属性）を使用して、製品IDをに追加できます。したがって、次のようなことができます。

<div id="<%= product.id %>" class="product-container zoomin">

次に、コーヒースクリプトで次のようなことを行うことができます。

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")

  product_id = $(this).attr("data-productid")

  $(".overlay-container").fadeIn ->

    window.setTimeout (->
      $("#" + product_id + ".product-container." + type).addClass "product-container-visible"
   ), 100
于 2013-03-19T19:31:40.407 に答える