اسلایدشو موزائیکی

اسلایدشو موزائیکی

در این آموزش ما با استفاده از CSS و Jquery یک اسلایدشو زیبا  خواهیم ساخت که هنگام تعویض عکس یک حالت موزائیکی زیبایی ایجاد خواهد کرد.

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

تبدیل عکس به تکه های موزائیک از طریق تقسیم عکس به اندازه های یکسان صورت میپذیرد.این کاشی ها  که در واقع تکه هایی از عکس را در خود دارند که با پنهان شدن ترتیبی خود باعث میشود تا حالت موزائیکی به عکس ها داده بشود.اجزایی که اسلایدشو را میسازند عبارتند از عنصر mosaic-slideshow# که عناصر اصلی اسلایدشو را نگه میدارند و دو مکان نما برای به حرکت درآوردن تصاویر در طرفین اسلایدشو که توسط جی کوئری به صورت realtime(برخط)بارگذاری میشوند.

demo.html

 
 
 
 
 

تگی که حاوی کلاس  mosaic-slide است پس از اجرای تابع جاوااسکریپت ()transition در صفحه اجرا میشود.در کنار آن شما تگهای tile را مشاهده می کنید.در مجموع ۵۶ تگ وجود دارد که هر کدام بخشی از تصویر را نگه میدارد و اندازه هر کدام از آنها ۵۶px *۵۶px است.

763

برای اجرایی کردن این افکت(موزاییک) ما چند خط کد CSS مینویسیم.ما فقط بخشی از کدها را در زیر توضیح میدهیم ولی شما میتونید تمام کدها را در داخل فایل زیپ مشاهده کنید.

styles.css – Part 1

#mosaic-slideshow{
    /* The slideshow container div */
    height:500px;
    margin:0 auto;
    position:relative;
    width:670px;
}

.mosaic-slide{
    /* This class is shared between all the slides */
    left:80px;
    position:absolute;
    top:25px;

    border:10px solid #555;

    /* CSS3 rounded corners */
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}

.tile{
    /* The individual tiles */
    height:60px;
    width:60px;
    float:left;
    border:1px solid #555;
    border-width:0 1px 1px 0;
    background-color:#555;
}

نحوه نمایش اسلاید به این صورت است که عکس بعدی از طریق نمایش دادن هر تکه از موزائیک ها آغاز میشود یعنی اینکه اول موزائیک اول از بالا نمایش داده میشود و سپس دومی و به همین ترتیب تا تمام عکس نمایش داده شود.

ما از ویژگی های CSS برای گرد کردن گوشه های عکس استفاده خواهیم کرد البته این رو در نظر داشته باشین که این قابلیت در مرورگر های مدرن پشتیبانی می شود.

styles.css – Part 2

.arrow{
    /* The prev/next arrows */
    width:35px;
    height:70px;
    background:url("img/arrows.png") no-repeat;
    position:absolute;
    cursor:pointer;
    top:50%;
    margin-top:-35px;
}

.arrow.left{
    left:15px;
    background-position:center top;
}

.arrow.left:hover{
    background-position:center -70px;
}

.arrow.right{
    right:15px;
    background-position:center -140px;
}

