• 締切済み

インラインフレーム内skitter画像ターゲット

jQueryを使ったスライドショーでskitterを利用しています。 skitterで作ったページをインラインフレームでトップページに表示しているのですが、画像をクリックしてターゲットのページを開く際、時々インラインフレーム内にターゲットのページが開いてしまうことがあります。特に画像アニメーションが完了していない状態でクリックするとインラインフレームの中に開いてしまうように思えます。 以下のように画像のコード部分でリンクの前にtarget指定で_topは指定してあるのですが・・。 <div class="box_skitter box_skitter_large"> <ul> <li><a target="_top" href="リンク/newpage1.html" > 　　　<img src="images/img01.jpg" /></a> 　　　<div class="label_text"><p>画像１</p></div> 　　</li> <li><a target="_top" リンク/newpage2.html" > 　　　<img src="images/img02.jpg" /></a> 　　　<div class="label_text"><p>画像２</p></div> 　　</li> </ul> </div> jquery.skitter.jsのほうで何かコードを変えないといけないのでしょうか？ それともインラインフレーム内でskitterの表示はよくないのでしょうか？ targetで_topを指定してあればうまく開くように思うのですが・・。 jQueryは初心者です。 ご存知の方、ぜひ対処方法をご教授ください。 よろしくお願いいたします。

みんなの回答

回答No.1

