どうか教えて下さい！
| 質問 > その他 > 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 |
その他
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| ohenro |
投稿日時: 2013/2/20 10:54
対応状況: −−−
|
半人前   登録日: 2013/2/14 居住地: 投稿: 26 |
横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 当方初心者です。
ご教授下さい。 宜しくお願いします。 横並びのサブ画像をクリックしたときサブ拡大画像を表示させたい。 ※商品登録ページのサブ画像、サブ拡大画像をMAX8枚登録できるように拡張しています ------------------------------------------------- 商品メイン画像[754×503] ------------------------------------------------- |サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜ ■現状の実装 商品メイン画像[754×503]の下に表示されている 横一列の商品のサブ画像[130×130]の(1)〜(8)をオンマウスした際 商品メイン画像[754×503]の解像度でサブ画像[130×130]が動的に表示される。 ■今やりたいこと 商品メイン画像[754×503]の下に表示されている 商品のサブ画像[130×130]の(1)〜(8)をオンマウスした際 商品メイン画像[754×503]のサイズでサブ拡大画像[754×503]を動的に表示させたい 下記は現状のソースになります。 <div class="photo"> <!--{assign var=key value="main_image"}--> <!--★画像★--> <!--{if $arrProduct.main_large_image|strlen >= 1}--> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" class="expansion" target="_blank" > <!--{/if}--> <div class="main_img"> <img src="<!--{$arrFile[$key].filepath|h}-->" width="754" height="503" alt="<!--{$arrProduct.name|h}-->" class="picture" /></div> <!--{if $arrProduct.main_large_image|strlen >= 1}--> </a> <!--{/if}--> </div> </div> <script type="text/javascript"> $(document).ready(function() { //change_thumb $(function(){ $('.thumb_img a').click(function(){ var h = $(this).eq(0).attr('rel'); $('.main_img img').fadeOut(function(){ ($('.main_img img').attr("src",h)).fadeIn(); }); return false; }) }); }); </script> EC-CUBEのverは2.12.2になります。 何卒宜しくお願い致します |
| otoan |
投稿日時: 2013/2/20 12:01
対応状況: −−−
|
半人前 登録日: 2013/1/31 居住地: 投稿: 21 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 現在、サムネイル画像が表示されていると言うことは、下記のようなブロックがあると思うのですが、その部分が引用されていないようですので、推測を含めて回答いたします。
javascriptのコードを見る限り、サムネイル画像に付いたaタグのrel属性の値で、メイン画像のsrcを書き換えているように見えます。 おそらく、サムネイルの表示部分は下記のような構造をしていると思うのですが、 relに指定されている画像パスを、サブ拡大画像[754×503]のパスにすれば良いのではないかと思われます。 |
| ohenro |
投稿日時: 2013/2/20 12:35
対応状況: −−−
|
半人前 登録日: 2013/2/14 居住地: 投稿: 26 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 otoan様
ご返信本当にありがとうございます。 relに指定されている画像パスですが 現状下記のようになっているのですが ※ちょっとソース読解に乏しいので多めにコピペしております <!--▼サブコメント--> <div id="sub_img_area"> <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}--> <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}--> <!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}--> <div class="sub_area clearfix"> <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3> <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}--> <!--▼サブ画像--> <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}--> <!--{if $arrProduct[$ikey]|strlen >= 1}--> <div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div> <div class="subphotoimg"> <!--{if $arrProduct[$lkey]|strlen >= 1}--> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion_on.gif', 'expansion_<!--{$lkey|h}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_expansion.gif', 'expansion_<!--{$lkey|h}-->');" target="_blank" > <!--{/if}--> <a rel="<!--{$arrFile[$ikey].filepath}-->"> <img src="<!--{$arrFile[$ikey].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$ikey].width}-->" height="<!--{$arrFile[$ikey].height}-->" /> </a> <!--{if false}--> <!--{if $arrProduct[$lkey]|strlen >= 1}--></a> <span class="mini"> <a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="expansion" target="_blank"> 画像を拡大する</a> </span> <!--{/if}--> <!--{/if}--> </div> <!--{else}--> <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p> <!--{/if}--> <!--▲サブ画像--> </div> <!--{/if}--> <!--{/section}--> </div> </div> <!--▲サブコメント--> どのようにパスを変更すれば宜しいでしょうか？ ご教授下さい。 宜しくお願い致します。 |
| otoan |
投稿日時: 2013/2/20 13:06
対応状況: −−−
|
半人前 登録日: 2013/1/31 居住地: 投稿: 21 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 よく読むと、ikeyとlkeyという二つの値が設定されています。
一方、サムネイル画像を表示している部分では、ikeyしか使われていません。 <a>のrelと<img>のsrc、どちらも$arrFile[$ikey]のfilepathで設定されています。 おそらくrelの方を$arrFile[$lkey].filepathに変更すれば、拡大画像が表示されるようになるのではないでしょうか。 |
| ohenro |
投稿日時: 2013/2/20 14:37
対応状況: −−−
|
半人前 登録日: 2013/2/14 居住地: 投稿: 26 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 otoan様
お忙しいところお付き合い頂き誠にありがとうございます。 下記のソースを このように編集した場合 横並びに設置されているサブ画像も表示されなくなります。 下記の状態で ------------------------------------------------- 商品メイン画像[754×503] ------------------------------------------------- サブ画像(1)｜サブ画像(2)｜サブ画像(3)｜サブ画像(4) サブ画像(1)を押下したとき 下記のような表示にさせたいのですが ------------------------------------------------- サブ拡大画像(1)[754×503] ------------------------------------------------- サブ画像(1)｜サブ画像(2)｜サブ画像(3)｜サブ画像(4) サブ画像が で管理されているところまでは明確なのですが うーん。うまくいきません  |
| otoan |
投稿日時: 2013/2/20 15:00
対応状況: −−−
|
半人前 登録日: 2013/1/31 居住地: 投稿: 21 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 'i'と'l'の区別が難しいですが、↑ではなく↓のイメージでした。 aタグの中では$lkeyを、imgタグの中では$ikeyを使う形です。 ただ、下記のコードで、拡大サブ画像のURLが正しく生成されているのならば... ↓の方が良いのかもしれません。 PS: Javascriptのエラーメッセージ、画像のリンク切れのエラー、ブラウザが表示しているHTMLソースの情報などがあると、より問題を判別しやすくなります。 |
| ohenro |
投稿日時: 2013/2/20 15:15
対応状況: 解決済
|
半人前 登録日: 2013/2/14 居住地: 投稿: 26 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 otoan様
ご返信ありがとうございます。 下記の修正にて正常に動作しました。 を に変更するだけでOKでした。 お付き合い頂きありがとうございました  |
| ohenro |
投稿日時: 2013/2/26 11:49
対応状況: −−−
|
半人前 登録日: 2013/2/14 居住地: 投稿: 26 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 otoan様
再度質問のほうすいません。 先日このスレッドにて質問した件なのですが webブラウザで動作させたとき うまく画像が切り替わりません。 これはJSのバグなのでしょうか？ iphoneではwebのソースで素早く サブ画像サムネイル押下でサブ拡大画像が切り替わります。 IE、firefox、クローム、 スクロールバーがあるものに関しては 数回押下すると切り替わるのですが 押下すると、まず『スクロールバーが下に下がる』 挙動になってしまします。 説明が分かりずらくてすいません。 ソースは以前見て頂いたものと変わりません。 宜しくお願い致します。 |
| otoan |
投稿日時: 2013/2/26 17:10
対応状況: −−−
|
半人前 登録日: 2013/1/31 居住地: 投稿: 21 |
Re: 横並びのサブ画像をクリックしたときサブ拡大画像を動的に表示させたい。 ブラウザの種類によって正しく動作しないことがあるという状況でしょうか？
Javscript実行エラーの出力、（PHPのコードではなく）サーバが返すHTML全体、読み込んでいるJSファイル、などなどを見ながら追いかけないと、これ以上は難しいです。 少し気になる点を上げるならば... この部分では ・クリックした時に動作しているのが別なスクリプトである ・thumb_imgというタグが別な場所にある などが考えられます。 正しく動作していないならば、この辺りを追ってみるのは如何でしょうか。 閉じタグの対応も、イマイチあっていないような気もするのですよね... |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
