画面いっぱいに広がったグリッドレイアウト のイメージギャラリーをドラッグで動かす 事ができるコンテンツをjQueryで実装する 為のチュートリアルです。かなり良く出来 てます。iPhoneでも一応可能でしたので 工夫すればスマートフォンにも使えるかも。 Codropsのチュートリアルが相変わらず素敵なのでメモがてら。画面全体に広がったグリッドレイアウトのイメージギャラリーを丸ごとドラッグで動かせるようにする、というチュートリアル。 Draggable Image Boxes Grid 画面全体にギャラリーが広がり、全体をドラッグで動かせます。これは、Stephen HamiltonのWebサイトをオマージュしたもの。Stephen HamiltonはFlashですが、同じようなUIをjQueryで作ろう、という趣旨みたいです。ドラッグにはjQuery.kineticを使用しています。 サム

スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP

twitter facebook hatena google pocket 背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js

twitter facebook hatena google pocket 全画面スライドをさせられるとサイトの遷移が面白くなり、ユーザーを惹きつけることができます。 :: Alessandro Ferrini :: FerroSlider jQuery Pluginはこれを簡単に実現できます。 また簡単にプレゼンにも流用できそうです。 sponsors 使用方法 :: Alessandro Ferrini :: FerroSlider jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.ferro.ferroSlider.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script

twitter facebook hatena google pocket 画像の切り替えが面白い画像ギャラリーがあったので、ご紹介します。 Jquery Slider with transition effects (bounce and switch effect)はモザイクをランダムに散らしたような感じで画像間の切り替えをさせられます。 sponsors 使用方法 Jquery Slider with transition effectsからファイル一式をダウンロードします。 <link rel="stylesheet" href="jfancytile.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript

twitter facebook hatena google pocket 本をめくるような表現を付けられるJavaScriptです。 FlipPage: Tournez les pages sur votre iPad !では、iPhoneをはじめ、Androidなどでもタップでめくることが可能です。 sponsors 使用方法 FlipPage: Tournez les pages sur votre iPad !からファイルをダウンロード。 <link rel="stylesheet" href="jquery.flippage.css" type="text/css"> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jque

Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the

jQueryでマウスホイールで横にスクロールする横型コンテンツ 通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。 機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。 投稿日2011年07月21日 更新日2011年07月21日 html+css htmlはナビゲーションであるリストとコンテンツを入れるためのdivが５つあります。 html <div id="contents"> <ul id="nav"> <li><a href="#s01">01</a></li> <li><a href="#s02">02</a></li> <li><a href="#s03">03</a></li> <li><a

jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。 このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。 ウインドウのサイズや位置などもパラメータで指定するだけです。 ※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です 1.jQueryをダウンロード まずは、jQueryが必要になります。公式サイトから最新版をダウンロードしてきます。 2.プラグインをダウンロード 次にプラグインのサイトからjquery.popupwindow.jsをダウンロードします。 2.JSを読み込み ダウンロードしたjQueryとpopupwindow.jsを読み込みます。 <script type="text/javascript" src="jquery.min.js"></scrip

twitter facebook hatena google pocket トップページとかで告知エリアとしてメインビジュアルを大きい画像で回すケースが見受けられます。 多くがFLASHで実現しているかと思いますが、jQueryプラグインのProfessor Cloudでも実現が可能です。 sponsors 使用方法 Professor Cloudからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="cloud-carousel.1.0.5.js"></script> <script type="text/javascript"> $(function(){ $("#id名").CloudCarousel({

twitter facebook hatena google pocket 画像ギャラリーを使用する際に、多くの画像を一覧で見せたいという希望があるかもしれません。 従来までのものだと、初期時にあまり多くを非表示できませんでした。 そこで、一度に多くの画像を見せられるjQueryプラグインMosaiqy: a nice jQuery pluginを紹介します。 sponsors 使用方法 Mosaiqy: a nice jQuery pluginからファイル一式をダウンロード。 まずhead内に下記を記述します。 <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE

twitter facebook hatena google pocket マウスオーバーでちょっとエフェクトをかけたい。 でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。 今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。 via：Useful image hover slide effect with jQuery | image hover,image slide sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 またマウスオーバーで変化を与えたい画像を下記のように記述します。 <div id="id名"> <a href="#"><amp-img src="画像パス" /></a> </div> なお、画像はエフェクト分を含めた形で作成します。 このため、最初はオーバー画

全画面をダイナミックにイメージギャラリー として使えるようにするjQueryプラグイン JQUERY.MB.BGNDGALLERY。同じ ようなライブラリは沢山あるので選択肢 の一つとして覚えておこうかなと思いま す。Flikcrからも流せるみたいです。 インパクト合っていいですねー。個人的にはこういう写真の見せ方が一番好きです。良い写真をコンテンツとして持っているならそれをアピールしない手は無いですよね。ただ、このライブラリの作者さん、IEが嫌いみたいで・・・まぁそんな感じです。 ナビボタンによって画像が切り替わります。縦にアニメーションスライドするタイプとフェードするタイプの2つがサンプルとして用意されていますよ。 Flickrから読み込んだりも。 $.mbFlickr.flickr_api_key="f40779ab07dd09e5890f48e3618296b3"; $.mbFli