2013-11-22

アコーディオンパネルソース｜Query基本形、アニメーションなし、CSSでの作り方

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>アコーディオン</title>
<style>
* {
  margin:0;
  padding:0;
}
dl {
  width:400px;
  margin:50px auto;
}
dt {
  background:#7CADB6;
  border-bottom:1px solid #FFF;
  cursor:pointer;
  padding: 8px 6px 6px 8px;
  color:#FFF;
  font-weight:bold;
}
dd {
  border:1px solid #7CADB6;
  border-top:none;
  height:300px;
  padding: 12px;
}
</style>
</head>
<body>
<dl>
<dt>テキスト1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
  $('dd:not(:first)').css('display','none')
  $('dt').click(function(){
if($('+dd',this).css('display')=='none'){
    $('dd').slideUp('slow');
    $('+dd',this).slideDown('slow');
}
});
});
</script>
</body>
</html>

（1）jQueryの命令を記述する場所を記述

$(function(){
    (中略)
});

（2）セレクターに1番目以外のパネル（dd要素）を指定

1番目以外のdd要素に対して、css()でdisplayプロパティをnoneに変更
この処理によって最初のパネル以外は非表示になり、アコーディオンパネルの初期状態になります

$(function(){  
  $("dd:not(:first)").css("display","none");
});

（3）ラベル(dt要素)に対してイベントを設定

dt要素がクリック（click）されるとclick(function(){…})内の処理を実行する

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
       (中略)
  });
});

（4）JavaScriptのif文を使って、処理を実行する条件を指定

セレクターで指定した要素のdisplayプロパティがnoneなら、{…}内に書かれた命令を実行する
セレクターの後ろにある,（カンマ）は、セレクターの影響範囲を指定
すぐ後ろになるthisは、イベントが発生した要素、このサンプルではクリックされたdt要素を表す
$("+dd",this) は、クリックされたdt要素の次に登場するdd要素を指します
現在閉じているパネルに対応するラベルがクリックされた場合のみ、{…}内の命令が実行されます

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
      if($("+dd",this).css("display")=="none"){
           (中略)
      }
  });
});

（5）すべてのdd要素に対してslideUp()を適用

slideUp()は、表示されている要素をスライドさせながら非表示にする命令です

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
      if($("+dd",this).css("display")=="none"){
         $("dd").slideUp("slow");
      }
  });
});

（6）クリックされたラベルに対応するパネル部分をアニメーション付きでスライド

セレクター$("+dd",this)は、クリックされた要素（dt要素）の次に登場するdd要素という意味
スライドアニメーション付きで要素を表示する命令はslideDown()です

$(function(){  
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
      if($("+dd",this).css("display")=="none"){
         $("dd").slideUp("slow");
         $('+dd',this).slideDown('slow');
      }
  });
});

アコーディオン - Query基本形

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>アコーディオン</title>
<style>
#faq {
  width: 500px;
}
.question {
  padding:5px;
  font-weight:bold;
  font-family:Arial;
  font-size:16px;
  border:1px solid #ddd;
  background:#eee;
  cursor: pointer;
}
.answer {
  padding:25px;
  font-family:Arial;
  font-size:13px;
  border:1px solid #ddd;
}
</style>
</head>
<body>
<divid="faq">
<divclass="question">Question 01</div>
<divclass="answer">Answer 01<br>Answer 01<br>Answer 01<br>Answer 01<br></div>
<divclass="question">Question 02</div>
<divclass="answer">Answer 02<br>Answer 02<br>Answer 02<br>Answer 02<br></div>
<divclass="question">Question 03</div>
<divclass="answer">Answer 03<br>Answer 03<br>Answer 03<br>Answer 03<br></div>
</div>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//最初以外を隠す
$('#faq .answer').not(':first').hide();
//クリックイベント
$('#faq .question').click(function(){
//スライドの処理
if($(this).next('.answer').is(':visible')){
        $(this).next('.answer').slideUp(300);
}else{
        $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300);
}
});
</script>
</body>
</html>

アコーディオン（アニメーションなし）

<dlclass="accordion">
<dt>Item1</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item2</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item3</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
</dl>
<dlclass="accordion">
<dt>Item1</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item2</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
<dt>Item3</dt>
<dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd>
</dl>

