簡易版スライダーを手作りしてみた
やっとできた。。。。
スライダーって言ってもものすごく簡単で使っている関数というかコマンドにあたるのかわかりませんが、
使っているのは２つだけ
- 「.show()」
- 「.hide()」
ただし、これだけだと単に消えるか出るかだけなのでjQuery UIのプラグインを二つ定義する必要があります。
- ローカルでテストするときはこちらを入れても使えます
- <script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script>
- <script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script>
サーバにアップする際は上記二つをディレクトリ内にファイルとして取り込んでください。
サーバ上ではドメインを超越した外部ファイルにはアクセスできません！
で、結果
のページのようになりました。
content部分がスライドします。
http://www.free-name-cardz.com/simple.html
長くて見づらいですが、classとかわからないと思うのでHTMLソースごと貼っておきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/common.css" /> <link type="text/css" rel="stylesheet" href="css/category_list.css" /> <link type="text/css" rel="stylesheet" href="css/modalbox.css" /> <script type="text/javascript" src="js/jquiry.js"></script> <script src="js/jquery.effects.core.js"></script> <script src="js/jquery.effects.slide.js"></script> <link type="text/javascript" rel="javascript" href="js/common.js" /> <title>無料名刺デザイン FreeNameCardz | しっぱ</title> <script type="text/javascript"> $(function(){ $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>"); $("#glayLayer").click(function(){ $(this).hide(); $("#overLayer").html(""); $("#overLayer").hide(); }); $(".detail_btn").click(function(){ var obj = $(this).parent().find("div"); viewModal(obj,$(this).attr("title")); }); $(".list_img").click(function(){ var obj = $(this).parent().find("div"); viewModal(obj,$(this).attr("title")); }); function viewModal(obj,param){ $("#glayLayer").show(); var category = obj.html(); var material = obj.nextAll().html(); var design = obj.nextAll().nextAll().html(); var imgSrc="details/images/"+param+".PNG"; var tag="<div style='background-color:#ffffff;'><img src='details/images/No1.PNG' alt='' title='' /><div>"+category+"</div><div>"+material+"</div><div>"+design+"</div><div><a href='http://yokotani.net'>注文する</a></div></div>"; $("#overLayer").append(tag); $("#overLayer").show().css({ marginTop:"-"+$("#overLayer").height()/2+"px" , marginLeft:"-"+$("#overLayer").width()/2+"px" }); return false; } //現在のページ位置（初期値は0） var now=0; //総ページ数 var page=$(".page").length; var index=0; //2ページ目以降を隠す $(".page").hide(); $(".page:eq(0)").show(); //1ページ目なので前へのリンクは隠す $(".prev").hide(); //nextのクリックイベント $('.next').click(function(){ $(".prev").show(); var target = ".page:eq("+ (now) +")"; now++; $(target).hide( 'slide' ,{direction: 'left'} ,'slow' , function(){ target = ".page:eq("+ (now) +")"; $(target).show( 'slide' ,{direction: 'right'} ,'slow' ,function(){}); }); //最終ページの時、次のページへのリンクを隠す if(now>=(page-1)){ $(".next").hide(); } }); //prevのクリックイベント $('.prev').click(function(){ $(".next").show(); var target = ".page:eq("+ (now) +")"; now--; $(target).hide( 'slide' ,{direction: 'right'} ,'slow' , function(){ // now--; target = ".page:eq("+ (now) +")"; $(target).show( 'slide' ,{direction: 'left'} ,'slow' ,function(){}); }); //最終ページの時、次のページへのリンクを隠す if(now<=0){ $(".prev").hide(); } }); }); </script> </head> <body> <div id="container"> <div id="header"> <h1><a href="index.html">FreeNameCardz 無料名刺デザイン| しっぱ</a></h1> <div id="h_wrap1"> <!--<h1><a href="#">FreeNameCardz | しっぱ</a></h1>--> <img src="images/title.PNG" width="960px" height="200px" alt="無料名刺デザイン FreeNameCardz | しっぱ" title="無料名刺デザイン FreeNameCardz | しっぱ" id="title_img"/> <div id="about_us"> <p>当サイトは無料で名刺デザインをお配りするサイトです。一切代金はいただきません。また著作権表示もありません。<br/>ただし、お客様のご厚意で<strong>当サイトへのリンク</strong>をお願いいたしております。</p> </div> </div> <div id="h_wrap2"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">サイトマップ</a></li> <li class="nav_last"><a href="#">お問い合わせ</a></li> </ul> </div> </div> <div id="wrapper"> <div id="content"> <div id="category"> <h2>シンプルな名刺|Simple!</h2> <hr /> <div class="pager"><span class="prev"><<前のページへ</span><span class="next">次のページへ>></span></div> <div class="page"> <!-- 1ページ目 --> <div class="list_row"> <div class="item_list"> <img src="details/images/No1.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No01" class="list_img"/> <div class="item_category">カテゴリ：Pretty</div> <div class="item_category">素材提供：しっぱ1</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="No01" class="detail_btn"/> </div> <div class="item_list"> <img src="details/images/No02.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No02" class="list_img"/> <div class="item_category">カテゴリ：Simple</div> <div class="item_category">素材提供：しっぱ</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="詳細を見る" class="detail_btn"/> </div> <div class="item_list"> <img src="details/images/No03.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No03" class="list_img"/> <div class="item_category">カテゴリ：Simple</div> <div class="item_category">素材提供：しっぱ</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="No03" class="detail_btn"/> </div> </div> <div class="list_row"> <div class="item_list"></div> <div class="item_list"></div> <div class="item_list"></div> </div> <div class="list_row"> <div class="item_list"></div> <div class="item_list"></div> <div class="item_list"></div> </div> </div> <!-- 2ページ目 --> <div class="page"> <div class="list_row"> <div class="item_list"> <img src="details/images/No1.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No01" class="list_img"/> <div class="item_category">カテゴリ：Pretty</div> <div class="item_category">素材提供：しっぱ2</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="No01" class="detail_btn"/> </div> <div class="item_list"> <img src="details/images/No02.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No02" class="list_img"/> <div class="item_category">カテゴリ：Simple</div> <div class="item_category">素材提供：しっぱ</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="詳細を見る" class="detail_btn"/> </div> <div class="item_list"> <img src="details/images/No03.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No03" class="list_img"/> <div class="item_category">カテゴリ：Simple</div> <div class="item_category">素材提供：しっぱ</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="No03" class="detail_btn"/> </div> </div> <div class="list_row"> <div class="item_list"></div> <div class="item_list"></div> <div class="item_list"></div> </div> <div class="list_row"> <div class="item_list"></div> <div class="item_list"></div> <div class="item_list"></div> </div> </div> <!-- 3ページ目 --> <div class="page"> <div class="list_row"> <div class="item_list"> <img src="details/images/No1.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No01" class="list_img"/> <div class="item_category">カテゴリ：Pretty</div> <div class="item_category">素材提供：しっぱ3</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="No01" class="detail_btn"/> </div> <div class="item_list"> <img src="details/images/No02.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No02" class="list_img"/> <div class="item_category">カテゴリ：Simple</div> <div class="item_category">素材提供：しっぱ</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="詳細を見る" class="detail_btn"/> </div> <div class="item_list"> <img src="details/images/No03.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No03" class="list_img"/> <div class="item_category">カテゴリ：Simple</div> <div class="item_category">素材提供：しっぱ</div> <div class="item_category">デザイン：しっぱ</div> <img src="images/detail_btn.png" alt="詳細を見る" title="No03" class="detail_btn"/> </div> </div> <div class="list_row"> <div class="item_list"></div> <div class="item_list"></div> <div class="item_list"></div> </div> <div class="list_row"> <div class="item_list"></div> <div class="item_list"></div> <div class="item_list"></div> </div> </div> <div class="pager"><span class="prev"><<前のページへ</span><span class="next">次のページへ>></span></div> </div> </div> <div id="sidemenu"> <h2 id="search"><em>名刺を探す</em></h2> <ul> <li id="l1"><a href="simple.html" class="stay"><em>シンプルな名刺</em></a></li> <li id="l2"><a href="cool.html"><em>かっこいい名刺</em></a></li> <li id="l3"><a href="pretty.html"><em>かわいい名刺</em></a></li> <li id="l4"><a href="pics"><em>写真名刺</em></a></li> </ul> <h2 id="home_print"><a href="#"><em>名刺を自宅で印刷</em></a></h2> <h2 id="agreement_state"><a href="agreement.html"><em>利用規約</em></a></h2> <h2 id="privacy_policy"><a href="privacy.html"><em>プライバシーポリシー</em></a></h2> </div> </div> <div id="footer"> <address>お問い合わせ<a href="mailto:dog.schipperke@gmail.com">schip-しっぱ-</a>.</address> <p><small>(c) copyright 2012 schip-しっぱ-</small></p> </div> </div> </body> </html>
世の中にスライダーは結構あるようです。
ただし、その中でもなかなか存在しない条件というのもあって
- 横にスライド
- イメージだけのスライド
- リンクが動かない（aタグをクリックしても動作しない)
- ID指定でしか動かない
このような条件下だとなかなか思ったものは手に入らないです。
前職でもそうでしたが、メンテナンスをすることを考えるとわからないものを使うわけにはいきません。
その条件が追加になるとほぼ自作になります。
今回は時間も少なかったので（急に思い立っただけですがｗ）拾い物で・・・と思ったのですがよいものがなく自作となりました。
ちなみにめったにないですが、classだけで動きます。
なぜclassで動くものがないのかというのはちゃんと理由があって、jQueryは少し前、classセレクタがDOMでのセレクタの動きと少し違ったため、思ったようにならない事象があったようです。
ですが、最近は特に問題なく使えるようになったみたいですね。
で、今回なぜclassだけにこだわったかというと。。。
静的ページだったから！
これにつきます。
というのも、「名刺デザイン」というお題である以上デザインは増え続けます。
そうなったときにページごとに
- htmlファイルを毎回増やすの？⇒絶対に嫌です
- 毎回divにid振ってcssも追加してってやるの？⇒絶対に嫌です
では、どうすればいいか。
「改ページしないで、htmlの中も極力コピペで済んだら楽じゃね？」
ってな感じでスライダーいったるか！・・・現在に至る
まあ、とは言っても1ページは更新しなきゃいけないわけですが、導入してみて。
かなりいいです！
昔作ってたシステムでも改ページごとにリクエストかけてましたので、ロードがイラっとすることもありました。
（Ajax覚えてからは裏でリクエストですがｗ）
それが、スライダーを使うことで「改ページした」って感覚が出てロードがかからない分「イラっと」がなくなりました。
導入して大満足ってとこですね！
全体像はここから
http://www.free-name-cardz.com/
進捗7割ってとこでしょうか。。。
問題は名刺デザインの数。。。。
もうひと頑張りしてから寝るかな。。
