fancyboxのポップアップ時の画像の白枠の削除

このQ&Aのポイント
  • fancyboxを使用してポップアップ画像を表示する際に、白枠が残る問題が発生しています。
  • 参考サイトのコードを使用してフォルダを配置し、必要なスクリプトを追加しましたが、白枠が削除されません。
  • gallery属性をgroupに変更したり、paddingをmarginに変更しても問題は解決しません。どうすれば解決できるでしょうか?
回答を見る
  • ベストアンサー

fancyboxのポップアップ時の画像の白枠の削除

http://fancyapps.com/fancybox/#examples このサイトを参考にして、 <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); ------------追加した部分------------ $(".fancybox") .attr('rel', 'gallery') .fancybox({ padding : 0 }); ------------------------------------ </script> と</head>の上に書いたのですが、白枠が残っています。 フォルダはほぼそのまま入れて、fancybox自体は挙動するのでリンクも間違っていないはずです。 htmlは <a class="fancybox" rel="group" href="images/1_b.jpg"><img src="images/1_s.jpg" alt="" /></a> <a class="fancybox" rel="group" href="images/2_b.jpg"><img src="images/2_s.jpg" alt="" /></a> です。 念のためgalleryをgroupにしたり、paddingをmarginにしてもダメでした。 何が問題なのでしょうか?ご教示お願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

ANo1です。 回答してから気付きました。  backgroundをtransparentにするのが一番簡単かも。

hpineh0913
質問者

お礼

回答ありがとうございました。 cssでカスタマイズできるものでも、はじめから自分が書いたものでないと戸惑ってしまうことが多いです。大変参考になりました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

よく知りませんけれど、サンプルをちょこっと覗いてみたところ・・・ fancyboxのポップアップの表示要素は  <div class="fancybox-skin">   <div class="fancybox-outer">    <div class="fancybox-inner">     <img class="fancybox-image" alt=""> ← 表示画像    </div>   </div>  </div> といった構成になっているようです。 余白を作っているのは、このうちのfancybox-skinにpadding:15pxと指定されていることによりますので、そのあたりを調整してあげる必要があります。 クローズ用の×印がさらに外側の要素で  <a class="fancybox-item fancybox-close"> で定義されているようですが、このレイアウトによってさらに外側の要素で右側に余白状のものが残る可能性があります。 position:absoluteなどに変えて表示するようにする必要があるかもしれませんね。

関連するQ&A

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか? 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • fancyboxにイメージマップを付けたい

    早急に解決しなければいけない問題なのですが、どうしてもわからず途方にくれています。 どなたか助けていただけませんでしょうか。 fancyboxで表示したイメージ画像にイメージマップを付け、リンクを飛ばしたいと思っています。 https://gist.github.com/2972293 上記のサイトを参考にして一時は上手く行ったのですが、 いくつかの画像にそれぞれ個別のリンクを設定しようとしたところ、同じリンク先にしか飛ばない事に気付きました。 #Mapを増やせばいいのかなと思ったのですが(#Map2や#Map3など) 自分で書いても上手くいきませんでした。 どうすれば複数の画像に別々のリンク先を設定するようにできるでしょうか。 ご回答宜しくお願いします。 一応自分で書いたhtmlを載せておきます。 ----------------------------- <script type="text/javascript"> $(function() { $(".fancybox").fancybox({ padding:0, margin:0, onComplete: function() { $('#fancybox-img').attr('usemap', '#Map'); } }); }); </script> <a href="images/test.jpg" class="fancybox"><img src="images/test.jpg" alt="イメージ" width="138" height="111" /></a> <map name="Map" id="Map"> <area shape="rect" coords="317,347,547,364" href="http://yahoo.co.jp/" target="_blank" /></map> <a href="images/test2.jpg" class="fancybox"><img src="images/test2.jpg" alt="イメージ" width="138" height="111" /></a> <map name="Map" id="Map"> <area shape="rect" coords="317,347,547,364" href="http://google.co.jp/" target="_blank" /></map>

  • サムネイル画像のclass切替がうまく動かない。

    すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。

  • 順番にクラスをつけていく方法

    順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード0にしてactiveクラスがついたときに フェードを100にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>

  • jqueryについて(v 1.4.2)

    jqueryについて(v 1.4.2) <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。

    • ベストアンサー
    • AJAX
  • 画像のフェードイン・フェードアウト

    現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。(あまり関係ないと思う部分は省いてます) 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • lightwindowでPDFを表示させるには?

    lightwindowを使って、PDFを表示させたいと思っています。 いろいろなサイトを参考にして、以下のようにコーディングしたのですが、 jpgの方はうまく表示されるのに、PDFは何も起こりません。 PDFは何か特別な指定が必要なのでしょうか? <!--Lightwindowスクリプト開始--> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <!--Lightwindowスクリプト終了--> 【うまくいかないPDF】 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"><img src="img/wind02-1mini.jpg" alt="第13号" border="0"></a> <a href="file/wind02-2.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-3.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-4.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> 【うまくいくjpg】 <a href="img/8tiiki-1.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"><img src="img/8tiiki-1mini.jpg" alt="第8号 地域版" border="0"></a> <a href="img/8tiiki-2.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"></a>

  • relタグにリンクスタイルを指定したい

    いつもお世話になっております。 初心者なのですが試行錯誤をしつつWEBを制作しています。 jQueryのFancyboxを使って画像の表示をさせているのですが、その画像に対してリンクスタイル(マウスオーバーで画像に枠線表示)を指定したいのです。 コードの一部として以下のようになっています。 <a rel="press_group" href="image/press_06.jpg"><img src="image/press_06.gif" width="386" height="546" alt="プレス_06" /></a> <a rel="press_group" href="image/press_07.jpg"><img src="image/press_07.gif" width="340" height="241" alt="プレス_07" /></a> このような場合どのようにスタイルシートを書けばいいのでしょう? Fancybox自体は正常に動いています。 何卒ご教授よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 二重の画像切り替え

    以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 (ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。) 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 CのいずれかをクリックするとBの3つのサムネイル画像がすべて切替り、 更にBのいずれかをクリックすると拡大画像のAが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←A(Bの拡大画像) └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←B(車の各方向からの写真画像) └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←C(車のカラーバリエーション) └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--A(Bの拡大画像)--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--B(車の各方向からの写真画像)--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--C(車の各方向からの写真画像)--> <div class="color">   <ul>     <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト-->  ・  ・  ・

  • jCarouselLiteループ時の属性値取得

    jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分5つの1ループ目はそれぞれ取得できるのですが、2ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){   alert($(this).attr("href"));//←2周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。