月別アーカイブ: 2013年7月

画像をランダム表示する

今回は画像をランダム表示する処理をやって見ます。
ページを開いた時と、ボタンを押したときに画像の表示順をランダムで変更します。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                // page open
                $('body').ready( function() {
                    imageShuffle();
                });

                // button click
                $('#shuffleClick').click( function() {
                    imageShuffle();
                });

                // image shuffle
                function imageShuffle () {

                    // image array
                    var arrImg = [];

                    // image area get
                    $("#image_area div").each(function() {
                        arrImg.push($(this).html());
                    });

                    // image random sort
                    arrImg.sort(function() {
                        return (Math.random() - 0.5);
                    });

                    // image area init
                    $("#image_area").empty();

                    // image area set
                    for(i=0; i < arrImg.length; i++) {
                        $("#image_area").append('<div>' + arrImg[i] + '</div>');
                    }

                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #button_area ,
            #image_area  {
                margin            : 20px;
            }

            #image_area div {
                float            : left;
            }

        --></style>
        
    </head>
    <body>

        <div id="button_area">
            <input type="button" id="shuffleClick" value="shuffle">
        </div>

        <div id="image_area">

            <div><img src="./icon_jpeg01.jpg"></div>
            <div><img src="./icon_jpeg02.jpg"></div>
            <div><img src="./icon_jpeg03.jpg"></div>
            <div><img src="./icon_jpeg04.jpg"></div>
            <div><img src="./icon_jpeg05.jpg"></div>
            <div><img src="./icon_jpeg07.jpg"></div>
            <div><img src="./icon_jpeg08.jpg"></div>
            <div><img src="./icon_jpeg09.jpg"></div>
            <div><img src="./icon_jpeg10.jpg"></div>
            <div><img src="./icon_jpeg11.jpg"></div>
            <div><img src="./icon_jpeg12.jpg"></div>
            <div><img src="./icon_jpeg13.jpg"></div>
            <div><img src="./icon_jpeg14.jpg"></div>
            <div><img src="./icon_jpeg15.jpg"></div>
            <div><img src="./icon_jpeg16.jpg"></div>
            <div><img src="./icon_jpeg17.jpg"></div>
            <div><img src="./icon_jpeg18.jpg"></div>
            <div><img src="./icon_jpeg19.jpg"></div>
            <div><img src="./icon_jpeg20.jpg"></div>
            <div><img src="./icon_jpeg21.jpg"></div>
            <div><img src="./icon_jpeg22.jpg"></div>

        </div>

    </body>
</html>

sample

これで表示順が入れ替わっていると思います。

画像は変数に取り込むので初期は表示せずに、Javascript 内で定義することも可能です。
その場合、たとえば下記の内容で事前に表示画像を登録しておけば大丈夫だと思います。
 arrImg[] = ‘‹div›‹img src=”./xxxxxx.jpg”›‹/div›’;

表示画像を Javascript 内で定義しておけば、何十枚の画像から数枚だけ表示するなんてことも出来ます。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 0 人がこの 投稿 は役に立ったと言っています。

画像を回転させる

今回はボタンを押した時に画像の回転をする処理をやって見ます。
ボタンを押したとこに画像が回転します。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--;

            function exeImageRotate(r_type, angle) {

                // initialization
                $('#main_area img').css('fontSize', 0);

                $('#main_area img').animate(
                    {
                        fontSize : 1
                    },
                    {

                        // animate time ( second 1.5 )
                        duration:1500,

                        step:function(step){
                            // step animate
                            if (r_type == '3d') {
                                // 3d
                                $(this).css({transform:'rotate' + r_type + '(1, 1, 1, ' + (step * angle) + 'deg)'});
                            } else {
                                // X, Y, Z
                                $(this).css({transform:'rotate' + r_type + '(' + (step * angle) + 'deg)'});
                            }
                        }

                    }
                );

            }

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">

    </head>
    <body>
        <div id="main_area">
            <img src="./image_jpeg.jpg">
        </div>
        
        <div id="button_area">
            <input type="button" value="X : 180°" onclick="exeImageRotate('X', 180);">
            <input type="button" value="X : 360°" onclick="exeImageRotate('X', 360);">
            <input type="button" value="Y : 180°" onclick="exeImageRotate('Y', 180);">
            <input type="button" value="Y : 360°" onclick="exeImageRotate('Y', 360);">
            <input type="button" value="Z : 180°" onclick="exeImageRotate('Z', 180);">
            <input type="button" value="Z : 360°" onclick="exeImageRotate('Z', 360);">
            <input type="button" value="3d: 360°" onclick="exeImageRotate('3d', 360);">
        </div>
        
    </body>
