こんにちは！
Webデザイナーのノザキです。

今回は私も試したことがない『Lightbox2』の実装を行っていきたいと思います。
一度使ってみたかったのですが、なかなか機会がなかったので、ブログを利用し、皆様と一緒に実装していければと思っています。
初心者の私にできれば、誰でもできるはずですので、頑張っていきます！

『lightbox2』をダウンロードしよう

まず最初に『lightbox2』を下記からダウンロードします。
「DOWNLOAD」のボタンからダウンロードができます。
http://lokeshdhakar.com/projects/lightbox2/

ファイルを読み込ませよう

ダウンロードした下記のファイルを読み込ませます。
imagesはフォルダごと設置しましょう。（もともとimagesフォルダがご自身のサイトにある場合は、画像のみをimagesフォルダに入れてもOKです）

• lightbox2-master/dist/css/lightbox.css
• lightbox2-master/dist/js/lightbox.js
• lightbox2-master/dist/images/

head内に記述しよう

head内に下記を記述します。
階層はご自身のサイトに合わせてあげてくださいね！
また、jQuery本体はajaxを使用しています。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="common/css/lightbox.css" type="text/css" rel="stylesheet" media="all" />

/bodyの直前に記述

/bodyの直前に下記を記述します。
head内に入れてしまうとうまく動作しませんので、ご注意ください。
また、こちらも階層はご自身のサイトに合わせてあげてください。

<script src="common/js/lightbox.js" type="text/javascript"></script>

CSSのimg画像のパスを修正

• 閉じるボタンのimg画像：url(../images/close.png)
• ローディングのimg画像：url(../images/loading.gif)
• 左矢印のimg画像：url(../images/prev.png)
• 右矢印のimg画像：url(../images/next.png)

修正しないでも大丈夫な場合もありますが、各img画像のパスはご自身で設置した「/images/」フォルダのパスに修正してくださいね。

HTMLの記述

『Lightbox2』で表示させたいimg画像の記述方法は下記になります。

<a href="common/images/photo01.jpg" data-lightbox="sample" data-title="サンプル画像01"/>
<img src="common/images/thumb01.jpg" alt="">
</a>

• href=”common/images/sample.jpg：クリックで表示させる画像になります。
• data-lightbox=”sample”：lightbox専用の属性となります。値の「sample」の部分は任意の名前を付けてあげてください。
  また、グループ化する場合は、「sample」の部分を共通の名前にしてあげてください。
• data-title=”サンプル画像01″：クリック後に表示されたimg画像の下にキャプションが付きます。その部分の文言になります。

グループ化の記述例

「data-lightbox=””」の部分を共通の名前にするとグループとみなされ、右矢印・左矢印でimg画像を切り替えることができます。

<a href="common/images/photo01.jpg" data-lightbox="group01" /><img src="common/images/thumb01.jpg" alt=""></a>
<a href="common/images/photo02.jpg" data-lightbox="group01" /><img src="common/images/thumb01.jpg" alt=""></a>
<a href="common/images/photo03.jpg" data-lightbox="group01" /><img src="common/images/thumb01.jpg" alt=""></a>

さいごに

私自身、はじめて実装してみましたが、fancyboxのような感じで使用できそうですね。
fancyboxの記事はこちら
これからも新たに挑戦したいjQueryを見つけましたら、皆様と一緒に実装していきたいと思います！
それでは、また！

こんにちは！
Webデザイナーのノザキです。

今回はimg画像をフォトギャラリー風に見せる『fancybox』をご紹介したいと思います。
fancyboxは、img画像をクリックすると、img画像が拡大されて表示されるものです。
今回は簡単なものを実装していきますので、初心者の方でもビシッと設置できると思います。

fancyboxについて

fancyboxにはバージョンがあり、バージョンによって使用する際のライセンスが異なります。

• fancybox（古いもの）：MITライセンス
• fancybox2（新しい）:個人利用はフリーですが、商用利用は有料です

使用する際にはライセンスに注意しましょう！
今回ご紹介するのはfancyboxの古いもののほうです。

ダウンロードしよう

まずは下記のサイトからダウンロードをしましょう。
http://fancybox.net/

読み込むファイルをheadに記述

