シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
AD Gallery 今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。 最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。 設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。 サンプルを作ってみました。 シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」サンプル 各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。 Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。 【使用方法】 まず、こちらのAD Gall
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
美しいスタイルと軽快なアニメーションが気持ちいい、エラスティックレイアウト対応の画像ギャラリー
デモページ 2 実装 HTML メインとなるスライダー、サムネイル一覧、を2つのul要素で実装します。 <div id="ei-slider" class="ei-slider"> <ul class="ei-slider-large"> <li> <img src="images/large/1.jpg" alt="image01" /> <div class="ei-title"> <h2>Creative</h2> <h3>Geek</h3> </div> </li> <li>...</li> </ul> <ul class="ei-slider-thumbs"> <li class="ei-slider-element">Current</li> <li> <a href="#">Slide 1</a> <img src="images/thumbs/1.jpg" alt="thu
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
画像アップロード時にjQueryでサムネイルを表示する方法 | Web活メモ帳
通常、画像アップロードを行う際は一度フォームの内容を全て送信しなければいけません。自分がアップしたファイルを確認するのにひと手間かかってしまいます。 しかし、ajaxを使用する事により画像アップロード時に簡単にファイルを確認する事ができるようになります。 jQueryを使用したやり方を紹介している「Image Uploads with 100% Less Suck. Guaranteed.」というエントリーより。 詳しくは以下 以下のようなコードで実装できるようです。 <script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/ajaxupload.js" type="text/javascript"></script> $(document).ready(function(){ var
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