</html>

sample

これで画像の回転表示が出来ました。

回転処理は本来 animate の処理では動作しません。
そこで、animate で動作可能な数値を変数代わりに使用しています。

今回変数代わりに使用してるのは fontsize です。
fontSize は img タグには使用することは無いので特に問題は無いと思います。
動いていますが、結構強引なことをやってる気がしますね・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

サムネイルの選択表示

今回はサムネイル画像を選択したときに、選択したサムネイルを強調表示する処理です。
強調表示自体は画像の外側に枠線を付けるだけですが、他のサムネイルを選択したときに
animate での処理を入れてみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--;

            // default image
            $('body').ready( function() {

                // thumb_img click
                $('#thumb_area div.thumb_div img').click( function() {

                    // animate stop
                    $('#thumb_select').stop(true, true);
                    $('#thumb_select').fadeIn('normal');
                    
                    // after src set
                    no = $(this).attr('value');    // get no

                    // exec slider
                    offset  = $('#thumb' + no).offset();
                    size_w = $('#thumb' + no).width();
                    size_h = $('#thumb' + no).height();

                    $('#thumb_select').animate(
                        {
                            top    : offset.top,
                            left   : offset.left,
                            width  : size_w,
                            height : size_h
                        },
                        {
                            duration : "normal",
                            easing   : "swing",
                            complete : function() {}
                        }
                    );
                    
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #thumb_area {
                position         : relative
            }

            #thumb_area div.thumb_div {
                background-color : #cccccc;
                float            : left;
                margin           : 20px;
                padding          : 5px;
            }

            #thumb_select {
                display          : none;
                position         : absolute;
                border           : solid 5px #ff0000;
            }

        --></style>
        
    </head>
    <body>

        <div id="thumb_area">

            <div id="thumb01" class="thumb_div"><img src="./icon_jpeg01.jpg" value="01"></div>
            <div id="thumb02" class="thumb_div"><img src="./icon_jpeg02.jpg" value="02"></div>
            <div id="thumb03" class="thumb_div"><img src="./icon_jpeg03.jpg" value="03"></div>
            <div id="thumb04" class="thumb_div"><img src="./icon_jpeg04.jpg" value="04"></div>
            <div id="thumb05" class="thumb_div"><img src="./icon_jpeg05.jpg" value="05"></div>
            <div id="thumb06" class="thumb_div"><img src="./thumb_png01.png" value="06"></div>
            <div id="thumb07" class="thumb_div"><img src="./icon_jpeg06.jpg" value="07"></div>
            <div id="thumb08" class="thumb_div"><img src="./icon_jpeg07.jpg" value="08"></div>
            <div id="thumb09" class="thumb_div"><img src="./icon_jpeg08.jpg" value="09"></div>
            <div id="thumb10" class="thumb_div"><img src="./icon_jpeg09.jpg" value="10"></div>
            <div id="thumb11" class="thumb_div"><img src="./thumb_png02.png" value="11"></div>
            <div id="thumb12" class="thumb_div"><img src="./icon_jpeg10.jpg" value="12"></div>
            <div id="thumb13" class="thumb_div"><img src="./icon_jpeg11.jpg" value="13"></div>
            <div id="thumb14" class="thumb_div"><img src="./icon_jpeg12.jpg" value="14"></div>
            <div id="thumb15" class="thumb_div"><img src="./icon_jpeg13.jpg" value="15"></div>
            <div id="thumb16" class="thumb_div"><img src="./icon_jpeg14.jpg" value="16"></div>
            <div id="thumb17" class="thumb_div"><img src="./thumb_png03.png" value="17"></div>
            <div id="thumb18" class="thumb_div"><img src="./icon_jpeg15.jpg" value="18"></div>
            <div id="thumb19" class="thumb_div"><img src="./icon_jpeg16.jpg" value="19"></div>
            <div id="thumb20" class="thumb_div"><img src="./icon_jpeg17.jpg" value="20"></div>
            <div id="thumb21" class="thumb_div"><img src="./icon_jpeg18.jpg" value="21"></div>
            <div id="thumb22" class="thumb_div"><img src="./icon_jpeg19.jpg" value="22"></div>
            <div id="thumb23" class="thumb_div"><img src="./thumb_png04.png" value="23"></div>
            <div id="thumb24" class="thumb_div"><img src="./icon_jpeg20.jpg" value="24"></div>
            <div id="thumb25" class="thumb_div"><img src="./icon_jpeg21.jpg" value="25"></div>
            <div id="thumb26" class="thumb_div"><img src="./icon_jpeg22.jpg" value="26"></div>

            <div id="thumb_select"></div>

        </div>


    </body>
</html>

sample

これで選択したサムネイルの強調表示が出来ました。

・・・アイコンが不並びなのはわざとです。
選択サムネイルのサイズや位置が違っても対応できることの確認用です。
決して揃えるのが面倒だったからではありません。

元サムネイルと選択サムネイルの間で animate を使用して選択枠を移動しています。
また、easing の機能はとして、”linear” と “swing” が標準であります。
今回は “swing” を使用していますが、正直なところ私には違いがわかりません。

機会があれば easing のプラグインの紹介もしていきたいと思います。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

サムネイル選択でメイン画像の変更

今回はサムネイル画像を選択したときにメイン画像の変更です。
メイン画像の変更は横スライドさせてみたいと思います。

<html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--;

            // default image
            $('body').ready( function() {

                var i_load    = new Array();
                    i_load&#91;1&#93; = new Image;
                    i_load&#91;2&#93; = new Image;
                    i_load&#91;3&#93; = new Image;
                    i_load&#91;4&#93; = new Image;

                var image     = new Array();
                    image&#91;1&#93;  = './image_jpeg01.jpg';
                    image&#91;2&#93;  = './image_jpeg02.jpg';
                    image&#91;3&#93;  = './image_jpeg03.jpg';
                    image&#91;4&#93;  = './image_jpeg04.jpg';

                    i_load&#91;1&#93;.src = image&#91;1&#93;;
                    i_load&#91;1&#93;.onload = function () {};
                    i_load&#91;2&#93;.src = image&#91;2&#93;;
                    i_load&#91;2&#93;.onload = function () {};
                    i_load&#91;3&#93;.src = image&#91;3&#93;;
                    i_load&#91;3&#93;.onload = function () {};
                    i_load&#91;4&#93;.src = image&#91;4&#93;;
                    i_load&#91;4&#93;.onload = function () {};


                // default image
                $('#div_before img').attr('src', image&#91;1&#93;);
                $('#div_after img').attr('src', image&#91;1&#93;);


                // thumb_img click
                $('#thumb_area div img').click( function() {

                    // animate stop
                    $('#div_before').stop(true, true);
                    $('#div_after').stop(true, true);

                    // default position
                    beforeWidth = $('#div_before').width();
                    $('#div_before').css('left', 0);
                    $('#div_after').css('left', beforeWidth);

                    // after src set
                    no = $(this).attr('value');    // get no
                    $('#div_after img').attr('src', image&#91;no&#93;);

                    // exec slider
                    $('#div_before').animate(
                        {
                            left    : (beforeWidth * -1)
                        },
                        {
                            duration: 'slow',
                            complete: function() { $('#div_before img').attr('src', image&#91;no&#93;); }
                        }
                    );
                    $('#div_after').animate(
                        {left: 0},
                        {
                            duration: 'slow'
                        }
                    );

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            body {
                margin           : 20px;
            }

            #main_area  {
                position         : relative;
                margin           : 0 auto;
                height           : 350px;
                width            : 960px;
                overflow         : hidden;
            }
            
            #main_area div {
                position         : absolute;
            }
            
            #thumb_area {
                margin           : 0 auto;
                width            : 960px;
            }

            #thumb_area div {
                float            : left;
                margin           : 10px 100px;
                background-color : #cccccc;
            }

        --></style>
        
    </head>
    <body>
        <div id="main_area">
            <div id="div_before"><img src=""></div>
            <div id="div_after" ><img src=""></div>
        </div>
        
        <div id="thumb_area">
            <div><img src="./thumb_png01.png" value="1"></div>
            <div><img src="./thumb_png02.png" value="2"></div>
            <div><img src="./thumb_png03.png" value="3"></div>
            <div><img src="./thumb_png04.png" value="4"></div>
        </div>
        
    </body>
</html>

sample

これで選択したサムネイルによって、メイン画像が切り替わったかと思います。
元画像と選択画像は animate を使用してスライド表示しています。

元画像は、animate 処理が完了した後に、選択画像に画像変更を行います。
コレで次の画像をクリックした時の前準備をしています。

なお、同一画像のクリックチェックは入れていないので、必要な方は随時入れてください。
※クリック後に取得した no 変数あたりを触れば何とかなるはずです。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。