head内に必要なfancyboxのcssファイルやjsファイルなどを読み込ませましょう。
私はダウンロードした「fancybox」のフォルダごと、jsフォルダの中に入れました。
ファイルの階層はご自身のものに合わせてあげてくださいね！
※ここではjQuery本体はajaxを使用

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="common/js/fancybox/jquery.fancybox-1.3.4.css"/>
<script type="text/javascript" src="common/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

img画像の切り替えをマウスホイールで行えるようにしたい方は、こちらも読み込ませましょう。

<script type="text/javascript" src="common/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

関数の記述をしよう

fancyboxを動かすための関数を記述しましょう。
これを記述しないと動作しませんので忘れないように！
カッコ内に（.group）という部分がございますが、クラス名はお好みの名前を付けてあげてください。
ここでは表示するimg画像をグループとみなしているので、groupという名前にしています。
また、cyclicはオプションで、ループ表示をすることを意味しています。
オプションは他にも様々ございますが、今回はループのみにします！

<script type="text/javascript">
    $(document).ready(function() {
        $(".group").fancybox({
            cyclic: true
        });
    });
</script>

HTMLにグループ化にするimg画像を記述

表示させるimg画像をHTMLに記述します。
「rel」に、グループ化する対象のimg画像すべてに同じ値を記述してください。
また、「class」は上でつけたものと同じ名前を付けてあげてください。
これでfancyboxの完成です。

<ul>
	<li>
		<a class="group" rel="group01" href="common/images/photo01.jpg" title=""/>
		<img src="common/images/thumb01.jpg" alt="">
		</a>
	</li>
	<li>
		<a class="group" rel="group01" href="common/images/photo02.jpg" title=""/>
		<img src="common/images/thumb02.jpg" alt="">
		</a>
	</li>
	<li>
		<a class="group" rel="group01" href="common/images/photo03.jpg" title=""/>
		<img src="common/images/thumb03.jpg" alt="">
		</a>
	</li>
	<li>
		<a class="group" rel="group01" href="common/images/photo04.jpg" title=""/>
		<img src="common/images/thumb04.jpg" alt="">
		</a>
	</li>
</ul>

さいごに

img画像をたくさん見せたいときなどに用いると便利な仕様ですよね。
Web用のポートフォリオで、自分の作品を紹介するときなどにも使えるかもしれませんね！
ではでは、またの機会に！

こんにちは！
Webデザイナーのノザキです。

前のブログで、Webサイトに動きがあると「かっこいい！」と思ってしまうと公言していました。
はい。今も同じように考えています（笑）
今回お話ししたいのは、オプションがたくさんある『bxslider』についてです。
オプションを任意で設定するだけで、動きや見た目に変化を与えることができます。
また、レスポンシブWebデザインにも対応しているため、今の時代にピッタリですね！
初心者の方でも簡単に設置できますので、是非試してみてください！

まずbxsliderをダウンロードしよう！

下記のサイトから『bxslider』をダウンロードしましょう。
http://bxslider.com/

ダウンロードしたフォルダを見てみよう

ダウンロードしたフォルダには、いくつかのファイルが入っています。
ですが、とりあえず使用するものは下記になります。

• jquery.bxslider.css
• jquery.bxslider.min.js
• imagesフォルダ内の画像

また、指定するオプションによっては下記のファイルも必要になります。

• jquery.easing.1.3.js
• jquery.fitvids.js

head内に読み込ませるファイルを記述

必要なファイルをhead内に読み込ませます。
ファイルの階層はご自身のものに合わせてあげてください。
※下記ではjQuery本体はajaxを使用しております。

<link rel="stylesheet" href="common/css/jquery.bxslider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="common/js/jquery.easing.1.3.js"></script>
<script src="common/js/jquery.fitvids.js"></script>
<script src="common/js/jquery.bxslider.min.js"></script>

head内にスクリプトを記述

これを記述しないとスライダーが動かないので、忘れないようにしましょう。
また、オプションでいろいろ追加する際に、こちらに追記していくようになります。
下記の記述は、ノーマルなデフォルト設定になります。

<script>
	$(document).ready(function(){
		$('.bxslider').bxSlider();
	});
</script>

HTMLにスライドさせたいものを記述

ここではクラスを「bxslider」としてあります。
この時点で、デフォルト設定でスライダーが動きます。

<ul class="bxslider">
	<li><img src="common/images/photo01.jpg"></li>
	<li><img src="common/images/photo02.jpg"></li>
	<li><img src="common/images/photo03.jpg"></li>
