JQuery | memo-memo - Part 3 Skip to content

memo-memo

web制作に便利そうな情報をメモるブログ

Archive

Tag: jQuery

jQuery版のlight Box プラグインを使ってみた。

9月 14
WEB制作

一度は使ってみたかったプラグイン、light BoxのjQuery版を使ってみた。

http://leandrovieira.com/projects/jquery/lightbox/プラグインの配布サイトはこちら

使い方は、fancyzoomとほとんど変わりません。
まずは、ダウンロードしたjquery.lightbox-0.5.cssと、jquery.lightbox-0.5.jsをそれぞれ読み込みます。imagesフォルダに入っている画像も、コピーして、読み込みやすい場所に置いておきます。
で、
html

<a href="hogehoge_l.jpg" title="大きい写真" />
<img src="hogehoge_s.jpg" alt="" />
</a>

上記の用なhtmlを書きます。imgタグを、aタグで括り、そのaタグのhref属性に、大きい写真のパスを書きます。

で、ｊｓは、

ｊｓ

$(function(){
$("a").lightBox();
});

これで一応動きます。パラメーターを指定したいときは、

$(function(){
$('#light_box_area a').lightBox({
overlayBgColor : "#000",
imageLoading : "../../common/images/lightbox/lightbox-ico-loading.gif",
imageBtnClose: "../../common/images/lightbox/lightbox-btn-close.gif",
imageBtnPrev: "../../common/images/lightbox/lightbox-btn-prev.gif",
imageBtnNext: "../../common/images/lightbox/lightbox-btn-next.gif",
txtImage: "Imagem",
txtOf: "de"
});
});

こんな感じです。

赤文字の所が、若干FancyZoomとは違って、画像の入っているフォルダを指定するんじゃなくて、一つ一つ読み込む感じになるみたいです。でも、以前書いたFancyZoomの時の様に、bodyにクラスを付けて管理すれば、ちょっと管理が楽になるかも。

以前書いたFancyZoomの記事はこちら。

青文字の部分を追加すると、aタグのtitle属性にあてた文字（今回は、「大きい写真」）が、キャプションとして出力されます。

その他のパラメータは、本サイトを参照してください。

Leave a Comment , Read more

jQueryで、スライドを使って画像を拡大する

9月 12
WEB制作

jQueryと、jQuery.uiを使って、画像を拡大、縮小する方法が、下記のサイトに紹介されています。

http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jqueryこちらが、英語版の本家のサイト

で、
http://e0166.blog89.fc2.com/blog-entry-658.htmlこちらが、翻訳した日本語サイト

まだ、ちゃんと見ていないけど、工夫すれば、いい感じなUIになりそうな気がする。

これって、文字の大きさに応用出来ないかなぁ？

いつかやってみよう。

Leave a Comment , Read more

jQueryプラグイン、 Sliding Tab Menuを使ってみた

9月 9
WEB制作

なかなかいい感じに動くプラグインです。下記のサイトからダウンロードできます。
http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorialhttp://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial

ダウンロードしたフォルダの、「ｊｓ」から、jquery.scrollTo.jsをhtmlで読み込みます。cssは、とりあえず、ダウンロードしたサンプルhtmlの<style>タグの中のものをコピペで良いでしょう。

その際、cssのバックグラウンドで指定されている画像のパスを直さないといけません。ダウンロードしたてのサンプルhtmlの、71行目と、79行目に書かれている部分です。

htmlは、下記の感じです。

<body>
<div id=”scroller-header”>
<a href=”#panel-1″ rel=”panel”>Populars</a>
<a href=”#panel-2″ rel=”panel”>Comments</a>
<a href=”#panel-3″ rel=”panel”>Recents</a>
<a href=”#panel-4″ rel=”panel”>Categories</a>
</div>
<div id=”scroller-body”>
<div id=”mask”>
<div id=”panel”>
<div id=”panel-1″>
<ul>
<li>Simple JQuery Image Slide Show with Semi-Transparent Caption</li>
</ul>
</div>

<div id=”panel-2″>
<ul>
<li>30 Javascript Menu Plugins and Scripts</li>
</ul>
</div>

<div id=”panel-3″>
<ul>
<li>CSS and Web Gallery List : Promote and Increase your Website Traffic</li>
</ul>
</div>

<div id=”panel-4″>
<ul>
<li>ajax</li>
</ul>
</div>

</div>
</div>
</div>

</body>
</html>

青字の部分が、タブの部分になって、赤字の部分のid=panel-1～panel-4が、本文になります。<div>タグで括られている部分ですな。ちなみに、別に<ul>タグを使わずに、<p>でも動きました。

後は、jsで下記を書けば動くはず。

