ساخت اسلایدشو تصاویر اپل

ساخت اسلایدشو تصاویر اپل

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

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

ما برای ایجاد این اسلایدشو نیازی به پایگاه داده یا کد php نخواهیم داشت یعنی شما به سادگی میتوانید از این اسلایدشو زیبا فقط با کمی تغییر در کدهای html استفاده کنید.برای روشن شدن بحث به کدهای زیر توجه کنید.

ایده اصلی این اسلایدشو بسیار آسان است.ما دو تگ اصلی داریم :یکی menu برای نگه داشتن آیتم های منو و دیگری(slides) برای نگه داشتن اسلاید ها.شما برای اینکه بهاسلایدشو یک آیتم جدید اضافه کنید کافی است تا به هر دوی تگ های بالا آن را اضافه نمایید.

تصاویری که ما در اینجا استفاده کرده ایم با پسوند jpg می باشند ولی شما میتوانید از نوع فرمت تصویری دیگری استفاده کنید.همچنین شما میتوانید برای هر تصویر یک لینک با افزودن تگ مربوطه(<a>) اضافه کنید.

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

همچنین به عناصرli در آخر توجه کنید،در ابتدا ما یک کلاس با نام fbar  برای ایجاد یک نوار مستقیم در پایین اسلایدشو استفاده می کنیم و سپس از کلاس menuItem برای مدیریت و کنترل دکمه های  اسلایدشو استفاده می کنیم.

i2

در قدم بعدی ما به سراغ نوشتن کدهای CSS میرویم.ابتدا به کدهای زیر توجه کنید

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Page reset */
    margin:0px;
    padding:0px;
}

body{
    /* Setting default text color, background and a font stack */
    color:#444444;
    font-size:13px;
    background: #f2f2f2;
    font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url(img/panel.jpg) repeat-x bottom center #ffffff;

    /* The width of the gallery */
    width:920px;
    overflow:hidden;
}

#slides{
    /* This is the slide area */
    height:400px;

    /* jQuery changes the width later on to the sum of the widths of all the slides. */
    width:920px;
    overflow:hidden;
}

.slide{
    float:left;
}

#menu{
    /* This is the container for the thumbnails */
    height:45px;
}

ul{
    margin:0px;
    padding:0px;
}

li{
    /* Every thumbnail is a li element */
    width:60px;
    display:inline-block;
    list-style:none;
    height:45px;
    overflow:hidden;
}

li.inact:hover{
    /* The inactive state, highlighted on mouse over */
    background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg.png) no-repeat;
}

li.act a{
    cursor:default;
}

.fbar{
    /* The left-most vertical bar, next to the first thumbnail */
    width:2px;
    background:url(img/divider.png) no-repeat right;
}

li a{
    display:block;
    background:url(img/divider.png) no-repeat right;
    height:35px;
    padding-top:10px;
}

a img{
    border:none;
}

نکاتی که باید در مورد این کدها باید گفته شوند:

box-shadow،برای ایجاد سایه در زیر هر عکس

border-radius،برای ایجاد انحنا در قسمت پایینی اسلایدشو
بقیه کدها به دلیل سادگی نیاز به توضیح ندارند.

همانطور که قبلا گفته شد در این اسلایدشو از هیچ کد سمت سروری استفاده  نشده است.برای روشن شدن بحث به کدهای جی کوئری زیر توجه کنید

script.js

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

    var totWidth=0;
    var positions = new Array();

    $('#slides .slide').each(function(i){
        /* Loop through all the slides and store their accumulative widths in totWidth */
        positions[i]= totWidth;
        totWidth += $(this).width();

        /* The positions array contains each slide's commulutative offset from the left part of the container */

        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }
    });

    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e){

        /* On a thumbnail click */
        $('li.menuItem').removeClass('act').addClass('inact');
        $(this).parent().addClass('act');

        var pos = $(this).parent().prevAll('.menuItem').length;

        $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
        /* Start the sliding animation */

        e.preventDefault();
        /* Prevent the default action of the link */
    });

    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */
});

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

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

تمامی کارهای بالا فقط با ۴۰ سطر کد انجام میپذیرد.

i1

پایان

+3
-1


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

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

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

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

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

*


هفت × 5 =

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>