TopJavaScriptjQueryプラグイン > 2012年10月
2012年10月31日

画像の一部をズームアップできるjQueryプラグイン「jqZoom」

October 31,2012 1:55 AM
Tag:[, , ]
Permalink

画像の一部をズームアップできるjQueryプラグイン「jqZoom」を紹介します。

jqZoom
jqZoom

1.概要

Amazonをはじめとする、オンラインショッピングサイトですっかり定着した機能として、画像のズームアップがあります。商品の質感やディテールなど、念入りに確認したいときに大変重宝します。

本エントリーで紹介するプラグインを利用すれば簡単に設置することができます。

画像ズームアップのプラグインはいくつか出回っているようですが、元画像を単に拡大するものが多く、商品の質感やディテールを見せるものとしては実用的ではありません。

その中でjqZoomプラグインは、元画像と別にズームアップ用の大きな画像を用意できるので使い勝手がいいと思います。また豊富なオプションも用意されています。

2.サンプル

サンプルを作りました。

もっともシンプルなサンプル
サンプル1

サムネイルで切り替えられるサンプル
サンプル2

ということで、3項から設定方法を紹介します。

3.jqZoomプラグインのダウンロード

「jqZoom」のページ左にある「Download」をクリック。

Download

ダウンロードのアイコンをクリック。これでファイル保存の画面が開きます。

Download

4.jqZoomプラグインのインストール

ダウンロードアーカイブを展開して、中にある

  • css/jquery.jqzoom.css
  • js/jquery.jqzoom-core-pack.js(またはjquery.jqzoom-core.js)

をサーバの任意のディレクトリにアップロードします。

5.jqZoomプラグインの設定

簡単なサンプルとして、次のHTMLとCSSを用意します。car_large.jpgはズームアップ用の画像、car_medium.jpgはマウスでポイントするための少し小さい画像です。

<a href="car_large.jpg" id="image">
    <img src="car_medium.jpg" />
</a>

次にhead要素に下記のlink要素を記述します。jquery.jqzoom.cssのパスは適宜設定してください。

<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css" />

また、body終了タグの直前に下記のscript要素を記述します。jquery.jqzoom-core-pack.jsのパスは適宜設定してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.jqzoom-core.js"></script>
<script>
$(function(){
    $('#image').jqzoom();
});
</script>

jqzoomを起動する「#images」は、jqZoomプラグインを実行したい画像のa要素を指定します。

6.サムネイルで切り替えるための設定

冒頭の2つめのサンプルのようにサムネイルで切り替えられるようにするには、まず次のようなHTMLを用意します。

<div class="clearfix" style="position:relative;">
  <a href="car_large.jpg" rel="gallery" id="image" title="demo" >
    <img src="car_medium.jpg" title="triumph">
  </a>
</div>
<ul id="thumblist" class="clearfix" >
  <li>
    <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: 'car_medium.jpg',largeimage: 'car_large.jpg'}">
      <img src="car_small.jpg" />
    </a>
  </li>
  <li>
    <a href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: 'flower_medium.jpg',largeimage: 'flower_large.jpg'}">
      <img src="flower_small.jpg" />
    </a>
  </li>
  <li>
    <a href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: 'orange_medium.jpg',largeimage: 'orange_large.jpg'}">
      <img src="orange_small.jpg" />
    </a>
  </li>
</ul>

前半のdiv要素はズーム画像を表示するエリアです。「rel="gallery"」という風に、任意の値を設定したrel属性を付け加えるのがポイントです。

<div class="clearfix" style="position:relative;">
  <a href="car_large.jpg" rel="gallery" id="image" title="demo" >
    <img src="car_medium.jpg" title="triumph">
  </a>
</div>
…後略…

その次のli要素(抜粋)に、a要素とimg要素を使ってサムネイル画像を指定します。

<ul id="thumblist" class="clearfix" >
  <li>
    <a href="javascript:void(0);" rel="{gallery:'gallery', smallimage:'car_medium.jpg', largeimage:'car_large.jpg'}">
      <img src="car_small.jpg" />
    </a>
  </li>
  …後略…

img要素にサムネイル画像を指定します。またa要素のhref属性には「javascript:void(0);」を設定し、rel属性の中にハッシュ形式で、次の3つを指定します。

  • gallery:前述のa要素のrel属性値
  • smallimage:マウスポイント用画像
  • largeimage:ズーム用画像

この設定を行うことでサムネイルをクリックしたときに画像が切り替わります。

また、選択されたサムネイルのa要素にはclass属性「zoomThumbActive」が付与されるので、CSSで装飾するとよいでしょう。

    <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery:'gallery', smallimage:'car_medium.jpg', largeimage:'car_large.jpg'}">
      <img src="car_small.jpg" />
    </a>

