0

だから私はerbで生成されたステップバイステップの指示のセットを持っています.各ステップには、ステップの指示テキストが何を参照しているかを強調するイメージタグ（.tagged）が上に重ねられた少なくとも1つの画像があります. 問題は、現在、画像のサイズがモバイルでの表示に適していないことです (最大幅は 640px です)。画像の最大幅を 300px に縮小しましたが、すべてのタグの位置が正しくありません。xy 位置を 2.13 (640/300) で割りましたが、タグはまだ適切な位置にありません。かなり近いものもありますが、そうでないものもあります。すべての写真の幅がすべて同じではないためだと思いますが、よくわかりません。理由はありますか？前もって感謝します。

jQuery (タグの追加方法)

$('span.i_contact').each(function() {                
    var pos_width = ($(this).data('pos-width')) / 2.1;
    var pos_height = ($(this).data('pos-height')) / 2.1;
    var xpos = ($(this).data('pos-x')) / 2.1;
    var ypos = ($(this).data('pos-y')) / 2.1;
    var taggedNode = $('<div class="tagged" />')
    taggedNode.css({
        "border":"5px solid orange",
        "width":pos_width,
        "height":pos_height,
        "left":xpos,
        "top":ypos
    });

    var n = $(this).data('index')
    $('.i_tagmap' + n).append(taggedNode)  
    console.log(taggedNode.position())    
});

$("span.o_contact").each(function() {            
    var pos_width = ($(this).data('pos-width')) / 2.1;
    var pos_height = ($(this).data('pos-height')) / 2.1;
    var xpos = ($(this).data('pos-x')) / 2.1;
    var ypos = ($(this).data('pos-y')) / 2.1;

    var taggedNode = $('<div class="tagged" />')
    taggedNode.css({
        "border":"5px solid green",
        "width":pos_width,
        "height":pos_height,
        "left":xpos,
        "top":ypos  
    });
    var n = $(this).data('index')
    $('.o_tagmap' + n).append(taggedNode)        
});

ERB (ステップの生成方法)

<% n = steps.index(step) %>
<section id="step<%= n+1 %>" style="padding-top: 60px;">
<h2 style="margin-left:20px;"> Step <%= n+1 %></h2>
<div class="stepcontainer">
    <div class="steptext">
        <% if step.priority == 1 %>
            <%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_product.full_name}.  Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_product.full_name}." %>
        <% elsif step.priority == 2 %>
            <%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_product.full_name}.  Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_product.full_name}." %>
        <% elsif step.priority == 3 %>
            <%= "Plug the #{step.o_connection.product.full_name } #{step.o_connection.cord_type.name} Cable into the wall." %>
        <% elsif step.priority == 4 %>
            <%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_connection.product.full_name}.  Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_connection.product.full_name}." %>
        <% elsif step.priority == 5 %>
            <%= "Plug #{step.o_connection.product.full_name}" %>
        <% elsif step.priority == 6 %>
            <%= "Touch the #{step.o_connection.button.name} Button on the #{step.o_connection.product.full_name}" %>
        <% end %>
    </div>

    <div class="modalbutton">
        <%= render(step.flags.new) %>   
    </div>

    <div class="productimg">    
        <span class="o_contact o_contact<%= n %>" data-pos-x="<%= step.o_connection.pos_x %>" data-pos-y="<%= step.o_connection.pos_y %>"  data-pos-width="<%= step.o_connection.pos_width %>" data-pos-height="<%= step.o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span>

    <% if step.input_contact.present? %>
        <span class="i_contact i_contact<%= n %>" data-pos-x="<%= step.i_connection.pos_x %>" data-pos-y="<%= step.i_connection.pos_y %>"  data-pos-width="<%= step.i_connection.pos_width %>" data-pos-height="<%= step.i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span>    

        <div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;">
            <%= link_to image_tag(step.i_connection.image.image.url(:medium)), "#{step.i_connection.image.image.url(:large)}", class: "fancybox" %>
            <div class="i_tagmap<%= n %>"></div>
        </div>      
    </div>

    <div class="cableimg">
        <% if step.i_connection.cord_type.present? %>
            <%= image_tag(step.i_connection.cord_type.image.url(:thumb), :class => "orange")  %>
        <% end %>           
        <% end %>   

        <% if step.o_connection.cord_type.present? %>
            <%= image_tag(step.o_connection.cord_type.image.url(:thumb), :class => "green") %>      
        <% end %>
    </div>

    <% if step.o_connection.button.present? %>
        <div class="productimg">
            <div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;">
                <%= link_to image_tag(step.o_connection.image.image.url(:medium)), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %>
                <div class="o_tagmap<%= n %>"></div>
            </div>  
        </div>

    <% else %>
        <div class="productimg">
            <div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;">
                <%= link_to image_tag(step.o_connection.image.image.url(:medium)), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %>
                <div class="o_tagmap<%= n %>"></div>
            </div>  
        </div>              
    <% end %>
</div>
</section>
4

1 に答える 1

0

私はあなたのコードをチェックしませんでしたが、よくある間違いは、y 軸が下から始まると仮定することです。上から始まります。

いいね：x、y

0,0 1,0 2,0

0,1 1,1 2,1

0,2 1,2 2,2

于 2013-08-06T13:39:37.113 に答える