$(function(){
  $('.accordion').each(function(){
    var dl = $(this);
    var allDt = dl.find('dt');
    var allDd = dl.find('dd');
    allDd.hide();
        allDt.css('cursor','pointer');
    allDt.click(function(){
      var dt = $(this);
      var dd = dt.next();
      allDd.hide();
      dd.show();
      allDt.css('cursor','pointer');
      dt.css('cursor','default');
    });
  });
});

 * {
  margin:0;
  padding:0;
  line-height:1.4;
}
body{
  padding:40px;
  font-family:Arial, Helvetica, sans-serif;
}
dl{
  width:320px;
  margin:0 0 20px;
}
dt{
  padding:6px 10px 6px;
  background:#444;
  color:#fff;
  margin:0 0 3px;
  font-weight:bold;
  border-radius:8px 0 0 0;
  border-left:2px solid #444;
  border-top:2px solid #444;
}
dd{
  padding:8px 10px 12px;
  width:298px;
  border-left:2px solid #444;
  background:#eee;
  margin:-3px 0 3px;
}

CSSでアコーディオンパネル

HTMLの記述

「unordered list」または「definition list」を設定する
「unordered list」の中に「definition list」をネストすることも可能（例では、見出しと本文のセット）
マウスオーバーではなく、クリックの場合はjQueryを利用します

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>垂直タイプのアコーディオン式メニュー</title>
<linkhref="css/style.css"rel="stylesheet">
</head>
<body>
<ulclass="accordion">
<li>
<div>
<h2>特長1</h2>
<p>特長1の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長2</h2>
<p>特長2の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長3</h2>
<p>特長3の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長4</h2>
<p>特長4の詳細</p>
</div>
</li>
<li>
<div>
<h2>特長5</h2>
<p>特長5の詳細</p>
</div>
</li>
</ul>
</body>
</html>

@charset "UTF-8";

/*reset*/
* {
  margin:0;
  padding:0;
}

/*menu*/
.accordion {
  width: 400px;
  height: 300px;
  margin-left:10px; /*ブラウザ上の左の空き*/
}
.accordion li {
  color: #555;
  background: #fff;
  margin-bottom:5px;
  height:20%;
  overflow: hidden;
	-webkit-transition:all 0.4s ease-in;
	transition: 0.4s all ease-in;
	-moz-transition:all 0.4s ease-in;
	-o-transition:all 0.4s ease-in;
}
.accordion li:hover {
  height:70%;
}
.accordion li h2 {
  color: #333;
  margin-bottom: 10px;
  padding: 5px;
  background: #eee;
  border: 1px solid #ccc;	
}
.accordion li:hover h2 {
  color: #fff;
  background:#81AF86;
  border: 1px solid #ccc;
}
.accordion li div {
  padding-top:12px;
}

2013-11-21

jQuery Mobileが便利、良いらしいです

jQuery モバイルスマートフォン

「jQuery Mobile」を活用しスマートフォンサイト作成

「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。

授業では習わなかったのですが、多種多様なOS、画面サイズへ対応へできて、テンプレートも簡単にカスタマイズでき、使えるというだけで評価が高く見られるそうです。

参考

jQuery Mobileを使ったスマフォ・タブレット向けサイトがささっと作成できる -Cooky、特に飲食関連のビジネスやブログにぴったり | コリス

f:id:ayk-web:20131121192721p:plain

jQuery Mobileのテンプレート

f:id:ayk-web:20131121193003g:plain

2013-11-19

便利な「Google web fonts」

Google web font デザインフォント

「Google web fonts」

Google web fonts(グーグルウェブフォント)とは

Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来る便利なフォント。

f:id:ayk-web:20131119163401j:plain

サイト：Google Fonts

使い方参照→http://ozpa-h4.com/2012/12/26/google-web-fonts/

2013-11-18

コンテンツスライダー

JavaScript デザイン

ぜひメモっておきたいコンテンツスライダー記述

カルーセル（コンテンツスライダー）

コンテンツスライダ-
画像は適宜、準備すること

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>カルーセル（コンテンツスライダー）サンプル</title>
<linkrel="stylesheet"href="./css/style.css">
</head>
<body>
<divid="container">
<header>
<h1>カルーセルサンプル</h1>
</header>
<divclass="slider-area">
<divclass="scrollable"id="scrollable">
<divclass="items">
<divclass="item">
<pclass="photo">
<imgsrc="img/photo01.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント1</p>
</div>
<divclass="item">
<pclass="photo">
<imgsrc="img/photo02.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント2</p>
</div>
<divclass="item">
<pclass="photo">
<imgsrc="img/photo03.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント3</p>
</div>
<divclass="item">
<pclass="photo">
<imgsrc="img/photo04.jpg"height="390"width="700"alt="">
</p>
<pclass="comment">コメント4</p>
</div>
</div>
</div>
<aclass="prev browse left"></a>
<aclass="next browse right"></a>
<divclass="navi"></div>
</div>
<footer><p><small>with: jQuery Tools</small></p></footer>
</div>