$(function() {
$(‘#mask’).css({‘height’:$(‘#panel-1′).height()});
$(‘#panel’).width(parseInt($(‘#mask’).width() * $(‘#panel div’).length));
$(‘#panel div’).width($(‘#mask’).width());
$(‘a[rel=panel]‘).click(function () {
var panelheight = $($(this).attr(‘href’)).height();
$(‘a[rel=panel]‘).removeClass(‘selected’);
$(this).addClass(‘selected’);
$(‘#mask’).animate({‘height’:panelheight},{queue:false, duration:500});
$(‘#mask’).scrollTo($(this).attr(‘href’), 800);
return false;
});
});

sidebar_sliding_tab_menu

こんな感じになります。

上のタブ部分をクリックすると、横にスライドして次を表示します。

Leave a Comment , Read more

jQuery プラグインHorizontal Accordionを使ってみた

9月 7
WEB制作

同じような名前のプラグインがあるみたいだけど…

今回使ってみたのは、こちらです。

http://www.portalzine.de/index?/Horizontal_Accordion–print

なかなか難関でしたな。

使い方は、とりあえず、上記のダウンロードページからファイルをダウンロードしたら、「lib」フォルダの中に入っている、「jquery.easing.1.3.js」と「jquery.hrzAccordion.js」ファイルを読み込みます。（jQuery本体も、もちろん読み込みます。）

後、「ｃｓｓ」フォルダから「jquery.hrzAccordion.defaults.css」を読み込んで、とりあえず準備完了。

後は、

$(document).ready(function() {
$(“.test”).hrzAccordion(
{eventTrigger:”mouseover”,
openOnLoad:”",
cycle: true
});

こんな感じで、プラグインを有効にすればよいです。（青文字はオプション）

ただ、何点か注意点があります。

まず、htmlですが、

<ul class=”test”>
<li>
<h6><img src=”images/ke_01.gif” width=”90″ height=”120″ />テキスト1</h6>
<p>テキスト1</p>
</li>
<li>
<h6><img src=”images/ke_02.gif” width=”90″ height=”120″ />テキスト2</h6>
<p>テキスト2</p>
</li>
<li>
<h6><img src=”images/ke_03.gif” width=”90″ height=”120″ />テキスト3</h6>
<p>テキスト3</p>
</li>
<li>
<div class=”handle”></div><h6><img src=”images/ke_04.gif” width=”90″ height=”120″ />テキスト4 </h6>
<p>テキスト4</p>
</li>
</ul>

上記のように、<ul>タグにクラスを付けます。

で、一つ目の注意点が、オレンジ文字で書いた空divなんですが…

サンプルをそのまま改造して作ってしまうと、アコーディオンに使用する為の文字だけのpngファイル（ダウンロードファイルのimagesフォルダにある）のheightを計算するように、jsが組まれているらしく、クラスhandleを指定しておかないとエラーで動きませんでした…

多分、オプション（このプラグインは、指定できるオプションが多めです。）か、jsのコードを直せば何とかなる気がするけど、そこまでは試してません…

二つ目の注意点は、cssです。アコーディオンに使用している画像は、cssのbackgroundで指定しています。「jquery.hrzAccordion.defaults.css」の48行目、51行目、54行目の画像のパスを直しましょう。

とりあえず、注意点はこんなところかな？多分、上記に気をつければきっと動くはず。わからなかった部分は、又今度勉強しましょう。

後、アコーディオンに使用されている画像は、透過pngになっているので、そのままではie6等のブラウザでは見れません。その辺の攻略法は、この記事とは、別記事を用意します。

Leave a Comment , Read more

jQueryプラグイン、Before/Afterを使ってみた

9月 3
WEB制作

以前の記事でメモっておいた、jQueryプラグインのBefore/Afterを使ってみた。

以前の記事はこちら

で、下記のコードでとりあえず問題なく実装できました。

html

<html>
<head>
<title></title>
<script type=”to/path/jquery.js”></script>
<script type=”to/path/jquery-ui-1.7.2.custom.js”></script>
<script type=”to/path/jquery.beforeafter.js”></script>
<script type=”to/path/javascript”>
$(function(){
$(“#beforeAfter“).beforeAfter();
});
</script>
<body>

<div id=”beforeAfter“>
<div><img src=”images/before.jpg” alt=”before” width=”320″ height=”240″ /></div>
<div><img src=”images/after.jpg” alt=”after” width=”320″ height=”240″ /></div>
</div>

</body>
</head>

こんな感じです。

が、ちょっとだけ注意点が…

それは、画像のパスです。

ダウンロードページから、プラグインをダウンロードすると、「ｊｓ」というフォルダーの中に、プラグイン本体と、使用する画像が3つ入っています。

で、プラグイン本体のコードに記述されている、使用する画像のパスを、直接変えてやらないと使用できませんでした。

変更したのは、48行目にある「handle.gif」のパスと、５９行目にある「lt-small.pngとrt-small.png」の３カ所です。各々のパスを、htmlからみたパスで記述したら、OKでした。

因みに、optionも指定できるようになっていて、

$(function(){
$(“#beforeAfter”).beforeAfter({
animateIntro : true,
introDuration : 500
});

こんな感じで、指定します。{}を忘れないように注意。

詳しくは、ダウンロードページに色々書いてあります。

Leave a Comment , Read more
memo-memo
Copyright © 2012 memo-memo Design by SRS Solutions top