</ul>

もっとスライダーをカスタマイズしたい

オプションを使用して、スライダーをカスタマイズしたい方は下記を参考にしてみてください。

mode

modeは、「vertical」、「fade」、「horizontal」の3種があります。
デフォルトでは「horizontal」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'vertical'
});
});
</script>

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade'
});
});
</script>

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'horizontal'
});
});
</script>

スライドの無限ループ

こちらを設定することで、スライダーを永遠にループさせることができます。
デフォルトは「false」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: true
});
});
</script>

「前へ」と「次へ」のコントロール表示を制御

こちらは、スライドが無限ループの設定ではないときに発動します。
一番目のスライドが表示されている時は「前へ」が非表示になり、最後のスライドが表示されている時は「次へ」が非表示になります。
「true」か「false」で設定します。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
hideControlOnEnd: true
});
});
</script>

speed

スライド時のスピードを設定できます。
デフォルトは「500」です。
お好みのスピードに調節してみてください。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
speed: 1000
});
});
</script>

startSlide

どのイメージ画像からスライドを開始させるかを設定できます。
デフォルトでは「0」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
startSlide: 3
});
});
</script>

randomStart

どのイメージ画像からスライドを開始させるかランダムにすることができます。
デフォルトでは、「false」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
randomStart: true
});
});
</script>

slideMargin

スライドとスライドの間隔を指定できます。
デフォルトでは「0」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideMargin: 10
});
});
</script>

ticker

継続的にスライドし続けることができます。
デフォルトでは「false」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
ticker: true
});
});
</script>

captions

キャプションを表示できます。
タイトルのような表示がイメージ画像に表示されます。
title部分に表示させたい内容を記述しましょう。
デフォルトでは「false」になっています。

<ul class="bxslider">
<li><img src="common/images/photo01.jpg" title="キャプション01"></li>
<li><img src="common/images/photo02.jpg" title="キャプション02"></li>
<li><img src="common/images/photo03.jpg" title="キャプション03"></li>
</ul>

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
captions: true
});
});
</script>

pager

ページャーの表示・非表示を設定することができます。
デフォルトでは「true」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
pager: false
});
});
</script>

controls

コントロールの表示・非表示を設定することができます。
デフォルトでは「true」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
controls: false
});
});
</script>

auto

自動でスライドすることができます。
デフォルトでは「false」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true
});
});
</script>

autoControls

Stop, Startのコントロールを表示する事ができます。
デフォルトでは「false」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>

minSlides/maxSlides

「minSlides」はカルーセルの際に表示するスライドの最低数を設定できます。
「maxSlides」はカルーセルの際に表示するスライドの最大数を設定できます。
どちらもデフォルトでは「0」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
maxSlides: 3,
minSlides: 3
});
});
</script>

slideWidth

カルーセルの際に表示するスライドの幅を設定できます。
デフォルトでは「0」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 300,
maxSlides: 3,
minSlides: 3
});
});
</script>

moveSlides

カルーセルの際に表示するスライドさせる要素の数を設定できます。
デフォルトでは「0」になっています。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
slideWidth: 300,
maxSlides: 3,
minSlides: 3,
moveSlides: 2
});
});
</script>

タッチデバイスに対応させるオプション

touchEnabled

スワイプ時でもスライドできるようにする。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
touchEnabled: true
});
});
</script>

oneToOneTouch

スワイプの動きとイメージ画像のスライドを対応させ、スワイプ動作にイメージ画像が連動するようなスライドを設定できる。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
oneToOneTouch: true
});
});
</script>

preventDefaultSwipeX

X軸方向へのデフォルトのスワイプ操作の動きを制御し、イメージ画像をスワイプしても画面自体はスワイプしないように設定できる。

<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
preventDefaultSwipeX: true
});
});
</script>

さいごに

『bxslider』は簡単に実装でき、なおかつオプションも豊富にあるため、自分好みの動きを実現できると思います。
是非、実装してみてください！

いきなりですが、ホームページに動きがあると、それだけで「おおっ！」となる時がありますよね？
はい！私はよくあるんです！！
駆け出しの私はスライダーを使いたがるのですが、今回はブラウザ画面いっぱいで表示する『FullWideSlider』をご紹介したいと思います。
こちらのスライダーですが、制作者様が日本の方のようです！
『FullWideSlider』は簡単に実装できるしカッコイイので、私自身よく使用させていただいております。
この場をお借りし、お礼をお伝えしたいと思います。
「お世話になっております。ありがとうございます！」
『FullWideSlider』についてはこちらで制作者様のサイトをご覧いただけます。