7.オプション

zoomType:ズームタイプを設定します。デフォルトは「standard」で、他に「reverse(レンズ部分を透過)」「drag(クリックしてドラッグ)」「innerzoom(画像内でズーム)」があります。

$(function(){
    $('#image').jqzoom({
        zoomType: 'reverse'
    });
});

zoomWidth:ズームエリアの幅を指定します(デフォルトは300)。指定した幅にあわせてマウスポイントエリアの幅も変化します。

$(function(){
    $('#image').jqzoom({
        zoomWidth: 200
    });
});

zoomHeight:ズームエリアの高さを指定します(デフォルトは300)。指定した高さにあわせてマウスポイントエリアの高さも変化します。

$(function(){
    $('#image').jqzoom({
        zoomHeight: 150
    });
});

xOffset:マウスポイントエリアとズームエリアのX軸方向のオフセットを設定します(デフォルトは10)。大きい値を設定するとマウスポイントエリアとズームエリアが離れます。

$(function(){
    $('#image').jqzoom({
        xOffset: 10
    });
});

yOffset:マウスポイントエリアとズームエリアのY軸方向のオフセットを設定します(デフォルトは0)。大きい値を設定するとマウスポイントエリアとズームエリアがずれて表示されます。

$(function(){
    $('#image').jqzoom({
        yOffset: 10
    });
});

position:マウスポイントエリアを起点としたズームエリアの位置を「right」「left」「top」「bottom」で指定します(デフォルトは「right」)。

$(function(){
    $('#image').jqzoom({
        position: 'left'
    });
});

preloadImages:「true」を設定すれば、ズームエリア画像を事前にロードします(デフォルトはtrue)。

$(function(){
    $('#image').jqzoom({
        preloadImages: true
    });
});

preloadText:ロード時のテキストを指定します。

$(function(){
    $('#image').jqzoom({
        preloadImages: true,
        preloadText: 'Loading zoom'
    });
});

title:「true」を設定すれば、ズーム画像の上部にタイトルを表示します。タイトル用のテキストはa要素のtitle属性から取得します(デフォルトはtrue)。

$(function(){
    $('#image').jqzoom({
        title: false
    });
});

lens:「false」を設定すれば、マウスポイントエリアのレンズを非表示にします。

$(function(){
    $('#image').jqzoom({
        lens: false
    });
});

imageOpacity:zoomTypeで「reverse」を設定したときに、レンズ部分以外の透過度を設定します(デフォルトは0.4)。

$(function(){
    $('#image').jqzoom({
        zoomType: 'reverse',
        imageOpacity: 0.5
    });
});

showEffect:「fadein」を設定すれば、ズーム画像をフィードインで表示します(デフォルトは「show」)。

$(function(){
    $('#image').jqzoom({
        showEffect: 'fadein'
    });
});

hideEffect:「fadeout」を設定すれば、ズーム画像をフィードアウトで非表示にします(デフォルトは「hide」)。

$(function(){
    $('#image').jqzoom({
        hideEffect: 'fadeout'
    });
});

fadeinSpeed:showEffectで「fadein」を設定したときのフェードインのスピードを指定します。

$(function(){
    $('#image').jqzoom({
        showEffect: 'fadein',
        fadeinSpeed: 'slow'
    });
});

fadeoutSpeed:hideEffectで「fadeout」を設定したときのフェードアウトのスピードを指定します。

$(function(){
    $('#image').jqzoom({
        hideEffect: 'fadeout',
        fadeoutSpeed: 1500
    });
});
Comments [0] | Trackbacks [0]
2012年10月19日

レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント

October 19,2012 1:55 AM
Tag:[, , ]
Permalink

先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。

サンプル(リンクは2項)
サンプル

手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。

なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。

1.はじめに

このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。

NHKスタジオパーク
NHKスタジオパーク

まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。

また、プラグインの設定によってはレイアウトの右側に余白ができてしまうので、カラムレイアウトやプラグインの設定を行う際のポイントについて解説します。

次に、jQuery Masonryプラグインを単純に有効にしただけでは、スマホなどブラウザ幅が狭い状態でもjQuery Masonryプラグインが有効になってしまい、Media Queriesを設定しても期待するレイアウトにならないケースがあります。

このエントリーでは、ブラウザ幅が一定のサイズ以下の場合にプラグインを無効にする方法も紹介します。

レスポンシブWebデザイン制作においてjQuery Masonryプラグインの利用がベストプラクティスであるかどうか分かりませんが、適用する際の最低限のテクニックを紹介します。

なお、アニメーションについてはレスポンシブWebデザインの主旨からはずれるので、このエントリーでは説明を省略しています。

