jQuery:jQueryで複数の画像をクロスフェードして切り替える

jQueryを使用して、複数の画像をクロスフェードしたり、スライドショーしたりするプラグインは色々あります。

設定がわかりやすく、シンプルな処理のものを探していたところ、下記のページを見つけました。

jQueryで画像がクロスフェードするシンプルな画像ビューアー(自動再生)を作成する方法

とてもシンプルで簡単に実装ができ、コードもわかりやすいのでおすすめです。
上記の設定をした時の方法をメモします。


複数の画像をクロスフェードして切り替える

切り替えたい画像を用意し、下記のソースを記述します。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var setImg = '#viewer';
    var fadeSpeed = 1000;
    var switchDelay = 3000;

    $(setImg).children('img').css({opacity:'0'});
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

    setInterval(function(){
        $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
    },switchDelay);
});
</script>

jQueryを読み込みます。
「setImg」にimgタグを囲う要素のidまたはclassを指定します。
「fadeSpeed」にはフェードするスピードを指定します。
「switchDelay」には画像が切り替える時間を指定します。

setInterval()を使用し、指定した時間で繰り返し処理を行っています。


CSS

<style type="text/css">
#viewer {
    margin: 0 auto;
    width: 900px;
    height: 300px;
    text-align: left;
    overflow: hidden;
    position: relative;
}

#viewer img {
    top: 0;
    left: 0;
    position: absolute;
}
</style>

画像のサイズや位置等を指定します。


HTML

<div id="viewer">
    <img src="hoge1.jpg" />
    <img src="hoge2.jpg" />
    <img src="hoge3.jpg" />
</div>

表示したい画像のimgタグをjQueryで指定した要素の中に記述します。
画像を追加したい場合は、imgタグを追加します。


上記の設定をすれば、複数の画像をクロスフェードして切り替えながら、繰り返し表示することができます。
ソースもわかりやすいので自分なりにカスタマイズすることもできそうです。

jQuery:ページアクセス、リンク時にフェードする方法

jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、
リンクをクリックした時フェードアウトしてからページ遷移する方法をメモします。

フェードインフェードアウトするのに下記のメソッドを使用しています。

fadeIn([speed], [callback])

指定した要素をフェードインして表示します。

fadeOut([speed], [callback])

指定した要素をフェードアウトして非表示にします。

※[callback]は処理終了時に実行する内容を記述します。


フェードイン、フェードアウトする方法

「wrapper」の内容がフェードインして表示されます。
また、リンクをクリックするとフェードアウトしてページ遷移します。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    // サイトアクセス時に非表示にしてから、フェードインさせる
    $('#wrapper').hide();
    $('#wrapper').fadeIn(2000);
    
    // リンククリック時にフェードアウトしてから、画面遷移する
    $('a').click(function(){
        // URLを取得する
        var url = $(this).attr('href');

        // URLが空ではない場合
        if (url != '') {
            // フェードアウトしてから、取得したURLにリンクする
            $('#wrapper').fadeOut(1000);
            setTimeout(function(){
                location.href = url;
            }, 1000);
        }
        return false;

    });
});
</script>

HTML

<body>
    <div id="wrapper">
        ページ内容を記載<br>
        <a href="http://raining.bear-life.com/">リンク</a>
    </div>
</body>

フェードイン、フェードアウトするスピードを調整する場合は、
fadeIn()」、「fadeOut()」、「setTimeout()」の数値を変更します。

また、コンテンツごとに設定することも可能なので、動きのあるサイトを作ることができると思います。

 

※下記、追記します。

aタグに「target=”_blank”」を付けていた場合、正常に動作しないのでフェードさせるリンクにclassを追加して調整しました。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    // サイトアクセス時にbodyを非表示にしてから、フェードインさせる
    $('#wrapper').hide();
    $('#wrapper').fadeIn(2000);
    
    // リンククリック時にフェードアウトしてから、画面遷移する
    $('a.fadelink').click(function(){
        // URLを取得する
        var url = $(this).attr('href');

        // URLが空ではない場合
        if (url != '') {
            // フェードアウトしてから、取得したURLにリンクする
            $('#wrapper').fadeOut(1000);
            setTimeout(function(){
                location.href = url;
            }, 1000);
        }
        return false;

    });
});
</script>

HTML

