[B! *jQuery] fushimikのブックマーク

色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」 – bl6.jp

お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ログインフォームや動画、地図などといった色んなメニューやコンテンツをモーダルウィンドウで実装することができる「Pop Easy」です。オプションで色んな設定変更が可能なので自分好みにカスタマイズもしやすいですね。 [ads_center] 使い方実際のデモではこのようにログインフォームや動画など実用性あるコンテンツをモーダルウィンドウで実装されています。なかなかお洒落でよさそうですね。使い方もシンプルで特に難しい設定はなさそうな感じです。オプションでエフェクト、スピード、背景色、透明度など色んな項目が設定できます。 $(document).ready(function(){ $('.modalLink').modal({ trigger: '.modalLink', olay:'div.overlay', modal

fushimik 2013/06/06

リンク

ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。 - Wataame Frog

上記構成で説明します。ダウンロード以下URLよりダウンロードします。 Download Uploadify - Uploadify 書庫ファイルを展開して、 /js/uploadify/ に設置。 js と同階層にアップロード用のフォルダ uploads を作成します。パーミッションは707とか777で。ちなみにフォルダ名は任意です。同梱の uploadify.php にて設定可能です。 /index.php アップローダを設置するメインとなる index.php の説明。内容はほとんど同梱されている index.php そのままです。各ファイルへのパスと、フォームのID名をjavascriptのコードにあるセレクタ名と合わせてばOKです。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content=

fushimik 2013/05/27

リンク

要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」 – bl6.jp

面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」です。CSS3を利用して動作しているそうですね。機能や使い方もとてもシンプルです。 [ads_center] 使い方 jQueryとプラグインを読み込みます。clickというid名の要素がクリックされたらexampleというid名の要素が動作します。 <script src='http://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script src="jquery.betterToggle.js"></script> <script type="text/javascript"> $(function() { $

fushimik 2013/04/05

*jQuery

リンク

各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」 – bl6.jp

複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」をご紹介します。各要素ごとに異なるアニメーションを設定できたり、とても面白い動きを与えることができます。ユーザーの目線を集中させることができそうですね。 [ads_center] 使い方 jQueryとダウンロードしたプラグインを読み込みます。 <link href="fractionslider.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript" src="jquery.fractionslider.js"></script> マークアップはこんな感じで。 <div class="slider

fushimik 2013/04/05

*jQuery

リンク

レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive Thumbnail Gallery Plugin」 – bl6.jp

ホーム JavaScript レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive Thumbnail Gallery Plugin」レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive Thumbnail Gallery Plugin」がよさそうだったのでメモがてらご紹介します。サムネイル画像から見たい画像を選択することができます。レスポンシブ対応なのでスマホでも見れるのがいいですね。 [ads_center] 使い方次のようにセットします。 $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); 以下はPC画面で見た時。ブラウザサイズを縮小した時。イメージギャラリーを作成す