ساخت اسلاید شو با زمانبندی

ساخت اسلاید شو با زمانبندی

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

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

اکنون کا را با نوشتن کد های HTML اغاز می کنیم

HTML

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

ما ابتدا اساس صفحه را طراحی میکنیم

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Timeline Portfolio | Tutorialzine Demo</title>

        <!-- The default timeline stylesheet -->
        <link rel="stylesheet" href="assets/css/timeline.css" />
        <!-- Our customizations to the theme -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Google Fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script
          |Antic+Slab" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="timeline">
            <!-- Timeline will generate additional markup here -->
        </div>

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/timeline-min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

در تگ head ما استایل های پلاگین  را داریم: timeline.css و styles.css که تنظیمات را نگه می دارند و در تگ footer ما کتابخانه jQuery  وپلاگین timeline و script.js را وارد میکنیم.

وقتی ما پلاگین را فراخوانی کردیم،تگ هایی که id انها timeline است را جست و جو می کند و در کنار آن نشانه گذاری ها را در timeline وارد میکند.

<div class="container main" id="timeline">
    <div class="feature slider" style="overflow-y: hidden;">
        <div class="slider-container-mask slider-container slider-item-container">

            <!-- The divs below are the events of the timeline -->

            <div class="slider-item content">
                <div class="text container">

                    <h2 class="start">Johnny B Goode</h2>
                    <p><em><span class="c1">Designer</span> &amp; <span class=
                    "c2">Developer</span></em></p>

                </div>

                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>

            <div class="slider-item content content-container">
                <div class="text container">

                    <h2 class="date">March 2009</h2>
                    <h3>My first experiment in time-lapse photography</h3>
                    <p>Nature at its finest in this video.</p>

                </div>

                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>

            <!-- More items go here -->
        </div>

        <!-- Next arrow -->
        <div class="nav-next nav-container">
            <div class="icon"></div>
            <div class="date">March 2010</div>
            <div class="title">Logo Design for a pet shop</div>
        </div>

        <!-- Previous arrow -->
        <div class="nav-previous nav-container">
            <div class="icon"></div>
            <div class="date">July 2009</div>
            <div class="title">Another time-lapse experiment</div>
        </div>
    </div>

    <div class="navigation">

            <!-- The navigation items go here (the tooltips in the bottom)
                one for each of the events -->

            <div class="time">
                <!-- The timeline numbers go here -->
            </div>
        </div>

        <div class="timenav-background">
            <div class="timenav-line" style="left: 633px;"></div>

            <div class="timenav-interval-background top-highlight"></div>
        </div>

        <div class="toolbar" style="top: 27px;">
            <div class="back-home icon" title="Return to Title"></div>
            <div class="zoom-in icon" title="Expand Timeline"></div>
            <div class="zoom-out icon" data-original-title="Contract Timeline"></div>
        </div>
    </div>
</div>

JQuery

برای استفاده کردن از پلاگین ما نیاز به فراخوانی متد()VMM.timeline داریم

$(function(){

    var timeline = new VMM.Timeline();
    timeline.init("data.json");

});

اکنون از کد های CSS برای زیبا تر کردن و چیدمان timeline استفاده می کنیم

#timeline{
    background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
    background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
    background: url('../img/timeline_bg.jpg') repeat;
    border-top:none;
}

#timeline div.navigation:before{
    position:absolute;
    content:'';
    height:40px;
    width:100%;
    left:0;
    top:-40px;
    background: url('../img/timeline_bg.jpg') repeat;
}

#timeline div.navigation:after{
    position:absolute;
    content:'';
    height:10px;
    width:100%;
    left:0;
    top:-40px;
    background:repeat-x;

    background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
    background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

#timeline div.timenav-background{
 	background-color:rgba(0,0,0,0.4) !important;

}

#timeline .navigation .timenav-background .timenav-interval-background{
    background:none;
}

#timeline .top-highlight{
    background-color:transparent !important;
}

#timeline .toolbar{
    border:none !important;
    background-color: #202222 !important;
}

#timeline .toolbar div{
    border:none !important;
}

#timeline .navigation .timenav .time .time-interval-minor .minor{
    margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
    color: #CCCCCC;
}

.slider .nav-previous .icon {
    background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
    font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
    background: url("timeline.png") no-repeat scroll 72px -221px transparent;
    width: 70px !important;
}

.slider .nav-next:hover .icon{
    position:relative;
    right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
    color: #666;
    cursor: pointer;
}

#timeline .thumbnail {
    border: medium none;
}

#timeline .feedback {
    background-color: #222222;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
    border:none;
}

#timeline .feedback div{
    color: #AAAAAA;
    font-size: 14px !important;
    font-weight: normal;
}

#timeline .slider-item h2,
#timeline .slider-item h3{
    font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
    color:#fff;
}

#timeline .slider-item p{
    font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
    border:none;
}

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
    font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
    background:rgba(0,0,0,0.3);
    white-space: nowrap;
    padding:10px 5px 5px 20px;
    position:relative;
    right:-60px;
    z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
    font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
    background:rgba(0,0,0,0.3);
    white-space: nowrap;
    padding:5px 20px;
    position:relative;
    right:-60px;
    z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
    color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
    color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
    left: -30px;
    position: relative;
    z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
    text-align: center;
}

 

+3
0


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

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

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

۲ دیدگاه ها

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

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

*


1 + = سه

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>