target属性を「_top」と仮定してお答えします。 skitter.jsの89行目の辺りにある '<a href=""><img class="image_main" /></a>'の部分にtarget属性を足します。 '<a href="" target="_top"><img class="image_main" /></a>' さらに2280行目辺りにある var img_clone = $('<a href="'+this.settings.link_atual+'">（以下省略）　の部分に更にtarget属性を足します。 var img_clone = $('<a href="'+this.settings.link_atual+'" target="_top"> skitterを実装するリンクにもtarget属性を追加してください。 これで如何でしょうか？こちらは3枚の画像にリンクを指定していましたが、うまくいきました。

zoheisa
質問者

お礼

いやーほんと助かりました！うまくいきました。 どうもありがとうございます。 私としては、当初target属性をどこかに挿入する、 まではわかるのですが （たぶん誰でもそこまではわかると思いますが・・） どこに入れたらいいのかがさっぱりわかりませんでした。 すごいですねーー、尊敬します。 ご回答に厚く感謝しております。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryプラグイン「Skitter」でリンク

    jQueryプラグイン「Skitter」でリンクについて jQueryプラグイン「Skitter」でリンクについてわからないことが２点ございます。 まず、画像の淵に青色のラインが入る（IMGの「 border="0"」が効かない） あと、インラインフレーム内で動かし、変わる画像のリンク指定を全ウィンドウ（target="_parent"）に指定したいのですが、これもうまくいきません。。。 ぜひお助けいただきたいと思っております。よろしくお願いします。 ↓例えば下記のように３つの画像を指定した場合にborderもtargetもききません。 <div class="box_skitter box_skitter_large"> <ul> <li> <a target="_blank" href="http://www.yahoo.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <a target="_blank" href="http://www.google.co.jp/"><img src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0" class="circles" ></a> </li> <li> <A target="_blank" href="http://www.rakuten.co.jp/"><IMG src="http://thumbnail.image.rakuten.co.jp/@0_mall/calmlife/cabinet/detai..." border="0"></A> </li> </ul> </div>

  • インラインフレームのリンク

    インラインフレーム内にリンクを配置して、リンクをクリックすると現在見ているウィンドウにリンク先のページを表示したいと考えています。リンクに target="_top" を指定すれば、ウィンドウにリンク先が開かれると思うのですが、実際にやってみると、うまく開くときもありますがインラインフレーム内でウィンドウが開いてしまうことがあります。 現在見ているウィンドウ＞インラインフレーム＞インラインフレーム＞リンクのあるページ と複数のインラインフレームを介しているのが原因のように考えています。 リンクのあるＨＴＭＬにjQueryプラグインを使ったスライドショーを入れて、複数のインラインフレームを介して画像をクリックすると現在見ているウィンドウにその画像のあるページを開きたいのです。 インラインフレーム内でリンク先のページが開いてしまうのは、やはりリンクのtarget指定の問題でしょうか？それともjQueryプラグインの設定か何かの問題でしょうか？ アドバイスいただければ幸いです。

    • ベストアンサー
    • HTML
  • インラインフレームを使った場合のtarget指定について

    インラインフレームを使用してＨＰを制作しているのですがリンクのtarget指定で困っていることがあります。 インラインフレームにリンクを貼り、インラインフレームをそのまま表示した状態で親ページにリンク先を表示させたいのですが、 target="_parent" ではインラインフレームが解除されてしまいます。 やはりインラインフレーム付きのページを作って表示させるしか、解除させずに表示する方法はないのでしょうか？ 何か良い方法がありましたらご教授下さいませ。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 画像が表示されない。

    質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。

    • ベストアンサー
    • CSS
  • HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。

    DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。 （当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな！という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。） これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。 （○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました）

  • 画像ギャラリー

    画像ギャラリー 単純な画像ギャラリーをつくっています。treeのメニューをクリックするとリンクされている画像がtargetに切り替わり表示されるものです。 $(function() { $("#tree a").click(function() { $("#tree a").removeClass("current"); $(this).addClass("current"); var src = $(this).attr("href"); $("#imgMain img:first").fadeOut("normal", function() { $(this).attr("src",src).fadeIn(); }); return false; }); }); <ul id="tree"> <li><a href="../img/gallery/01/img01.jpg" class="current">画像01</a></li> <li><a href="../img/gallery/01/img02.jpg">画像02</a></li> <li><a href="../img/gallery/01/img03.jpg">画像03</a></li> <li><a href="../img/gallery/01/img04.jpg">画像04</a></li> <li><a href="../img/gallery/01/img05.jpg">画像05</a></li> </ul> <p id="imgMain"><img src="../img/gallery/01/img01.jpg" alt="画像" id="target" /></p> これで動作はするのですが「次の画像」や「前の画像」とした別のリンクでも切り替わりの操作を行うにはどうすればいいでしょうか？ img01.jpgがtargetにある場合に「次の画像」をクリックするとimg02.jpgに切り替わり「前の画像」をクリックするとimg05.jpgに切り替わるようにしたいと思っております。 画像の枚数は不特定なので枚数が何枚であろうが汎用性のあるものであれば助かるのですが詳しい方がいらっしゃいましたら実行方法を教えてください。 宜しくお願いいたします。

  • スライドショーに妙な間がある。

    いつも為になるアドバイスありがとうございます。 HP作成してるなかで気になったことがあるのですが、jQueryでスライドショーを設定して 画像からリンクを設定すると妙な間があって気になります。 原因は何でしょうか？ ご指導願います。 HTMLフォーム <!DOCTYPE html><!----> <html> <head> <meta charset="utf-8"> <title>ファッション通販サイト”Ce qui plait aux fill”</title> <style>/*CSS*/</style> <link rel="stylesheet" href="top.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> <link rel="stylesheet" href="top.css" type="text/css" media="all"> </head> <body> <div id="wrapper"> <div class="header"> <h1 class="logo"><img src="img/top-logo-01.jpg" /></h1> </div><!--header--> <div class="section"> <div class="fadein"> <a href="リンク01.html"><img src="画像01.jpg" width="400px" height="auto" /></a> <a href="リンク02.html"><img src="画像02.jpg" width="400px" height="auto" /></a> <a href="リンク03.html"><img src="画像03.jpg" width="400px" height="auto" /></a> <a href="リンク04.html"><img src="画像04.jpg" width="400px" height="auto" /></a> <a href="リンク05.html"><img src="画像05.jpg" width="400px" height="auto" /></a> <a href="リンク06.html"><img src="画像06.jpg" width="400px" height="auto" /></a> <a href="リンク07.html"><img src="画像07.jpg" width="400px" height="auto" /></a> <a href="リンク08.html"><img src="画像08.jpg" width="400px" height="auto" /></a> <a href="リンク09.html"><img src="画像09.jpg" width="400px" height="auto" /></a> <a href="リンク10.html"><img src="画像10.jpg" width="400px" height="auto" /></a> <a href="リンク11.html"><img src="画像11.jpg" width="400px" height="auto" /></a> </div><!--fadein--> </div><!--section--> <div class="img"> <p><img src="img/waku.jpg" /></p> </div><!--img--> <div class="news"> <div class="new-item"> <p><img src="img/new-item.jpg" /></p> </div><!--new-item--> </div><!--news--> <div class="item-menu"> <p>最新のアイテムを紹介します。</p> <ul> <li><a href="#">サンダル</a></li> <li><a href="#">パンプス</a></li> <li><a href="#">タンクトップ</a></li> <li><a href="#">キュロット</a></li> <li><a href="#">スカート</a></li> <li><a href="#">ウェッジソール</a></li> <li><a href="#">トレンチコート</a></li> <li><a href="#">カーディガン</a></li> <li><a href="#">ルームウェア</a></li> <li><a href="#">バック</a></li> </ul> </div><!--item-menu--> <div id="footer"> <ul> <li><a href="#">TOP</a></li> <li><a href="#">リンク</a></li> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div><!--footer--> </div><!--wrapper--> </body> </html> CSSフォーム @charset"utf-8"; body{ width:100%; background: #EDE8EA url(img/dot/14.gif) repeat; } body .fadein { position:relative;} .fadein img { position:absolute; left:20px; top:35px; } #wrapper{ margin:auto; width:980px; } .header{ width:980px; padding:0; border: 10px groove #cfc; background:#fff; } .section{ margin:30px 0 0; } .img{ float:left; } .news{ float:left; margin:20px; background:#fff; width:500px; border-radius: 10px; } .new-item{ text-align: center; margin:20px 0 0 0; } .item-menu{ float:left; margin:0 20px; font-size:30px; } .item-menu li{ font-size:24px; background-color:#fff; width:300px; list-style:none; text-align:center; margin:5px; } .item-menu a{ text-decoration:none; } .item-menu li:hover{ text-decoration:underline; background-color:#ADFF2F; } #footer{ clear: both; }

    • ベストアンサー
    • HTML
  • 別ページのインラインフレームに表示させる方法

    別ページのインラインフレームに表示させる方法 こんにちは。いつもお世話になっております。 数日前に自閉式ツリーについて質問させていただきました。 ありがとうございました。 http://okwave.jp/qa/q5526156.html --------------------------------------------------------------- <script type="text/javascript"> <!-- function tree2(menu_class,menu_id) { var div=document.getElementById(menu_id); if (div.style.display == "block") div.style.display="none"; else { var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; div.style.display="block"; } } // --></script> <style type="text/css"> <!-- .tree { display:none; } --></style> <p><a href="javascript:tree2('tree','menu1');" title="展開">展開</a></p> <div class="tree" id="menu1"> <ul> <li><a href="a.html" title="あ" target="frame">あ</a></li> <li><a href="aa.html" title="ああ" target="frame">ああ</a></li> </ul> </div> --------------------------------------------------------------- 【参考ページ】http://amenti.usamimi.info/treemenu2.html というふうに作っているのですが、たとえばAページの上記ツリーをクリックした際に内容がBﾍﾟｰｼﾞのインラインフレームframeに表示され、かつツリーが展開しているというような動作は可能でしょうか。 いろいろと高望みをしているとは思いますが、できればお力をお貸しください。 よろしくお願いします。

  • シンプルな画像ギャラリー

    シンプルな画像ギャラリー シンプルな画像ギャラリーを探しています。ひとまず定番？のjqueryで探してみましたが見つからなかったので質問させてください。 多かったのが縮小画像をクリックすると拡大画像が表示されるものがほとんどでした。 実行したい事はテキストリンクをクリックすると拡大画像を表示する形式です。 具体的に表すと下記のような感じです。 <div id="main_image">※最初は01の画像を表示させたい</div> <ul id="galleryNavi"> <li><a href="img/01.jpg" class="current">01の画像</a></li> <li><a href="img/02.jpg">02の画像</a></li> <li><a href="img/03.jpg">03の画像</a></li> </ul> この状態で02の画像をクリックするとmain_imageの箇所に02の画像がフェードインしながら表示されa属性の01のclass="current"を消し02にclass="current"を付与させたいと思っております。 いくつかサンプルを見てみましたが画像をクリックするたびにURLの末尾にファイル名がつくものがありましたがURLは変えたくないです。 このような事を実現する場合どのように書けばいいのでしょうか？参考になるライブラリのサンプルでも構いませんので方法を教えてください！

  • jQueryでappleっぽい画像ギャラリー設置したいです

    http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？ 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？ 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する