colorboxでのinlineがうまく表示されないエラーでスムーススクロールが原因説 : 森のコーディング
9月8 colorboxでのinlineがうまく表示されないエラーでスムーススクロールが原因説 カテゴリ:jQueryjavascript Tweet colorboxありますよね。 モーダルウィンドウを組込むのに汎用性が高いので、lightbox系ではよく使います。 んで、ページ内のhtmlをモーダル内に表示させたい時、 inlineを使うのですが、なんかうまくいくときとうまく行かない時がある。 何が原因なんだーと思ってずーっと調べてたらスムーススクロールjsとバッティングしてるってことがわかりました。 jquery.smoothScroll.js ってやつね。 これとcolorboxのinlineを同時に使うと、モーダルが開かない。 解決策は簡単だった。 <a href="#inline_box" class="inline" data-tor-smoothScroll="noSmoo
jquery.colorbox.jsの使い方まとめ
色々な機能のライトボックスを実装できるjQueryプラグイン「jquery.colorbox.js」の使い方をメモ。 jquery.colorbox.jsは下記からダウンロードできます。 Colorbox – a jQuery lightbox HTML内に必要なファイルを読み込みます。 <link rel="stylesheet" href="colorbox.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.colorbox-min.js"></script> HTML 画像、埋め込みHTML、外部HTMLの3種類を試してみます。 <a href="../../img/01.jpg" class="lig
jQueryのlightbox系のプラグインColorboxをiPhone(スマホ)で使う : kagzugiの備忘録
Colorboxのダウンロードはこちら。 Colorboxはlightbox風の動作をするJavaScriptで、jQueryのプラグインとして動作します。 CSSのMedia Queriesを使ってレスポンシブなページを作っていると、lightbox系のJavaScriptでつまずきました。 iPhoneで幅480pxで作っています。 画像をクリックして「みよ～ん」と拡大されるのはいいのですが、画像の元の幅が480pxを超えてるとサイトのサイズをはみでて画像が表示されます。 当然の動きです。 でも、それだとかっこわるいです。 今作ってるサイトの幅は超えないでほしいです。 そこで英語のドキュメントとにらめっこしてみました。 で、解決方法です。 まず、Colorboxの設置作業は他のサイト等で情報がたくさんあるので省略します。 Colorboxが動くようにしてください。 次に<head>~<
カッコよくカスタマイズされたグーグルマップをモーダル表示させてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ こないだ「ファイナルファンタジーX HD Remaster」をクリアしまして、マッコリ飲みつつ夜中4時頃エンディングに感動、号泣しとりました(◞‸◟) どうでもいいですね✌(´ʘ‿ʘ｀)✌ さて、今回は「JavaScriptが苦手なあなたへ！グーグルマップを簡単にカッコよくカスタマイズする方法」という記事でご紹介したマップの実装に、モーダルを実装するプラグイン「colorbox」を使用して応用したものを作ってみました✌(´ʘ‿ʘ｀)✌ 以下、ご紹介させていただきますね( ˘ω˘) colorbox http://www.jacklmoore.com/colorbox/ 実装 それでは実装方法を解説していきます( ˘ω˘)☝ HTML モーダルを起動させたいボタンとモーダルウィンドウを用意してあげましょう。 モーダルウィンドウは
Lightbox風のjQueryプラグインColorBoxの使い方 – bl6.jp
綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹介です。とても人気のあるjQueryのプラグインなのでご存知の方も多いかと思います。画像をクリックするとポップアップ表示されるので、じっくりと見ることができます。パリエーションも色々あるので自分のサイトに合うようにカスタマイズしてみてもおもしろいですね。以下、使い方です。 [ads_center] ダウンロードしたフォルダの中にはexample1〜example5というフォルダがありますが、それぞれのバリエーションが異なるのでその中にある自分の使いたいCSSファイルとimagesフォルダをサーバーにアップロードします。 colorboxの中にはjquery.colorbox-min.jsとjquery.colorbox.jsが入っていますのでどちらか好きな方をアップロードします。ちなみにminの方が軽いです。 あとは<h
[JS]画像や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframe などもLightbox 風に表示させるにはjQueryプラグイン「Colorbox」が便利です。 カスタマイズしやすく、IE6でもそこそこ動きますので企業ページでも使える便利なプラグインです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
