ساخت اسلایدشو با افکت حباب

ساخت اسلایدشو با افکت حباب

اسلایدشویی که امروز ما اموزش خواهیم داد با استفاده از یک پلاگین ساده jQuery خواهد بود.کار بیشتر را امروز این پلاگین انجام خواهد داد. در این بخش ما فعلا کار زیادی نداریم.به هر حال برای استفاده از پلاگین شما نیاز به اضافه کردن یک لیست نا مرتب دارید.هر عکسی که به اسلایدشو اضافه می کنید داخل یک LI اضافه میشود.

برای مشاهده لینک وارد شود

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Bubble Slideshow Effect with jQuery | 8np Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- The plugin stylehseet -->
        <link rel="stylesheet" href="assets/jquery.bubbleSlideshow/
             jquery.bubbleSlideshow.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
          </script>
        <![endif]-->
    </head>

    <body>

        <!-- The bubble slideshow holder -->
        <ul id="slideShow"></ul>

        <!-- JavaScript includes -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
          </script>
        <script src="assets/jquery.bubbleSlideshow/bgpos.js"></script>
        <script src="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

برای اینکه بتونیم از این پلاگین استفاده ما نیاز به وارد کردن  jquery.bubbleSlideshow.css  در داخل تگ head،فایل bgpos.js و  jquery.bubbleSlideshow.js  قبل از بستن تگ body هستیم.bgpos.js به ما این اجازه را میدهد تا از خاصیت background-position  برای جابجایی حباب ها استفاده کنیم. jquery.bubbleSlideshow.js  کد هایی را که امروز مینویسیم را نگه می دارد.

JavaScript and jQuery

ما ابتدا کلاسی به نام bubble با جاوااسکریپت مینویسیم.هر حباب داخل اسلاید شو یک شی این کلاس است.این کلاس خاصیت های از قبیل بالا،پایین،اندازه و… را نگه میدارد که بعدا ما از آنها برای به حرکت در آوردن حباب ها توسط متد() flyfrom استفاده خواهیم کرد.

jquery.bubbleSlideshow.js

 // This is the Bubble class. It takes left and top
    // coordinates, size (diameter) and a image URL

    function Bubble( left, top, size, imgURL ){

        this.top	= top;
        this.left	= left;
        this.size	= size;

        // This places the center of the
        // circles on the specified position:

        top -= size/2;
        left-= size/2;

        this.elem = $('<div>',{
            'class':'bubble',
            'css'	: {
                'width'		: size,
                'height'	: size,
                'top'		: top,
                'left'		: left,
                'background-position': (-left)+'px '+(-top)+'px',
                'background-image': 'url('+imgURL+')'
            }
        });

    }

    // The fly from method takes a starting position, time,
    // and a callback function, executed when the animation finishes.

    Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){

        time = time || 250;
        callBack = callBack || function(){};

        startX -= this.size/2;
        startY -= this.size/2;

        // Offsetting the element

        this.elem.css({
            'display'				: 'block',
            'backgroundPositionX'	: -startX,
            'backgroundPositionY'	: -startY,
            'left'					: startX,
            'top'					: startY
        });

        // Animating it to where it should be

        this.elem.animate({
            'backgroundPositionX'	: -this.left,
            'backgroundPositionY'	: -this.top,
            'left'					: this.left,
            'top'					: this.top
        }, time, 'easeOutCirc', callBack );

    };

    // Helper function for generating random
    // values in the [min,max] range

    function rand( min, max ){
        return Math.floor( Math.random()*((max+1)-min) + min);
    }
اکنون ما یک کلاس داریم،اکنون یک تابعی مینویسیم تا حباب ها را به LI ها اعمال کند و آنها را به حرکت در بیاورد.