<!-- jQueryの読み込み -->
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<!-- jQueryToolsの読み込み -->
<scriptsrc="./js/jquery.tools.min.js"></script>

<script>
$(function(){
  $("#scrollable").scrollable().navigator();
});
</script>

</body>
</html>

《jquery.tools.min.js》

/*!
 * jQuery Tools v1.2.7 - The missing UI library for the Web
 * 
 * scrollable/scrollable.js
 * scrollable/scrollable.navigator.js
 * 
 * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
 * 
 * http://flowplayer.org/tools/
 * 
 */
(function(a){a.tools=a.tools||{version:"v1.2.7"},a.tools.scrollable={conf:{activeClass:"active",circular:!1,clonedClass:"cloned",disabledClass:"disabled",easing:"swing",initialIndex:0,item:"> *",items:".items",keyboard:!0,mousewheel:!1,next:".next",prev:".prev",size:1,speed:400,vertical:!1,touch:!0,wheelSpeed:0}};function b(a,b){var c=parseInt(a.css(b),10);if(c)return c;var d=a[0].currentStyle;return d&&d.width&&parseInt(d.width,10)}function c(b,c){var d=a(c);return d.length<2?d:b.parent().find(c)}var d;function e(b,e){var f=this,g=b.add(f),h=b.children(),i=0,j=e.vertical;d||(d=f),h.length>1&&(h=a(e.items,b)),e.size>1&&(e.circular=!1),a.extend(f,{getConf:function(){return e},getIndex:function(){return i},getSize:function(){return f.getItems().size()},getNaviButtons:function(){return n.add(o)},getRoot:function(){return b},getItemWrap:function(){return h},getItems:function(){return h.find(e.item).not("."+e.clonedClass)},move:function(a,b){return f.seekTo(i+a,b)},next:function(a){return f.move(e.size,a)},prev:function(a){return f.move(-e.size,a)},begin:function(a){return f.seekTo(0,a)},end:function(a){return f.seekTo(f.getSize()-1,a)},focus:function(){d=f;return f},addItem:function(b){b=a(b),e.circular?(h.children().last().before(b),h.children().first().replaceWith(b.clone().addClass(e.clonedClass))):(h.append(b),o.removeClass("disabled")),g.trigger("onAddItem",[b]);return f},seekTo:function(b,c,k){b.jquery||(b*=1);if(e.circular&&b===0&&i==-1&&c!==0)return f;if(!e.circular&&b<0||b>f.getSize()||b<-1)return f;var l=b;b.jquery?b=f.getItems().index(b):l=f.getItems().eq(b);var m=a.Event("onBeforeSeek");if(!k){g.trigger(m,[b,c]);if(m.isDefaultPrevented()||!l.length)return f}var n=j?{top:-l.position().top}:{left:-l.position().left};i=b,d=f,c===undefined&&(c=e.speed),h.animate(n,c,e.easing,k||function(){g.trigger("onSeek",[b])});return f}}),a.each(["onBeforeSeek","onSeek","onAddItem"],function(b,c){a.isFunction(e[c])&&a(f).on(c,e[c]),f[c]=function(b){b&&a(f).on(c,b);return f}});if(e.circular){var k=f.getItems().slice(-1).clone().prependTo(h),l=f.getItems().eq(1).clone().appendTo(h);k.add(l).addClass(e.clonedClass),f.onBeforeSeek(function(a,b,c){if(!a.isDefaultPrevented()){if(b==-1){f.seekTo(k,c,function(){f.end(0)});return a.preventDefault()}b==f.getSize()&&f.seekTo(l,c,function(){f.begin(0)})}});var m=b.parents().add(b).filter(function(){if(a(this).css("display")==="none")return!0});m.length?(m.show(),f.seekTo(0,0,function(){}),m.hide()):f.seekTo(0,0,function(){})}var n=c(b,e.prev).click(function(a){a.stopPropagation(),f.prev()}),o=c(b,e.next).click(function(a){a.stopPropagation(),f.next()});e.circular||(f.onBeforeSeek(function(a,b){setTimeout(function(){a.isDefaultPrevented()||(n.toggleClass(e.disabledClass,b<=0),o.toggleClass(e.disabledClass,b>=f.getSize()-1))},1)}),e.initialIndex||n.addClass(e.disabledClass)),f.getSize()<2&&n.add(o).addClass(e.disabledClass),e.mousewheel&&a.fn.mousewheel&&b.mousewheel(function(a,b){if(e.mousewheel){f.move(b<0?1:-1,e.wheelSpeed||50);return!1}});if(e.touch){var p={};h[0].ontouchstart=function(a){var b=a.touches[0];p.x=b.clientX,p.y=b.clientY},h[0].ontouchmove=function(a){if(a.touches.length==1&&!h.is(":animated")){var b=a.touches[0],c=p.x-b.clientX,d=p.y-b.clientY;f[j&&d>0||!j&&c>0?"next":"prev"](),a.preventDefault()}}}e.keyboard&&a(document).on("keydown.scrollable",function(b){if(!(!e.keyboard||b.altKey||b.ctrlKey||b.metaKey||a(b.target).is(":input"))){if(e.keyboard!="static"&&d!=f)return;var c=b.keyCode;if(j&&(c==38||c==40)){f.move(c==38?-1:1);return b.preventDefault()}if(!j&&(c==37||c==39)){f.move(c==37?-1:1);return b.preventDefault()}}}),e.initialIndex&&f.seekTo(e.initialIndex,0,function(){})}a.fn.scrollable=function(b){var c=this.data("scrollable");if(c)return c;b=a.extend({},a.tools.scrollable.conf,b),this.each(function(){c=new e(a(this),b),a(this).data("scrollable",c)});return b.api?c:this}})(jQuery);
(function(a){var b=a.tools.scrollable;b.navigator={conf:{navi:".navi",naviItem:null,activeClass:"active",indexed:!1,idPrefix:null,history:!1}};function c(b,c){var d=a(c);return d.length<2?d:b.parent().find(c)}a.fn.navigator=function(d){typeof d=="string"&&(d={navi:d}),d=a.extend({},b.navigator.conf,d);var e;this.each(function(){var b=a(this).data("scrollable"),f=d.navi.jquery?d.navi:c(b.getRoot(),d.navi),g=b.getNaviButtons(),h=d.activeClass,i=d.history&&history.pushState,j=b.getConf().size;b&&(e=b),b.getNaviButtons=function(){return g.add(f)},i&&(history.pushState({i:0},""),a(window).on("popstate",function(a){var c=a.originalEvent.state;c&&b.seekTo(c.i)}));function k(a,c,d){b.seekTo(c),d.preventDefault(),i&&history.pushState({i:c},"")}function l(){return f.find(d.naviItem||"> *")}function m(b){var c=a("<"+(d.naviItem||"a")+"/>").click(function(c){k(a(this),b,c)});b===0&&c.addClass(h),d.indexed&&c.text(b+1),d.idPrefix&&c.attr("id",d.idPrefix+b);return c.appendTo(f)}l().length?l().each(function(b){a(this).click(function(c){k(a(this),b,c)})}):a.each(b.getItems(),function(a){a%j==0&&m(a)}),b.onBeforeSeek(function(a,b){setTimeout(function(){if(!a.isDefaultPrevented()){var c=b/j,d=l().eq(c);d.length&&l().removeClass(h).eq(c).addClass(h)}},1)}),b.onAddItem(function(a,c){var d=b.getItems().index(c);d%j==0&&m(d)})});return d.api?e:this}})(jQuery);

