DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

Orbit(オービット) jQueryイメージ・スライダー

いましてる仕事シリーズで
Orbit(オービット)というスライドショーを入れました。

後で知ったのですが
↓こちらのサイトで使い方が詳しく書かれていました(^^;
[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit

Orbit:なめらかなjQueryイメージ・スライダー・プラグイン
http://www.zurb.com/playground/jquery_image_slider_plugin
Orbit-001.jpg

↓こちらからダウンロード
Orbit-002.jpg

これもいつも通り<head>~</head>のあいだに読み込みます。<全角です
<script src="js/jquery.min.js" type="text/javascript">
<script src="js/jquery.orbit.min.js" type="text/javascript">


CSSも一緒に読み込みます。
<link rel="stylesheet" href="css/orbit.css">

それから、こちらのジャバスクリプトの呪文をコピペ
<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit({
              bullets: true, //スライドショーの下の●の表示。true 表示。false 非表示。
              animationSpeed: 800, //切り替えの早さ
              advanceSpeed: 4000,  //切り替えまでの時間
              directionalNav: false, //方向ナビ>と<の表示。true 表示。false 非表示。
         });
     });
</script>
この #featured の部分がスライドさせる部分です。

↓HTMLはこんな感じ。
<div id="featured">
<img src="画像1.jpg" />
<img src="画像2.jpg" />
<img src="画像3.jpg" />
</div>

↓画像にキャプションを入れるなら、こんな感じ
<div id="featured">
<img src="画像1.jpg" />
<img src="画像2.jpg"data-caption="#htmlCaption" />
<img src="画像3.jpg" />
</div>
<!-- キャプション -->
<span class="orbit-caption" id="htmlCaption">キャプションに<a href="#">リンク</a>を入れたりとか</span>

キャプションを<span></span>で囲む。
その<span>に「class="orbit-caption"」を入れる。
それから、画像を対応させるために、idを指定。このidは別になんでも良いみたいです。

・・・ちなみに、私は タイマーを表示させたくなくて
Orbit-007.jpg

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit({
              bullets: true, //スライドショーの下の●の表示。true 表示。false 非表示。
              animationSpeed: 800, //切り替えの早さ
              advanceSpeed: 4000,  //切り替えまでの時間
              directionalNav: false, //方向ナビ>と<の表示。true 表示。false 非表示。
             timer: false //タイマー 消す
         });
     });
</script>
これにしたら、タイマーも消えたけど、画像そのものが切り替わらなくなっちゃったんで
読み込んでいるCSSの
/* TIMER
   ================================================== */
で始まっているブロック全体をコメントアウトしたら、
表示だけ消えて、画像は切り替わるようになりました(^^;)

これも余談ですが
解凍したらMacの関係がエラーになるみたいです?
Orbit-003.jpg

でもとりあえずそのまま進むと、Mac用とWin用のフォルダがあるので
Orbit-004.jpg

私はWinなので、中身をみてみると
Orbit-005.jpg

デモが入ってます。
Orbit-006.jpg

Contained Sticky Scroll を使ってついてくるサイドメニュー

さぶメニューつながりで、今やってる他の仕事で
ついてくるサイドメニューを使ったので、めも。

↓こんな感じ(別画面で開きます)
ついてくるサイドメニュー

使っているのは jQueryのプラグイン「Contained Sticky Scroll」です。
↓もとサイトはこちら(別画面で開きます)
Contained Sticky Scroll
20120930-001.jpg

↓ちなみに、もとサイトのデモページはこちら(別画面で開きます)デモページに説明が載っています。
http://blog.echoenduring.com/wp-content/uploads/demos/echo_ContainedStickyScroll/


↓いつも通り、<head>~</head>内にjQueryとプラグインのContained Sticky Scrollを読み込みます。
 <全角です
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-contained-sticky-scroll.js"></script>


↓設定するのにこちらも<head>~</head>内にコピペ <全角です
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#sidebar').containedStickyScroll({
duration: 150, //ついてくるスピード 数字が大きいほど遅い感じ
closeChar: ''
});
});
</script>


あとは、ついてきてほしい部分(サイドメニュー)を この場合は id="sidebar" で指定。
余談ですが
私はコーディングが下手なので、サイドバーの入っている部分の高さがうまく出なくて困りました(^^;)
そんな時には、ボックスを横並び…で使った heightLine.js(別画面で開きます)を使っています。

・・・話をもとに戻すと
closeChar: ''なんですが、つけるとしたら
↓こんな感じ
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#sidebar').containedStickyScroll({
duration: 150, //ついてくるスピード 数字が大きいほど遅い感じ
closeChar: '×'
});
});
</script>


この #sidebar が、ついてこさせたい部分のidです。 それから closeChar: '×' の × がついてくる部分を ついてこなくするための部分、
クリックするとついてこなくなります。
20120930-002.jpg