​jquery.bubbleSlideshow.js

 function showBubbles( stage, imgURL, func ){

        // This function appends a new LI element to the UL
        // and uses it to hold and animate the bubbles.

        var i = 0,
            bubbles = [],
            totalBubbles = 75,
            stageWidth = stage.outerWidth(),
            stageHeight = stage.outerHeight(),
            emptyFunc = function(){};

        // This li holds the bubbles
        var li = $('<li class="bubbleStage">').appendTo(stage);

        // This function is passed to the flyFrom method call:

        var callBack = function(){

            // Waiting for the func function to
            // finish and removing the li.

            $.when(func()).then(function(){
                li.remove();
            });
        };

        for( i=0; i<totalBubbles; i++ ){

            var x	 = rand(0, stageWidth),
                y	 = rand(0,stageHeight),
                size = rand(30,150);

            var bubble = new Bubble( x, y, size, imgURL );
            li.append(bubble.elem);

            bubbles.push(bubble);
        }

        // Sorting the bubbles so that the
        // bubbles closest to the top border of
        // the image come first:

        bubbles = bubbles.sort(function( b1, b2 ){
            return b1.top+b1.size/2 > b2.top+b2.size/2;
        });

        // Looping through all the bubbles,
        // and triggering their flyFrom methods

        for( i=0; i<bubbles.length; i++){

            (function( bubble, i ){
                setTimeout(function(){

                    bubble.flyFrom(
                        stageWidth/2,
                        stageHeight+200,
                        ۲۵۰,
                        (i == bubbles.length-1) ? callBack : emptyFunc
                    );

                // This Math.floor schedules five bubbles
                // to be animated simultaneously

                }, Math.floor(i/5)*100); 

            })( bubbles[i], i );
        }
    }

ما تا حالا فقط تابعی برای حرکت حباب ها نوشتیم و هنوز هیچ پلاگینی ننوشتیم پس ما باید روی آن کار کنیم در ضمن هنوز عکس ها (اسلایدها)معلوم نیستند پس اول باید آنها را تعیین کنیم

jquery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

        if(!$.isArray(photos)){
            throw new Error("You need to pass an array of photo URLs as a parameter!");
        }

        photos = photos.reverse();

        var ul = this.addClass('bubbleSlideshow');

        $.each(photos,function(){
            ul.append('<li><img src="'+this+'" /></li>');
        });

        // These methods are available externally and
        // can be used to control the bubble slideshow

        ul.showNext = function(){
            showNext(ul);
        };

        ul.showPrev = function(){
            showPrev(ul);
        };

        ul.autoAdvance = function(timeout){
            timeout = timeout || 6000;
            autoAdvance(ul,timeout);
        };

        ul.stopAutoAdvance = function(){
            stopAutoAdvance(ul);
        };

        return ul;
    };

تابع بالا پلاگین جدیدی به نام ()bubbleslideshow را فراخوانی میکند.آن UL ها را فراخوانی می کند و ارایه ای از پارامتر های آدرس تصاویر را دریافت می کند.

jquery.bubbleSlideshow.js

 function autoAdvance(stage,timeout){
        stage.data('timeout',setTimeout(function(){
            showNext(stage);
            autoAdvance(stage,timeout);
        },timeout));
    }

    function stopAutoAdvance(stage){
        clearTimeout(stage.data('timeout'));
    }

    function showNext(stage){
        showFrame(stage, stage.find('li.bubbleImageFrame').first());
    }

    function showPrev(stage){
        showFrame(stage, stage.find('li.bubbleImageFrame').last().prev());
    }

    function showFrame(stage, frame ){

        // This function shows a frame,
        // passed as a jQuery object

        if(stage.data('working')){
            // Prevents starting more than
            // one animation at a time:
            return false;
        }
        stage.data('working',true);

        var frame = frame.hide().detach();

        // Using the showBubbles function, defined below.
        // The frame is showed after the bubble animation is over.

        showBubbles( stage, frame.find('img').attr('src'), function(){
            stage.append(frame);
            stage.data('working',false);

            // This returns a jQuery Promise object.
            return frame.fadeIn('slow');
        });		

    }

و در زیر شما نحوه مقدار دهی اولیه تصاویر را انجام می دهید

script.js

$(function(){
    var photos = [
        'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
        'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
        'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
        'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
        'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
        'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
    ];

    var slideshow = $('#slideShow').bubbleSlideshow(photos);

    $(window).load(function(){
        slideshow.autoAdvance(5000);
    });

    // Other valid method calls:

    // slideshow.showNext();
    // slideshow.showPrev();
    // slideshow.stopAutoAdvance();
});

ودر آخر با استفاده از کد های CSS ما محل قرار گیری تصاویر،پس زمینه و … را تعیین می کنیم.

jquery.bubbleSlideshow.css

ul.bubbleSlideshow{
    position:relative;
    list-style:none;
    overflow:hidden;
}

.bubbleSlideshow li{
    position:absolute;
    top:0;
    left:0;
}

.bubbleSlideshow li img{
    display:block;
}

.bubbleSlideshow li div.bubble{
    -moz-border-radius:50%;
    -webkit-border-raidus:50%;
    border-radius:50%;

    background-repeat:no-repeat;
    display:none;
    position:absolute;
}

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


9 + = دوازده

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>