<body>
    <div id="wrapper">
        ページ内容を記載<br>
        <a href="http://raining.bear-life.com/" class="fadelink">リンク</a><br>
        <a href="http://raining.bear-life.com/" target="_blank">リンク</a>
    </div>
</body>

フェードさせるリンクに「class=”fadelink”」を追加しております。
そしてjQueryの処理で「$(‘a.fadelink’).click(function(){」の箇所を変更してます。

今までは、aタグをクリックした場合の処理を記述してましたがクラスが設定されているリンクの場合にしました。

 

■ サンプルページを追加しました。

【jQuery】ページアクセス、リンク時にフェードする方法|サンプルページ

 

php:phpでGDライブラリを使用した際のエラー

phpGDライブラリを使用した時に下記のエラーが表示されました。

Call to undefined function imagecreatefromgif()

phpGDライブラリを使用した際のエラーの対処方法をメモします。

調べてみたところ、GDライブラリがインストールされておらず、エラーが表示されていました。

インストール後、phpinfo()で確認し、下記のように表示されていればOKです。
※インストール後、サーバの再起動をします。

php_gd

サイトを確認したところ正常に動作しました。
エラーが起きた際は、環境を確認して有効になっているかなどを確認することが大切ですね。

jQuery:虫眼鏡のように画像を拡大するプラグイン「loupe」

jQuery画像マウスを合わせた時、虫眼鏡のように画像の一部を拡大して表示したい場合があります。
jQueryプラグインloupe」を使用すれば簡単に設定することが可能です。

jquery_loupe

ファイルがとても軽くて、設定の仕方も簡単なので楽に実装することができます。

今回は、jQueryのプラグイン「loupe」を使用して、画像にマウスを乗せた時に画像の一部を拡大させ、
虫眼鏡ルーペ)のように表示させる方法をメモします。

下記URLよりダウンロードして使用します。

https://github.com/jdbartlett/loupe


「loupe」の使用方法

「jquery.loupe.js」をダウンロードし下記のように設定します。

JS

「jQuery」とダウンロードした「jquery.loupe.js」を読み込みます。

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

クラスを「zoom」で指定した画像に対して、ルーペ(loupe)を使用するように設定します。
また、ルーペの幅、高さを指定しています。

<script type="text/javascript">
$(function() {
    $('.zoom').loupe({
        width: 200,
        height: 200
    });
});
</script>

CSS

マウスをあわせた時の虫眼鏡のスタイルを記述します。

<style type="text/css">
.loupe {
    border: 1px solid #000;
}
</style>

HTML

imgタグに「class=”zoom”」を記述しています。
また実際のサイズより小さいサイズで表示するように幅を指定しています。

<img src="sample.jpg" class="zoom" width="300" />

aタグで指定する場合は下記のように記述します。

<a class="zoom" href="sample.jpg">
    <img src="sample.jpg" width="300" />
</a>

大きい画像と小さい画像を用意して、imgタグに標準で表示する画像を設定し、
aタグに拡大する画像を設定することも可能です。
また、全く別々の画像を指定することも可能です。


上記の設定が完了後、設定した画像の上にマウスを持っていきます。

jquery_loupe1

マウスを画像にあてると、虫眼鏡のように画像が拡大して表示されます。

jquery_loupe2

簡単に設置することができるし、ショッピングサイトなど
色々な場面で使用できそうなのでオススメです。


WordPress:WordPressのデータベースを変更する方法

WordPressを使用していて、サーバを移行する時などデータベースを変更する場合があります。
設定ファイルのデータベース情報(データベース名、ユーザー名、パスワード、ホスト名)を変更するだけで簡単にデータベースを切り替えることができます。

下記にWordPressデータベース変更した際の方法をメモします。


WordPressのデータベースを変更する

WordPressでデータベースを変更する場合は下記のファイルを修正します。

wp-config.php

「wp-config.php」はデータベースの設定やWordPressの環境を設定するファイルです。

「wp-config.php」をエディターで開き、下記のデータベース情報を変更します。

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'データベース名');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'ユーザー名');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'パスワード');

/** MySQL のホスト名 */
define('DB_HOST', 'ホスト名');

/** データベースのテーブルを作成する際のデータベースのキャラクターセット */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define('DB_COLLATE', '');

新しく設定するデータベース情報で「データベース名」「ユーザー名」「パスワード」「ホスト名」の情報を変更します。
編集が終わったらサーバに「wp-config.php」をアップすればデータベースの変更が反映されます。