ساخت آلبوم آنلاین با CSS3وHTML5

ساخت آلبوم آنلاین با CSS3وHTML5

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

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

ساخت البوم آنلاین با CSS3 وjQuery

کد HTML

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Album Previews with CSS3 and jQuery | Tutorialzine </title>

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

    </head>
    <body>

        <div id="main">

                <a href="#" data-images="assets/img/thumbs/11.jpg|assets/img/thumbs/10.jpg"
                   class="album">
                   <img src="assets/img/thumbs/4.jpg" alt="People" />
                   <span class="preloader"></span>
                </a>

                <!-- More albums will go here -->

        </div>

        <!-- JavaScript Includes -->
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="assets/js/script.js"></script>
        <script src="assets/js/albumPreviews.js"></script>

    </body>
</html>

 div #main البوم های انتخاب شده را نگه می دارد.​

​
<a href="#" data-images="assets/img/thumbs/11.jpg|assets/img/thumbs/10.jpg" class="album">
   <img src="assets/img/thumbs/4.jpg" alt="People" />
   <span class="preloader"></span>
</a>

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

در داخل لینک ها چند تا عکس وجود دارد(تا در صورت غیر فعال شدن javascript نشان داده شوند).

به هر حال نوشتن لینک برای تمام عکس ها خیلی وقت گیر است پس ما کدی به زبانPHPمی نویسیم تا این کار رو برای ما انجام بدهد

index.php

$albums = array(
    'People' => array(
                'assets/img/thumbs/4.jpg',
                'assets/img/thumbs/11.jpg',
                'assets/img/thumbs/10.jpg'),

   // More albums go here
);

foreach ($albums as $name => $a) {

    ?>

    <a href="#" data-images="<?php echo implode('|', array_slice($a,1))?>" class="album">
       <img src="<?php echo $a[0]?>" alt="<?php echo $name?>" />
       <span class="preloader"></span>
    </a>

    <?php

}

حال کد javascript   را مینویسیم تا عکس ها ابتدا به البوم اضافه شده و سپس به صورت اسلاید شو نمایش داده شوند.

assets/js/albumPreviews.js

(function($) {

    $.fn.albumPreviews = function() {

        return this.each(function(){

            var album = $(this),
                loop = null, images = $();

            if(!album.data('images')){
                // The data-images attribute is missing. Skip this album.
                return true;
            }

            var sources = album.data("images").split('|');

            album.on('mouseenter', function(){

                if(!images.length){
                    // The images have not been loaded yet

                    $.each(sources,function(){
                        images = images.add('<img src="' + this + '" />');
                    });

                    // Start the animation after the first photo is loaded
                    images.first().load(function() {
                        album.trigger('startAnimation');
                    });

                    album
                        .append(images)
                        .addClass('loading');
                }
                else{
                    // Start the animation directly
                    album.trigger('startAnimation');
                }

            }).on('mouseleave', function(){
                album.trigger('stopAnimation');
            });

            // Custom events:

            album.on('startAnimation',function(){

                var iteration = 0;

                // Start looping through the photos
                (function animator(){

                    album.removeClass('loading');

                    // Hide the currently visible photo,
                    // and show the next one:

                    album.find('img').filter(function(){
                        return ($(this).css('opacity') == 1);
                    }).animate({
                        'opacity' : 0
                    }).nextFirst('img').animate({
                        'opacity' : 1
                    });

                    loop = setTimeout(animator, 1000);  // Once per second

                })();

            });

            album.on('stopAnimation',function(){

                album.removeClass('loading');
                // stop the animation
                clearTimeout(loop);
            });

        });

    };

    // This jQuery method will return the next
    // element of the specified type, or the
    // first one if it doesn't exist

    $.fn.nextFirst = function(e) {
        var next = this.nextAll(e).first();
        return (next.length) ? next : this.prevAll(e).last();
    };

})(jQuery);

assets/js/script.js

$(function() {

    // Initialize the plugin
    $('#main .album').albumPreviews();

});

حال کد های CSS رو می نویسیم

assets/css/styles.css.

.album{
    width:140px;
    height:140px;
    margin: 15px 5px;
    position:relative;

    display:inline-block;
    border: 4px solid #F0F0F0;
    background-color: #F0F0F0;

    border-radius:12px;
    box-shadow:0 -2px 0 #616161;

    /* Reflections below the image */
    -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.1) 100%);
}

/* Showing a subtle shadow on the borders of the image */
.album:before{
    content: '';
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index:1000;
    position: absolute;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;
    border:1px solid #fff;
}

/* The album photos (hidden by default) */
.album img{
    top:0;
    left:0;
    opacity:0;
    width:140px;
    height:140px;
    position:absolute;
}

/* The first (the default) thumbnail is visible */
.album img:first-child{
    opacity:1;
}

.album img,
.album:before{
    border-radius: 10px;
}

/* The preloader PNG. It is rotated with a CSS keyframe animation */

.album .preloader{
    display:none;
}

.album.loading .preloader{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    background:url('../img/preloader.png') center center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    display:block;

    /* Configure a keyframe animation for Firefox */
    -moz-animation: rotate 1s linear infinite;

    /* Configure it for Chrome and Safari */
    -webkit-animation: rotate 1s linear infinite;
}

/* Webkit keyframe animation */
@-webkit-keyframes rotate{
    ۰%{		-webkit-transform:rotate(0deg);}
    ۱۰۰%{	-webkit-transform:rotate(360deg);}
}

/* Firefox Keyframe Animation */
@-moz-keyframes rotate{
    ۰%{		-moz-transform:rotate(0deg);}
    ۱۰۰%{	-moz-transform:rotate(360deg);}
}

و در اخراسکریپت شروع به بارگذاری تصاویر می کند.

پایان

+1
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>