.arrow.right:hover{
    background-position:center -210px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

کلاس arrow مکانماها را نگه میدارد.در بالا نیز تنظیماتی مبنی بر نحوه نمایش و شکل آنها انجام دادیم که به دلیل سادگی نیاز به توضیح ندارند.

پس از وارد کردن کتابخانه جی کوئری به صفحه ما به سراغ ایجاد اسکریپت تیک اسلایدشو میرویم.برای دست یابی به افکت موزائیک ما از ۴ تابع زیر استفاده می کنیم:

()transition:تابعی برای جابجایی بین دو تصویر

()generateGrid: این تابع با استفاده از تابع بالایی به رسم خطوط موزائیک می کند.

()next:برای رفتن به عکس بعدی از این تابع استفاده میشود.

()prev:برای رفتن به عکس قبلی از این تابع استفاده میشود.

script.js – Part 1

/* The slide images are contained in the slides array. */
var slides = new Array('img/slide_1.jpg',
                       'img/slide_2.jpg',
                       'img/slide_3.jpg',
                       'img/slide_4.jpg',
                       'img/slide_5.jpg');

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('.arrow.left').click(function(){
        prev();

        /* Clearing the autoadvance if we click one of the arrows */
        clearInterval(auto);
    });

    $('.arrow.right').click(function(){
        next();
        clearInterval(auto);
    });

    /* Preloading all the slide images: */

    for(var i=0;i<slides.length;i++)
    {
        (new Image()).src=slides[i];
    }

    /* Showing the first one on page load: */
    transition(1);

    /* Setting auto-advance every 10 seconds */

    var auto;

    auto=setInterval(function(){
        next();
    },۱۰*۱۰۰۰);
});

متد ()document).ready) $ یکبار تا پایان بارگذاری صفحه اجرا میشود.این باعث میشود تا مطمئن شویم تمام عنصرها و تگ ها به اسکریپت دستیابی دارند.در کنار آن ما یک تابع برای اتصال  مکان نما ها،بارگذاری اولیه عکس ها،نمایش اولین عکس و تغییر اتوماتیک عکس ها را قرار دادیم.

script.js – Part 2

var current = {};
var current = {};
function transition(id)
{
    /* This function shows the slide specified by the id. */

    if(!slides[id-1]) return false;

    if(current.id)
    {
        /* If the slide we want to show is currently shown: */
        if(current.id == id) return false;

        /* Moving the current slide layer to the top: */
        current.layer.css('z-index',10);

        /* Removing all other slide layers that are positioned below */
        $('.mosaic-slide').not(current.layer).remove();
    }

    /* Creating a new slide and filling it with generateGrid: */
    var newLayer = $('
').html(generateGrid({rows:7,cols:8,image:slides[id-1]})); /* Moving it behind the current slide: */ newLayer.css('z-index',1); $('#mosaic-slideshow').append(newLayer); if(current.layer) { /* Hiding each tile of the current slide, exposing the new slide: */ $('.tile',current.layer).each(function(i){ var tile = $(this); setTimeout(function(){ tile.css('visibility','hidden'); },i*10); }) } /* Adding the current id and newLayer element to the current object: */ current.id = id; current.layer = newLayer; }

تابع چرخش از آبجکت سراسری current برای ذخیره کردن id عکس در حال نمایش استفاده می کنیم و آن را به تگ اسلاید فعلی برمیگردانیم.از این برای  عدم نمایش اسلاید تکراری استفاده خواهیم کرد.

i31

script.js – Part 3

function next()
function next()
{
    if(current.id)
    {
        transition(current.id%slides.length+1);
    }
}

function prev()
{
    if(current.id)
    {
        transition((current.id+(slides.length-2))%slides.length+1);
    }

}

/* Width and height of the tiles in pixels: */
var tabwidth=60, tabheight=60;

function generateGrid(param)
{
    /* This function generates the tile grid, with each tile containing a part of the slide image */

    /* Creating an empty jQuery object: */
    var elem = $([]),tmp;

    for(var i=0;i', {
                    "class":"tile",
                    "css":{
                        "background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
                    }
            });

            /* Adding the tile to the jQuery object: */
            elem = elem.add(tmp);
        }

        /* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
        elem = elem.add('
'); } return elem; }

پارامتر ها به ()generateGrid برای تولید شی مورد نظر ما که شامل مکانما ها وستونهایی که ما میخواهیم ایجاد کنیم داده میشوند تا تصاویر کاملا با پس زمینه موزائیک ها یکدست شوند.

پایان

+4
0


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

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

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

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

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

*


− شش = 2

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>