私の記事も最後まで読んでもらえたらうれしいです（笑）
では、さっそく実装していきましょう。

スクリプトを保存しよう

まずは下記のスクリプトを保存しましょう。
私はわかりやすく「wideslider.js」という名前で保存しています。

$(function(){
    $setElm = $('.wideslider');
    baseWidth = 1000;
    baseHeight = 600;
    minWidth = 320;
 
    slideSpeed = 700;
    delayTime = 5000;
    easing = 'linear';
    autoPlay = '1'; // notAutoPlay = '0'
 
    flickMove = '1'; // notFlick = '0'
 
    btnOpacity = 0.5;
    pnOpacity = 0.5;
 
    ua = navigator.userAgent;
 
    $(window).load(function(){
        $setElm.find('img').css({display:'block'});
        $setElm.each(function(){
            targetObj = $(this);
            targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');
 
            var findBase = targetObj.find('.wideslider_base'),
            findWrap = targetObj.find('.wideslider_wrap'),
            findPrev = targetObj.find('.slider_prev'),
            findNext = targetObj.find('.slider_next');
 
            var pagination = $('<div class="pagination"></div>');
            targetObj.append(pagination);
 
            var baseList = findWrap.find('li'),
            baseListLink = findWrap.find('li').children('a'),
            baseListCount = findWrap.find('li').length;
 
            baseList.each(function(i){
                $(this).css({width:(baseWidth),height:(baseHeight)});
                pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>');
            });
 
            var findPagi = targetObj.find('.pagination');
 
            setSlide();
            function setSlide(){
                windowWidth = $(window).width();
                findList = findWrap.find('li');
                setParts = (findBase,findWrap,findPrev,findNext,$setElm);
 
                setWrapLeft = parseInt(findWrap.css('left'));
                setlistWidth = findList.find('img').width();
                setLeft = setWrapLeft / setlistWidth;
 
                if(windowWidth < baseWidth){
                    if(windowWidth > minWidth){
                        findList.css({width:(windowWidth)});
                        var reImgHeight = findList.find('img').height();
                        findList.css({height:(reImgHeight)});
                        setParts.css({height:(reImgHeight)});
                    } else if(windowWidth <= minWidth){
                        findList.css({width:(minWidth)});
                        var reImgHeight = findList.find('img').height();
                        findList.css({height:(reImgHeight)});
                        setParts.css({height:(reImgHeight)});
                    }
                } else if(windowWidth >= baseWidth){
                    findList.css({width:(baseWidth),height:(baseHeight)});
                    setParts.css({height:(baseHeight)});
                }
 
                setWidth = findList.find('img').width();
                setHeight = findList.find('img').height();
                baseWrapWidth = (setWidth)*(baseListCount);
 
                ulCount = findWrap.find('ul').length;
                if(ulCount == 1){
                    var makeClone = findWrap.children('ul');
                    makeClone.clone().prependTo(findWrap);
                    makeClone.clone().appendTo(findWrap);
                    findWrap.children('ul').eq('1').addClass('mainList');
                    var mainList = findWrap.find('.mainList').children('li');
                    mainList.eq('0').addClass('mainActive')
 
                    allListCount = findWrap.find('li').length;
                }
                allLWrapWidth = (setWidth)*(allListCount),
                posAdjust = ((windowWidth)-(setWidth))/2;
 
                findBase.css({left:(posAdjust),width:(setWidth),height:(setHeight)});
                findPrev.css({left:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
                findNext.css({right:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)});
 
                findWrap.css({width:(allLWrapWidth),height:(setHeight)});
                findWrap.children('ul').css({width:(baseWrapWidth),height:(setHeight)});
 
                posResetNext = -(baseWrapWidth)*2,
                posResetPrev = -(baseWrapWidth)+(setWidth);
 
                adjLeft = setWidth * setLeft;
                findWrap.css({left:(adjLeft)});
 
            }
            findWrap.css({left:-(baseWrapWidth)});
 
            var pnPoint = pagination.children('a'),
            pnFirst = pagination.children('a:first'),
            pnLast = pagination.children('a:last'),
            pnCount = pagination.children('a').length;
 
            if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
                pnPoint.css({opacity:(pnOpacity)});
            } else {
                pnPoint.css({opacity:(pnOpacity)}).hover(function(){
                    $(this).stop().animate({opacity:'1'},300);
                }, function(){
                    $(this).stop().animate({opacity:(pnOpacity)},300);
                });
            }
 
            pnFirst.addClass('active');
            pnPoint.click(function(){
                if(autoPlay == '1'){clearInterval(wsSetTimer);}
                var setNum = pnPoint.index(this),
                moveLeft = ((setWidth)*(setNum))+baseWrapWidth;
                findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);
                pnPoint.removeClass('active');
                $(this).addClass('active');
                activePos();
                if(autoPlay == '1'){wsTimer();}
            });
 
            if(autoPlay == '1'){wsTimer();}
 
            function wsTimer(){
                wsSetTimer = setInterval(function(){
                    findNext.click();
                },delayTime);
            }
            findNext.click(function(){
                findWrap.not(':animated').each(function(){
                    if(autoPlay == '1'){clearInterval(wsSetTimer);}
                    var posLeft = parseInt($(findWrap).css('left')),
                    moveLeft = ((posLeft)-(setWidth));
                    findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
                        var adjustLeft = parseInt($(findWrap).css('left'));
                        if(adjustLeft <= posResetNext){
                            findWrap.css({left: -(baseWrapWidth)});
                        }
                    });
 
                    var pnPointActive = pagination.children('a.active');
                    pnPointActive.each(function(){
                        var pnIndex = pnPoint.index(this),
                        listCount = pnIndex+1;
                        if(pnCount == listCount){
                            pnPointActive.removeClass('active');
                            pnFirst.addClass('active');
                        } else {
                            pnPointActive.removeClass('active').next().addClass('active');
                        }
                    });
                    activePos();
 
                    if(autoPlay == '1'){wsTimer();}
                });
            }).hover(function(){
                $(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
            }, function(){
                $(this).stop().animate({opacity:(btnOpacity)},100);
            });
 
            findPrev.click(function(){
                findWrap.not(':animated').each(function(){
                    if(autoPlay == '1'){clearInterval(wsSetTimer);}
 
                    var posLeft = parseInt($(findWrap).css('left')),
                    moveLeft = ((posLeft)+(setWidth));
                    findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
                        var adjustLeft = parseInt($(findWrap).css('left')),
                        adjustLeftPrev = (posResetNext)+(setWidth);
                        if(adjustLeft >= posResetPrev){
                            findWrap.css({left: (adjustLeftPrev)});
                        }
                    });
 
                    var pnPointActive = pagination.children('a.active');
                    pnPointActive.each(function(){
                        var pnIndex = pnPoint.index(this),
                        listCount = pnIndex+1;
                        if(1 == listCount){
                            pnPointActive.removeClass('active');
                            pnLast.addClass('active');
                        } else {
                            pnPointActive.removeClass('active').prev().addClass('active');
                        }
                    });
                    activePos();
 
                    if(autoPlay == '1'){wsTimer();}
                });
            }).hover(function(){
                $(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
            }, function(){
                $(this).stop().animate({opacity:(btnOpacity)},100);
            });
 
            function activePos(){
                var posActive = findPagi.find('a.active');
                posActive.each(function(){
                    var posIndex = pnPoint.index(this),
                    setMainList = findWrap.find('.mainList').children('li');
                    setMainList.removeClass('mainActive').eq(posIndex).addClass('mainActive');
                });
            }
 
            $(window).on('resize',function(){
                if(autoPlay == '1'){clearInterval(wsSetTimer);}
                setSlide();
                if(autoPlay == '1'){wsTimer();}
            }).resize();
 
            if(flickMove == '1'){
                var isTouch = ('ontouchstart' in window);
                findWrap.on(
                    {'touchstart mousedown': function(e){
                        if(findWrap.is(':animated')){
                            e.preventDefault();
                        } else {
                            if(autoPlay == '1'){clearInterval(wsSetTimer);}
                            if(!(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1)){
                                e.preventDefault();
                            }
                            this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
                            this.leftBegin = parseInt($(this).css('left'));
                            this.left = parseInt($(this).css('left'));
                            this.touched = true;
                        }
                    },'touchmove mousemove': function(e){
                        if(!this.touched){return;}
                        e.preventDefault();
                        this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
                        this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
                        $(this).css({left:this.left});
                    },'touchend mouseup mouseout': function(e){
                        if (!this.touched) {return;}
                        this.touched = false;
 
                        var setThumbLiActive = pagination.children('a.active'),
                        listWidth = parseInt(baseList.css('width')),leftMax = -((listWidth)*((baseListCount)-1));
 
                        if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
                            $(this).stop().animate({left:((this.leftBegin)-(listWidth))},slideSpeed,easing,function(){
                                var adjustLeft = parseInt($(findWrap).css('left'));
                                if(adjustLeft <= posResetNext){
                                    findWrap.css({left: -(baseWrapWidth)});
                                }
                            });
 
                            setThumbLiActive.each(function(){
                                var pnIndex = pnPoint.index(this),
                                listCount = pnIndex+1;
                                if(pnCount == listCount){
                                    setThumbLiActive.removeClass('active');
                                    pnFirst.addClass('active');
                                } else {
                                    setThumbLiActive.removeClass('active').next().addClass('active');
                                }
                            });
                            activePos();
                        } else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
                            $(this).stop().animate({left:((this.leftBegin)+(listWidth))},slideSpeed,easing,function(){
                                var adjustLeft = parseInt($(findWrap).css('left')),
                                adjustLeftPrev = (posResetNext)+(setWidth);
                                if(adjustLeft >= posResetPrev){
                                    findWrap.css({left: (adjustLeftPrev)});
                                }
                            });
                            setThumbLiActive.each(function(){
                                var pnIndex = pnPoint.index(this),
                                listCount = pnIndex+1;
                                if(1 == listCount){
                                    setThumbLiActive.removeClass('active');
                                    pnLast.addClass('active');
                                } else {
                                    setThumbLiActive.removeClass('active').prev().addClass('active');
                                }
                            });
                            activePos();
                        } else {
                            $(this).stop().animate({left:(this.leftBegin)},slideSpeed,easing);
                        }
                        compBeginLeft = this.leftBegin;
                        compThisLeft = this.left;
                        baseListLink.click(function(e){
                            if(!(compBeginLeft == compThisLeft)){
                                e.preventDefault();
                            }
                        });
                        if(autoPlay == '1'){wsTimer();}
                    }
                });
            }
            setTimeout(function(){setSlide();},500);
        });
    });
});