ただし、次項のサンプルではブラウザで幅を変更したときに要素がどのように移動するかが分かるよう、便宜上有効にしています。

レスポンシブWebデザインの基本となるviewportとMedia Queriesの説明も、ここでは割愛しています。設定方法が分からない場合はサンプルのコードを参考にしてください。

2.サンプル

次のサンプルを用意しましたのでご覧ください。Google Chrome/Firefox/IE9で動作を確認しています。

サンプル

一番幅が広いときのカラムレイアウトは、ありがちな3カラムレイアウトっぽくしています。

3カラムの表示
サンプル

2カラムの表示
サンプル

1カラムの表示
サンプル

540px未満の表示(Media Queriesが有効)
サンプル

540pxより狭くなると、jQuery Masonryプラグインを無効にしています。

次項以降でそれぞれのポイントについて解説します。

3.レイアウトのセンタリングについて

ページ全体をセンタリングするには、jQuery Masonryプラグインを適用する要素にmarginを設定します。

たとえば、次のHTMLマークアップ、

<div id="container">
    <div class="box">aaa</div>
    <div class="box">bbb</div>
    <div class="box">ccc</div>
</div>
<script>
$(function(){
    $('#container').masonry();
});
</script>

の場合、全体をセンタリングするには、#containerにmarginを設定します。

#container {
    margin: 0 auto;
}

ただし、ブラウザ幅が狭いデバイスでMedia Queriesが適用されたときのセンタリングも必要です。またレイアウトを一定の幅に抑えたい場合も考慮し、bodyセレクタに次のmax-widthプロパティとmarginプロパティもあわせて設定しておきます。

body {
    max-width: 1000px;
    margin: 0 auto;
}

なお、body要素にだけ設定した場合、幅を狭くするとセンタリングが行われなくなるので注意してください。

body要素だけにmarginを設定したサンプル(NG)
サンプル

4.カラムレイアウト幅を要素全体の幅に追従させる

カラムレイアウトの幅を要素全体の幅に追従させるためには、プラグイン起動時のオプションとして「isFitWidth」を設定します。

$('#container').masonry({
    isFitWidth: true,
});

この設定を行うことで、冒頭のサンプルのように、要素全体の幅が変わったときにカラムレイアウト幅が追従するようになります。

この設定を忘れると、カラムレイアウトの右側に冗長な余白ができるので注意してください。

isFitWidthを設定していないサンプル(NG)
サンプル

5.カラムレイアウトについて

3項の設定だけでは、要素全体の幅とカラムレイアウト幅がぴったり合わない場合があります(ので「追従する」という表現にとどめました)。

すべての要素の幅が同じであれば問題ないと思われますが、サンプルのように異なる要素を複数配置する場合、幅の大きい要素は、一番小さい要素の全体の幅を加算した値にしてください。

たとえば、一番小さい要素の幅が170px、paddingが10px、marginが5pxの場合、全体の幅は

170px + (10px * 2) + (5px * 2) = 200px

となるので、次に大きい要素の幅は

170px + 200px = 370px

とします。

同じ要領で次に幅の大きい要素は、

370px + 200px = 570px

とします。

そして「一番小さい要素の全体の幅」の「200」をcolumnWidthの値に設定します。

$('#container').masonry({
    isFitWidth: true,
    columnWidth: 200,
});

columnWidthに誤った値を設定すると、レイアウトが崩れるので注意してください。

columnWidthに誤った値を設定したサンプル(NG)
サンプル

この設定が一番大事なところなので、もう一例挙げておきます。

一番小さい要素の幅が150px、paddingが10px、marginが5pxの場合、全体幅は、

150px + (10px * 2) + (5px * 2) = 180px

となるので、次に大きい要素の幅は

150px + 180px = 330px

とします。

同じ要領で次に幅の大きい要素は、

330px + 180px = 510px

とします。

そして「一番小さい要素の全体の幅」の「180」をcolumnWidthの値に設定します。

$('#container').masonry({
    isFitWidth: true,
    columnWidth: 180,
});

6.jQuery Masonryプラグインの無効化

すべてが同じ幅の要素であればこのテクニックは不要かもしれませんが、現実的には幅の異なる要素を配置するケースがあると思います。

前述したとおり、Media Queriesが適用された状態でjQuery Masonryプラグインが有効になっていると、期待どおりのレイアウトにならない可能性があります。

よって、一定の幅以下になった場合にjQuery Masonryプラグインを無効にするために、次のような変更が必要です。

変更前

$('#container').masonry({
    itemSelector: '.box',
    columnWidth: 200,
    isFitWidth: true
});

変更後

var flag;
var min_width = 540;
 
