- ベストアンサー
colorbox.js 画像クリックで閉じる
colorbox.jsを使用して、画像を拡大表示させたあと、 画像以外の部分をクリックしたときにウィンドウが閉じるのと同じように、 画像事体のどこをクリックしても、ウィンドウが閉じるようにしたいのですが、 どのようにすればよいでしょうか？ 現在は画像全体に閉じるイベントを設定したHTMLファイルを別に作成し、 colorbox.jsでiframeとしてポップアップさせているのですが、 画像ごとにＨＴＭＬファイルを作成しなくても、可能な方法がございましたら、 ぜひご教授して頂けますようよろしくお願いいたします。
- kirinraitu
- お礼率87% (80/91)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
colorboxをあまり良く知りませんが、 ドキュメントを見ると、close()メソッドが用意されているようですので… http://www.jacklmoore.com/colorbox/ ＞画像以外の部分をクリックしたときに～～、 ＞画像事体のどこをクリックしても、～～ どこをクリックしてもということになるのでしょうから、documentのクリックイベントで、$.colorbox.close()を実行すればよいのでは？ （非表示の時に、このメソッドを実行してエラーがでないかどうかはテストしていないのでわかりません）
関連するQ&A
- colorbox 画像が表示されない
質問おねがい致します。 本業は紙媒体で 並行して独学でwebを学んでおりますがJqueryのcolorboxが表示されずに いきづまっています。パスが違うとか素人の失敗だとはおもうんですが ドリームウィーヴァーで作成しているのですが テンプレートファイルを作成し 追加ページで画像にリンクをはり <div class="box"><a href="/images/mapBig.png" rel="example1" title="map"><img src="/images/mapSmall.png" width="245" height="147" alt="map" /></a></div> としているのですが ライブビューではちゃんとポップアップになるのですが ブラウザーでプレビューしたりサーバーアップして確認すると オーバーレイの黒い背景と白い棒が２本でてきて画像自体が表示されません 下記はテンプレートのソースです。 ジャバの部分はcolorboxからペーストです colorbox.cssの画像へのパスは url(images/controls.png) に統一しています どなたかお願いします！！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/javascript" /> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <!-- TemplateBeginEditable name="doctitle" --> <title>00000000000000000000</title> <!-- TemplateEndEditable --> <meta name="description" content="0000000000000000000000000" /> <meta name="keywords" content="00000000000000000000000000000" /> <link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="../js/colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/colorbox/colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head>
- ベストアンサー
- JavaScript
- colorboxの直接呼び出し方法について
通常、このような感じでjqueryのcolorboxを使ってますが、 （問題なく動きます。） <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.colorbox.js'></script> <script> $(document).ready(function(){ $('.colorbox').colorbox({iframe:true, innerWidth:700, innerHeight:430}); }); </script> <li><a href='test2.html' class='colorbox'>test2</a></li> 質問ですが、ipadである場所をクリックしたときに、動作する部分に、動くスクリプト内でカラーボックスを使って表示するところの書き方がわかりません。 <script> document.addEventListener('touchstart',catchTouch, false); function catchTouch(event) { cX =event.touches[0].clientX; cY =event.touches[0].clientY; if(10 <= cX && cX <= 170 && 10 <= cY && cY <= 40){pageScroll('fragment-1');} else if (10 <= cX && cX <= 170 && 650 <= cY && cY <= 680){window.open('order4.html','colorbox');} else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){location.href='call.html';} else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){？？？？？？？？;} } </script> ？？？？？？？？のところに何かを記述して、 <li><a href='test2.html' class='colorbox'>test2</a></li> これの動作と同じ事を実現するにはどのようにしたらよいのでしょうか？
- 締切済み
- JavaScript
- colorboxにいいね！ボタンなどをいれたい
今、ギャラリー風のサイトを構築中です。 Lightbox風のjQueryプラグイン、ColorBoxを使用しております。 ColorBoxはサムネールをクリックして、画面が暗転して画像が拡大表示されると、 右下に×の閉じるボタンが表示されます。 その左隣あたりに、Facebookのいいね！ボタンとピンタレストの“Pin it”ボタンを 設置したいのですが...JavaScriptが全然分からないので、 どこを触って良いかも分かりません。 拡大画像をHTML上でマークアップするさいに、aタグのtitleの所を上手く使う方法も あるのかな？とも思いますが、いちいちtitleに書き込むのもちょっと煩雑ですし、 できればJavaScriptにて自動に表示されれば...と思っております。 お分かりになる方、どうぞご教授ください。
- 締切済み
- JavaScript
- iframeからcolorboxの呼び出し
IEでのみエラーが起きていて、ハマってしまいました。 おかしな所などご指摘頂けると助かります。 トップページ内にiframeを読み込んでいます。 iframe内に設置した画像をクリックして、 トップページのcolorboxを呼び出して表示させています。 下記サイトを参考に、colorboxをiframe内から親ページに展開させる設定しています。 http://www.browncrown.net/blog/?p=2120 ■top.html ・colorbox用のjquery、css等一式読込 ・トップページ内の画像でも同じ画像を呼び出して表示させている→問題なし ・専用javascript記載 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script src="jquery.colorbox.js"></script> <script> function cbox(url,ttl){ var href = url; var title = ttl; $.fn.colorbox({ width: "500px", height: "500px", href:href, title:title, iframe: true, scrolling: "auto" }); } </script> ■iframe.html ・galleryviewというギャラリーを使用して、バナーをスライドしている。 その中の画像をクリックして、親（top.html）にcolorboxで画像を表示したい。 ・専用javascript記載 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script> function callparent(url,ttl){ parent.cbox(url,ttl); } </script> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ・colorbox呼び出し <a href="javascript:callparent('img/hoge.jpg','画像タイトル')"><img src="img/bnr.jpg" /></a> この設定でIEでのみエラーが出てしまいます。。 他のブラウザでは問題なく表示されます。 エラー内容は下記になります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ このページは表示できません • Web アドレス javascript:callparent('img/hoge.jpg' が正しいか確かめてください。 • 検索エンジンでそのページを探してください。 • 数分待ってから、ページを最新の情報に更新してください。 おかしな部分、ご指摘頂けると幸いです。
- 締切済み
- JavaScript
- highslide JSのポップアップ表示について
初めまして、よろしくお願いします。 「highslide JS」について分からない事がありますので質問させて頂きました。 現在ホームページを作成していて、 トップページにインラインフレームを設置し、 インラインフレーム内に写真を数枚表示させています。 インラインフレーム内の写真のポップアップ表示をするため、 「highslide JS」を使っているのですが、写真をクリックし拡大表示させると、 写真がインラインフレームの枠のサイズより大きいため、 自動的にインラインフレームに合わせたサイズに写真が縮小され表示されてしまいます。 また、拡大表示された後、ドラッグして移動させると写真が切れてしまいます。 サイズの方は、写真を小さくすれば解決するのですが（本当は写真を小さくしたくありません…）、 拡大表示された後の、ドラッグして移動させると写真が切れて表示されるのは解決できません。 そこで「highslide JS」のサイトを調べて、 FAQのhttp://vikjavev.no/highslide/forum/viewtopic.php?t=1351の http://vikjavev.no/highslide/example-inside-iframe.htmlを見つけました。 http://vikjavev.no/highslide/example-inside-iframe.htmlのページもインラインフレーム使用し、 その中に写真を表示させているようなのですが、 写真をクリックすると、インラインフレームのサイズよりも写真のサイズが大きいのにもかかわらず、 インラインフレームを飛び出したような感じで表示されています。 文章が分かりずらくてすみません…。 整理しますと、トップページのインラインフレーム内の写真をクリックし、 ポップアップ表示を親ウィンドウに表示させたいのです。 このように表示させるにはどのようにしたら良いでしょうか？ また、可能なのでしょうか？ 最後に、「highslide JS」の設置は、 http://www.kfstudio.net/blog/archives/910mt/20070126164154.phpのサイトを参考に、 JavaScriptソースやHTMLソースをコピペでなんとか設置できました。 JavaScriptはあまり詳しくありません。 長くなりましたが、JavaScriptに詳しい方、どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
- 画像クリックでポップアップ表示するには
画像クリックした時に拡大した画像を画面内のポップアップで表示したいのですが、 フリープラグインとやらを使った方法の参考サイトはいくつかあったのですが、 自分で作る事は難しいのでしょうか。
- 締切済み
- JavaScript
- Dreamweaverで「ポップアップウインドウの画像をクリックするとウインドウが閉じる」ようにする方法
Dreamweaverで作ったポップアップウインドウの画像をクリックすると、ポップアップウインドウが閉じるようにしたいのですが、どのようにすればよろしいでしょうか？ よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職
- 画像拡大のスクリプトで
使用感が自分にあっているのでcolorboxを現在使っているのですが、 画像をwidthでウィンドウのサイズに合せてリサイズする機能をオンにしています。 それはそれで便利なのですが、元のサイズで拡大して鑑賞したい時もあります。 なので元の解像度での表示に切り替えられれば嬉しいのですが そのようなことってcolorboxにはあるのでしょうか？ またないとしたら、このような元の解像度とウィンドウの幅によってリサイズとを切り替えられる 画像拡大のスクリプトって他にあるでしょうか？ この機能ってなかなか見つからないのですが・・・ http://colorpowered.com/colorbox/ 後、このカラーボックスで画像をクリックして次の画像を表示する時に 現在は一瞬で切り替わる感じなのですが、 多少フェードする感じに出来ないものでしょうか？
- ベストアンサー
- JavaScript
- Highslide JSで
http://highslide.com/ こちらのスクリプトで次のことは実現できるでしょうか？ ポップアップする画像ウインドウを ブラウザの何%というサイズに指定する。 （現在の状態では大きすぎて下のコントローラが隠れてしまいます） 後、ポップアップした画像をクリックするとその画像が閉じられるのですが、 閉じるのではなくて次の画像に行くようにする もしできるとしたらどの項目でしょうか？ 宜しければ教えてください。
- ベストアンサー
- JavaScript
- ビルダーでポップアップウィンドウの作成！
お世話になります。 ホームページビルダーVer１０でHPを作成しています。 そこでHP内にポップアップウィンドウを設置したいのですが・・・。 イメージといたしまして、 (1)親ページ内の例えばサムネイルをクリック (2)ポップアップウィンドウが開き (3)ウィンドウ内には【サムネイルの拡大画像＋その他のサムネイル数枚＋コメント】 ※この際表示されたポップアップウィンドウ内のサムネイルをクリックすると、ウィンドウ内の拡大画像の表示が切り替わる。 ↑上記の様に表示をさせたいのですが、皆様のお力をお借り出来れ幸いです。 何卒宜しくお願い致します。 m(_ _)m
- 締切済み
- ホームページ作成ソフト
お礼
回答ありがとうございます。 頂いた回答を参考に、JS未経験ですがチャレンジしたいと思います！