《style.css》

@charset "UTF-8";

body{
  margin: 0;
  padding: 0;
  background: #FFF url(../img/header_bg.png) repeat-x;
}
#container {
  width: 800px;
  margin: 0 auto;
}
footer {
  text-align: center;
}
p{
  margin: 0;
}
h1{
  margin: 0 0 1em;
  height: 30px;
  
  line-height: 30px;
  font-size: 1em;
  font-size: 1rem;
  color: #FFF;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}
.slider-area{
  position: relative;
  width: 800px;
  margin: 0 auto 2em;
}
.scrollable{
  position: relative;
  width: 700px;
  height: 390px;
  margin: 0 auto;
  overflow: hidden;
}
.items{
  width: 20000px;
  position: absolute;
}
.item{
  position: relative;
  float: left;
  width: 700px;
  height: 390px;
}
.photo img{
  width: 100%;
  height: auto;
}
.comment{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  padding: 0.5em;
  background: #FFF;
  background: rgba(255,255,255,.6);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ボタンのCSS（http://jquerytools.org/media/css/scrollable-buttons.cssを参考） */

/* prev, next, prevPage and nextPage buttons */
a.browse {
  background:url(../img/hori_large.png) no-repeat;
  display:block;
  width:30px;
  height:30px;
  float:left;
  margin:40px 10px;
  cursor:pointer;
  font-size:1px;
}

/* right */
a.right { 
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
  background-position: 0 -30px;
  clear:right; margin-right: 0px;
}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { 
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15px;
  margin-left: 0px;
  }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* disabled navigational button */
a.disabled {
  visibility:hidden !important;
}

/* ナビゲーション部分のCSS（http://jquerytools.org/media/css/scrollable-navigator.css） */

/* position and dimensions of the navigator */
.navi {
  text-align: center;
  height:20px;
}

/* items inside navigator */
.navi a {
  width:8px;
  height:8px;
  margin:3px;
  background:url(../img/navigator.png) 0 0 no-repeat;
  display:inline-block;
  font-size:1px;
}

/* mouseover state */
.navi a:hover {
  background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
  background-position:0 -16px;
}

/* iPad縦の想定サイズ */

@media (min-width: 481px) and (max-width: 768px){
.slider-area{
  width: 700px;
}
.scrollable,.item{
  width: 620px;
  height: 351px;
}
}

/* iPhone想定サイズ（横向きから） */
@media (max-width: 480px){
.slider-area{
  width: 320px;
}
.scrollable,.item{
  width: 320px;
  height: 179px;
}
.slider-area a.browse{
  display: none;
}
}

2013-11-08

jQueryでフィルタ（フィルタリング）機能・image placeholder

デザイン JavaScript jQuery アニメーション

jQueryで動きをつける記述、image placeholderサイトを使うと画像がない場合に仮画像がはめこめる便利機能について

f:id:ayk-web:20131108184232j:plain

見本 : http://webizm.jp/felica/jQueryFiltering/

javascriptが必要

《index.html》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>jQuery Filtering</title>
<linkrel="stylesheet"href="css/style.css">
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<scriptsrc="js/filtering.js"></script>
</head>
<body>
<divid="container">
<h1>jQuery Filtering</h1>

<divid="filter">
<ahref="javascript:void(0);"class="allitem">ALL</a> | <ahref="javascript:void(0);"class="cat">CAT</a> | <ahref="javascript:void(0);"class="food">FOOD</a> | <ahref="javascript:void(0);"class="view">VIEW</a> | <ahref="javascript:void(0);"class="flower">FLOWER</a>
</div>

<divid="filterlist">
<ul>
<liclass="cat"><ahref="#"><imgsrc="img/cat1.jpg"alt=""></a></li>
<liclass="view"><ahref="#"><imgsrc="img/view1.jpg"alt=""></a></li>
<liclass="food"><ahref="#"><imgsrc="img/food1.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat2.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat3.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower1.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat4.jpg"alt=""></a></li>
<liclass="view"><ahref="#"><imgsrc="img/view2.jpg"alt=""></a></li>
<liclass="food"><ahref="#"><imgsrc="img/food2.jpg"alt=""></a></li>
<liclass="view"><ahref="#"><imgsrc="img/view3.jpg"alt=""></a></li>
<liclass="food"><ahref="#"><imgsrc="img/food3.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat5.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat6.jpg"alt=""></a></li>
<liclass="food"><ahref="#"><imgsrc="img/food4.jpg"alt=""></a></li>
<liclass="view"><ahref="#"><imgsrc="img/view4.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat7.jpg"alt=""></a></li>
<liclass="food"><ahref="#"><imgsrc="img/food5.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat8.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower2.jpg"alt=""></a></li>
<liclass="view"><ahref="#"><imgsrc="img/view5.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat9.jpg"alt=""></a></li>
<liclass="food"><ahref="#"><imgsrc="img/food6.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower3.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat10.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower4.jpg"alt=""></a></li>
<liclass="view"><ahref="#"><imgsrc="img/view6.jpg"alt=""></a></li>
<liclass="cat"><ahref="#"><imgsrc="img/cat11.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower5.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower6.jpg"alt=""></a></li>
<liclass="flower"><ahref="#"><imgsrc="img/flower7.jpg"alt=""></a></li>
</ul>
</div>

<p><small>COPYRIGHT &copy; jQuery Filtering  ALL RIGHTS RESERVED.</small></p>
</div><!--/#container-->
</body>
</html>