CSSを記述しよう

次はcssを記述していきます。
下記を「common.css」などのご自身のcssファイルに書き込みましょう。
もしくは、「wideslider.css」というファイルを作るのもありかもしれません。
また、「slider_prev」と「slider_next」の部分は画像が使用されています。
制作者様のサイトでサンプルをダウンロードすることも可能ですが、ご自身でオリジナルのものを使用する場合は、imgの階層をお間違えないようにご注意ください。

.wideslider {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
    height: 600px;
}
 
.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 
.wideslider ul li img {
    width: 100%;
    display: none;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    cursor: pointer;
}
.slider_prev {
	background: #fff url(../images/prev.jpg) no-repeat right center;
}
.slider_next {
	background: #fff url(../images/next.jpg) no-repeat left center;
} 
.pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
}

.pagination a {
    margin: 0 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    overflow: hidden;
    background: #333;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}

head内にリンクを記述しよう

HTMLのhead内にjsファイルのリンクを記述しましょう。
また、widesliderについてのcssが記述されているファイルのリンクも忘れずに記述しましょう。
ファイルの階層はご自身のものに合わせてあげてください。
※注意※
下記の記述はwidesliderのcssが「wideslider.css」に入れてある仮定です。widesliderのcssが記述されているリンクを置いてください。
また、jQuery本体はajaxを使用しております。

<script src="common/js/wideslider.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="common/css/wideslider.css" type="text/css" />

HTMLに記述しよう

HTML内で『FullWideSlider』を使用したい部分に下記を記述しましょう。
imgの階層はご自身のものに合わせてあげてください。

<div class="wideslider">
	<ul>
		<li><img src="common/images/photo01.jpg" /></li>
		<li><img src="common/images/photo02.jpg" /></li>
		<li><img src="common/images/photo03.jpg" /></li>
	</ul>
</div>

jsファイルの調整

最初に保存しましたjsファイルの最上部の記述に下記の記述があります。

こちらの設定値を変更することで、スライドの調整を行うことができるようです。
自分のホームページに合うように調整してみてください。

さいごに

『FullWideSlider』は簡単かつカッコよく実装できるスライダーです！
私と同じような初心者の方でも実装できますので、是非お試しください。

さいごにもう一度、こちらが『FullWideSlider』の制作者様のサイトになります。

こんにちは！
最近の休日は『ドラゴンズドグマオンライン』というゲームを楽しんでおります、Webデザイナーのノザキです。

『ドラゴンズドグマオンライン』が正式サービス開始からなんと10日で100万ダウンロードを突破したという…
とてつもない勢いで人気に拍車をかけておりますね！
私も休日はジョブ「ファイター」として、世界を巡っておりますよ（笑）
皆さんの冒険は順調に進んでおりますかー？

さてさて、趣味のお話はこの辺にしまして、タイトルにもありましたが今回はimg画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQueryをご紹介したいと思います。

私はWebを勉強し、初めて導入したjQueryがこの「スクロールすると出現するページトップへ戻るボタン」のjQueryでした。
当時は「初めてページに動きのあるものを実装できた!」と、とても喜んでいました!（といっても約1年前なので、まだまだ私も駆け出しですね…）

そのため今回は、私を喜ばしてくれたこの「スクロールすると出現するページトップへ戻るボタン」を設定するjQueryを初心に返ってご紹介です！
初心者の方でも簡単に実装できますので、ぜひ試してみてくださいね！

手順1:jQueryのライブラリを追加

でははじめに、jQueryをHTMLのhead内に追加していきます。
ここではAjaxを使っていきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

手順2:JavaScriptを追記

次はHTMLのhead内にJavaScriptを追記していきます。

<script>
	$(function(){
    	// 「ページトップへ戻るボタン」の要素を隠します
    	$('#pagetop').hide();
    	// スクロールした場合のアクションが記されています
    	$(window).scroll(function(){
        	// スクロール位置が200pxを超えた場合に「ページトップへ戻るボタン」をフェードインで出現させる
        	if ($(this).scrollTop() &gt; 200) {
            	$('#pagetop').fadeIn();
        	}
        	// スクロール位置が200px以下の場合は「ページトップへ戻るボタン」を消しておく（フェードアウトで消える）
        	else {
            	$('#pagetop').fadeOut();
        	}
    	});
    	// 「ページトップへ戻るボタン」をクリックした場合のページトップへ戻るスピードの速さが記されています
    	$('#pagetop').click(function(){
        	$('html,body').animate({
            	scrollTop: 0 }, 500);
        	return false;
    	});
	});
</script>

各JavaScriptの命令内容はコメントアウトで記した意味となります。

「ページトップへ戻るボタン」を出現させたい位置を変更する場合は、上記で200となっている数字を任意で指定したい数字に変更してください。

また、「ページトップへ戻るボタン」をクリックした際に、ページトップへ戻るスピードを変更する場合は、現在500となっている数字を任意で変更してください。
数字が大きくなるとスピードは遅くなり、数字が小さくなるとスピードは速くなりますよ！

例）500を基準にしたとき

手順3:HTML内に「ページトップへ戻るボタン」を追記

HTML内に「ページトップへ戻るボタン」のimgを追加しましょう。

<p id="pagetop"><a href="#container"><img src="images/img_pagetop.png" height="70" width="70" alt="ページトップボタン"></a></p>

※注意点※
手順2のJavaScript内で、$(‘#pagetop’)となっている部分がございます。この部分はidと同じ名前を付けてあげてください。

手順4:CSSを追記

さいごにCSSを追記します。

#pagetop {
    position: fixed;
    bottom: 50px;
    right: 30px;
}

このCSSは「ページトップへ戻るボタン」の出現位置を指定しています。
ここでは、表示ディスプレイの下から50px、右から30pxのところにボタンを出現させるようにしています。
任意で好きな場所に変更させてあげてください。

さいごに

この「スクロールすると出現するページトップへ戻るボタン」のjQueryは、駆け出しの私にjQueryを実装する楽しさを教えてくれました！
とても簡単に実装できると思いますので、jQuery入門のような感覚でぜひ試していただけるとうれしいです。

さいごまでご講読ありがとうございました。
ではでは、またです！