でもクリックして、×が消えてしまったら、次はどう出したらいいのかイマイチ分からなかったので、
個人的には × を消して closeChar: '' とするのが良いと感じました。
最初から×を出さないということで・・・(^^;)

ジャバスクリプト(jQuery)でFlashのような写真の表示

去年作ったサイトのトップページの変更がありました。

トップページの画像をFlashにしていたのですが
今回は「トップの画像はジャバスクリプトで」という希望だったので jQuery を使うことにしました。

今回使ったのは「jQuery Cycle Plugin
HTMLをちょっと変えると、表示効果が変更できるので
ご自分でHTMLを編集されるお客さんには
喜んでもらえるんじゃないかなぁ~…と淡い期待。。。


まだOK出てないので、お客さん的には、はたしてこれでよかったのかはナゾですが
自分のために めも。


写真表示に使ったのはコチラ↓
http://malsup.com/jquery/cycle/
このjQueryの存在、ずっと前に 香林様 に教えてもらいましたねぇ~。
今やっと!使えました。ありがとうございましたm(_ _)m
JQuery-Cycle-Plugin_01.jpg


具体的には… 
JQueryCyclePlugin-02.gif


JQueryCyclePlugin-03.gif


JQueryCyclePlugin-04.gif


JQueryCyclePlugin-05.gif


JQueryCyclePlugin-06.gif


JQueryCyclePlugin-07.gif


JQueryCyclePlugin-08.gif
これを参考に あれこれやってみます。
例えば
fx: 'fade', speed: 1500
というような感じで、効果とスピードを入れて試してみます。


個人的には

fade (薄れる)



cover (かぶせる)



uncover (ふたを取る)



scrollLeft (左スクロール)



scrollRight (右スクロール)



scrollUp (上スクロール)



scrollDown (下スクロール)



growX (中心から横に大きくなる)



growY (中心から縦に大きくなる)



fadeZoom (中心から拡大される)



wipe (左上から画像が変わる)


が使いやすいかなぁ。。。と感じました(^^)

写真のスライド(coda-slider と言うか Featured Content Slider)

休みってなぜこんなに早く過ぎ去るのでしょう(--;)
結局、休み前にしようと思ってたこと、ぜんっぜんできませんでした

そんな時は現実逃避して、久々の仕事ネタ(^^;)仕事の時は違うことに逃避してるんですが
前に社長がFlashが嫌いだってのを書いたのですが、前回は写真がスライドしなかったので、
今回は写真がスライドするようにしてみました。(別画面で開きます)
おおもとは coda-slider を使っています。
とは言っても、こはるには難しかったので、こちらのサイト Featured Content Slider から
サンプルをダウンロードさせてもらって、
htmlとCSSを一部書き換えさせてもらいました(^^;)

参考に Featured Content Slider のサンプルを見て
なんとなく、構造はこうなっているのかな?
というのを以下に載せておきます。

FeaturedContentSlider-01.jpg

↓HTMLは以下の感じです↓
全部載せてますので、スクロールめっちゃ長いです

FeaturedContentSlider-02.gif

↓ついでにCSSはこんな感じです↓

FeaturedContentSlider-03.gif



画像を使ったプルダウンメニュー(ドロップダウンメニュー)の作り方

前回 に引き続き プルダウンメニュー(ドロップダウンメニュー)です(^^;)

前回 menu.js を使うとカンタンですよ~ってお話をしましたが
menu.js と合わせてぜひ使いたいのがコチラ→ yuga.js
この yuga.js すばらしいです
詳しいことは yuga.jsのサイト にありますので はぶきますが
プルダウンメニュー(ドロップダウンメニュー)で画像を使いたい時にとっても便利です
このような素晴らしいスクリプトを公開して下さった中村享介様に感謝です!!!

menu.jsyuga.js を使ったサンプルをあげておきます↓(別窓で開きますので不要なら閉じて下さい)
画像を使ったプルダウンメニュー(ドロップダウンメニュー)

サンプルのCSSには
実際の仕事ではメニューの横幅ってマチマチな気がするので
メニュー1つ1つに横幅を入れています。

。。。。。。。。。。。。。。。。。。。。。。。

↑上記見本にダウンロードを追加しました。
「ダウンロード」が表示されない場合はキーボード F5 で更新して見て下さい。
コメントで質問がありましたので、縦型メニューの場合も見本に追加しました。


プルダウンメニューのボタンを画像にする方法
いろんなやり方があるとは思うのですが、よろしければ参考にして下さい。

↓HTML メニュー部分はこうなっています。
 ボタン用の画像には Class="btn" を入れます。
 これは yugajs で画像の切り替えをしてもらうために入れています。
20110703-02.gif


↓menu.js はこうなっています。
 プルダウン(ドロップダウン)させたいリストを指定しています。
20110703-03.gif


↓CSS メニュー部分はこうなっています。 他にも良い書き方があるかもしれませんが…
20110703-04.gif