function check() {
    if ( $('html').width() < min_width ) {
        if ( flag ) {
            $('#container').masonry('destroy');
            flag = 0;
        }
    } else {
        $('#container').masonry({
            itemSelector: '.box',
            columnWidth: 200,
            isFitWidth: true
        });
        flag = 1;
    }
}
 
$(function(){
    check();
});
 
$(window).resize(function () {
    check();
});

変更後のJavaScriptでは、ページ読み込み時およびリサイズ時にブラウザ幅をチェックし、一定の幅(ここでは540px)未満になった場合に、destroy()メソッドを起動し(詳細)、jQuery Masonryプラグインを無効にします。540px以上になった場合は再び有効にします。

無効にしないままMedia Queriesが適用されたサンプル(NG)サンプル

ただ、スマホの縦横の方向変換がresize()だけではすべての端末で有効にならなかったような記憶があるので、すいませんが適宜確認してください。

※タイトルで「5つのポイント」と書きましたが4つの間違いです。すいません。

2012.10.20
サンプルを追加しました。

Comments [0] | Trackbacks [0]
2012年10月17日

ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」

October 17,2012 1:55 AM
Tag:[, , ]
Permalink

ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」の使い方を紹介します。

jQuery Masonry
jQuery Masonry

ブラウザの幅に応じてカラムレイアウトをある程度調節してくれるので、レスポンシブデザインウェブ制作にも使えそうです(これだけでは厳しいですが)。

このエントリーは「なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!!」の便乗記事です。

2012/10/20追記
jQuery MasonryをレスポンシブWebデザイン制作で使うためのノウハウをまとめた「レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント」も是非ご覧ください。

1.サンプル

配布サイトのトップページでも確認できますが、より簡単なサンプルを作ってみましたのでお試しください。

サンプル
サンプル

2.jQuery Masonryプラグインのダウンロード

jQuery Masonryのページにアクセスして、「Download the script jquery.masonry.min.js」を右クリックして「名前をつけてリンク先を保存」をクリック(Firefoxの場合)。

ダウンロード

ファイル名を「jquery.masonry.min.js」で保存します。

3.jQuery Masonryプラグインの設定

簡単なサンプルとして、次のHTMLとCSSを用意します。

<style>
.item {
  border: 1px solid #000;
  width: 250px;
  height: 200px;
  margin: 10px;
  float: left;
}
</style>
<div id="container">
  <div class="item">aaa</div>
  <div class="item">bbb</div>
  <div class="item">ccc</div>
</div>

次に、head要素に下記のscript要素を記述します。jquery.masonry.min.jsのパスは適宜設定してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
$(function(){
    $('#container').masonry();
});
</script>

「#container」の部分には、jQuery Masonryプラグインを実行したい一番外側の要素を指定します。上のサンプルではclass属性が「item」のdiv要素にjQuery Masonryが適用されます。

この設定だけではfloatの設定でレイアウトを変更しているように見えますが、プラグインで動作しています。

4.オプション

jQuery Masonryにはいくつかのオプションが用意されています。

animationOptions:アニメーションの設定が行えます。

$('#container').masonry({
    animationOptions: {
        duration: 400
    }
});

columnWidth:カラム幅を設定できます。

次のように設定すれば自動的にブラウザ幅にあわせて4カラムレイアウトに調整してくれます。

$('#container').masonry({
    columnWidth: function( containerWidth ) {
        return containerWidth / 4;
    }
});

containerStyle:masonryで指定した要素に、任意のスタイルをCSS形式で設定できます。

$('#container').masonry({
    containerStyle: {
        position: 'relative'
    }
});

gutterWidth:カラム間の幅を数値で指定します。

$('#container').masonry({
    gutterWidth: 30
});

isAnimated:アニメーションの有効・無効を設定します。animationOptionsを利用する場合は「true」を設定しないと動作しないようです。

$('#container').masonry({
    isAnimated: true,
    animationOptions: {
        duration: 400
    }
});

isFitWidth:カラムレイアウト全体をセンタリングしたい場合に「true」を設定します。

$('#container').masonry({
    isFitWidth: true
});

isResizable:リサイズをトリガにしてプラグインを起動します。デフォルトは「true」です。

$('#container').masonry({
    isResizable: true
});

isRTL:右から左方向にテキストを流し込みたい場合(right-to-left)に「true」を設定します。

$('#container').masonry({
    isRTL: true
});

itemSelector:対象にするセレクタを指定します。指定しない場合、すべての要素が対象になってしまうようです。

$('#container').masonry({
    itemSelector: '.box'
});

その他、アニメーションを滑らかにするにはCSS transitionsを利用した次の設定を行います。class属性値「masonry」は、「id="container"」を設定した要素に、プラグインで自動的に設定されます。

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}
.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

具体的なレイアウト方法については、「レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント」で別途紹介しています。

2012.10.20
記事を一部修正しました。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3