ساخت گالری تصویر سفارشی توسط jQuery

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

دانلود کد منبع کامل گالری تصویر(86.5kb)
پسورد فایل زیپ : www.websiteha.com

اگر شما گالری های تصاویر ساخته شده توسط jQuery زیادی را دیده باشید ، متوجه می شوید که اکثر آنها یا کاملا" عمودی هستند و یا کاملا" افقی و تقریبا" همه آنها روند یکسانی را به کار گرفته اند . در آموزش قصد داریم کمی متفاوت عمل کنیم . اینکار را با jCarousel انجام خواهیم داد . یک عکس می تواند گویای هزاران لغت باشد ، گالری تصاویر ما به صورت زیر خواهد بود :



1.jCarousel : پلاگین jQuery برای حرکت به صورت چرخ و فلک

اول از همه اجازه دهید کمی در مورد این پلاگین قوی یعنی jCarousel که در حال ادغام آن با این گالری تصاویر هستیم توضیح دهم . پلاگین jCarousel یک پلاگین با قابلیت تنظیم کامل مشخصات می باشد که از آزمایش بر روی مرورگرهای IE6 ، IE7 ، IE8 ، IE9 ، Safari ، کروم و فایرفاکس سربلند بیرون امده است . با تنظیمات زیر ما یک چرخ و فلک تصاویر در حالت عمودی از این پلاگین خواهیم گرفت :

//jCarousel Plugin
$('#carousel').jcarousel({
    vertical: true, //orientation of the carousel, in this case we use vertical
    scroll: 1, //the number of items to scroll by
    auto: 2, //the interval of scrolling
    wrap: 'last', //wrap at last item and jump back to the start
    initCallback: mycarousel_initCallback   //we will use this to further enhance the behavior of this carousel
});

برای تنظیمات ظاهری باید یک فایل CSS نیز به گالری خود اضافه کنیم . شرح جزییات CSS خارج از این مبحث است ، بنابراین تصویر نهایی که با افزودن فایل CSS و انجام تنظیمات سفارشی بر روی آن خواهیم داشت را در اینجا آماده کرده ایم . توجه کنید که تصویر سمت چپ ، تصویری است که در بخش سمت راست به صورت پیش فرض قرار خواهد گرفت :


برای آشنایی با تنظیمات بیشتر پلاگین jCarousel میتوانید به Sorgalla's jCarousel Documentation مراجعه کنید.

2.HTML

در این قسمت کد HTML را بررسی خواهیم کرد . از زیاد بودن این کد نترسید ، هیچ چیز عجیب و غریبی در آن وجود ندارد . با کمی دقت متجه خواهید شد که این کد اساسا" از دو UL که برای ساخت لیست استفاده میشود ، تشکیل شده است :

  • #slideshow-main : این لیست در واقع همان محل اصلی قرار گرفتن تصاویر برزگ در سمت چپ می باشد .
  • #slidehow-carousel : این لیست محل قرار گیری لیست تصاویر چرخ و فلکی در سمت راست می باشد. جایی که jCarousel بر آن اعمال میشود. یک لیست ساده که با تنظیم خصیصه REL به تصاویر موجود در #slideshow-main اشاره میکند.




3.CSS

CSS در این آموزش کمی پیچیده تر از سایر قسمت هاست . بنابراین با شرح مختصری لایه ها را توسط ID و Class آنها در تصویر نمایش میدهیم . برای تنظیمات ظاهری بیشتر میتوانید لایه های مورد نظر خود را در فایل های jquery.jcarousel.css و skin.css پیدا کرده و تغییرات خود را اعمال کنید .
نکته :اگر شما نسخه تازه ای از این پلاگین را از وب سایت jCarousel گرفته باشید ، بر اثر تکامل فایل ها و فولدرها پیچیده تر شده است . نسخه ای که برای دانلود در این اموزش برای شما فراهم شده است ، نسخه ساده این پلاگین است .


body {
    font-family:arial;  
}
 
img {
    border:0;
}
 
/* Styling up the image gallery */
 
#slideshow-main {
    width:429px; 
    float:left; 
    margin-right:3px;
}
 
#slideshow-main ul {
    margin:0; 
    padding:0; 
    width:429px;
}
 
#slideshow-main li {
    width:429px; 
    height:290px; 
    display:none;
    position:relative;
}
 
#slideshow-main li.active {
    display:block !important;
}
 
#slideshow-main li span.opacity {
    position:absolute;
    bottom:0; left:0;
    display:block; 
    width:100%;
    height:60px;
    background:#000;
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5;
    z-index:500;
}
 
#slideshow-main li span.content {
    position:absolute;
    bottom:0; left:0;
    display:block; 
    width:100%;
    height:60px;
    z-index:1000;
}
 
#slideshow-main li span.content h1 {
    font-size:14px;
    margin:5px 0;
    padding:0 10px;;
    color:#42e2e8;
}
 
#slideshow-main li span.content p {
    font-size:11px;
    margin:5px 0;
    padding:0 10px;;
    color:#42e2e8;
}
 
 
 
/* Styling up the carousel */
 
#slideshow-carousel {
    float:left; 
    width:206px;
    position:relative
}
 
#slideshow-carousel ul {
    margin:0; 
    padding:0;
    list-style:none;
}
 
#slideshow-carousel li {
    background:#fff; 
    height:97px; 
    position:relative
}
 
#slideshow-carousel li .arrow {
    left:3px; 
    top:28px; 
    position:absolute; 
    width:20px; 
    height:40px; 
    background:url(images/arrow_white.png) no-repeat 0 0; 
    display:block;
}
 
#slideshow-carousel li a {
    background:#000; 
    display:block; 
    width:206px; 
    height:95px;
}
 
 
#slideshow-carousel .active {
    filter:alpha(opacity=100); 
    -moz-opacity:1.0; 
    -khtml-opacity: 1.0; 
    opacity: 1.0;
}
 
#slideshow-carousel .faded {
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5;
}


4.Java Script

در مورد جاوااسکریپت و پلاگین jCarousel هیچ جای نگرانی وجود ندارد چرا که پایداری و حفظ ظاهر آن در موقعیت های مختلف به اثبات رسیده است . چیزی که ما برای سفارشی کردن بیشتر آن نیاز داریم ، تنظیماتی مانند سرعت ، جهت حرکت و تصاویر نمایشی است . برای تنظیمات بیشتر میتوانید به داکیومنت راهنمای jCarousel مراجعه نمایید . سایر کدها نیز به دستورات پایه jQuery و رویدادهایی مانند Click و hover برمیگردند که با کامنت هایی که جلوی آنها قرار داده ایم ، قابل درک هستند.

$(document).ready(function () {
         
    //jCarousel Plugin
    $('#carousel').jcarousel({
        vertical: true, //display vertical carousel
        scroll: 1,  //auto scroll
        auto: 2,    //the speed of scrolling
        wrap: 'last',   //go back to top when reach last item
        initCallback: mycarousel_initCallback   //extra called back function
    });
 
    //Front page Carousel - Initial Setup
    //set all the item to full opacity
    $('div#slideshow-carousel a img').css({'opacity': '0.5'});
     
    //readjust the first item to 50% opacity
    $('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
     
    //append the arrow to the first item
    $('div#slideshow-carousel li a:first').append('')
 
  
    //Add hover and click event to each of the item in the carousel
    $('div#slideshow-carousel li a').hover(
        function () {
             
            //check to make sure the item is not selected
            if (!$(this).has('span').length) {
                //reset all the item's opacity to 50%
                $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
                 
                //adust the current selected item to full opacity
                $(this).stop(true, true).children('img').css({'opacity': '1.0'});
            }       
        },
        function () {
                 
            //on mouse out, reset all the item back to 50% opacity
            $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
             
            //reactivate the selected item by loop through them and look for the one
            //that has the span arrow
            $('div#slideshow-carousel li a').each(function () {
                //found the span and reset the opacity back to full opacity
                if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});
 
            });
                 
        }
    ).click(function () {
 
        //remove the span.arrow
        $('span.arrow').remove();
         
        //append it to the current item        
        $(this).append('');
         
        //remove the active class from the slideshow main
        $('div#slideshow-main li').removeClass('active');
         
        //display the main image by appending active class to it.        
        $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');   
             
        return false;
    });
 
 
});
 
 
//Carousel Tweaking
function mycarousel_initCallback(carousel) {
     
    // Pause autoscrolling if the user moves with the cursor over the clip.
    // resume otherwise
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
}

از اینکه وقت گذاشتید و این آموزش را مطالعه کردید سپاسگذارم . امیدوارم مواردی که در این آموزش یا گرفتید مانند چگونگی استفاده از یک پلاگین جی کوئری ، سفارشی سازی و ساخت یک گالری منحصر بفرد به شما در پروژه هایتان کمک کرده باشد. میتوانید ایده ها ، نظرات ، سوالات و پیشنهادات خود را در بخش نظرات مورد مباحثه قرار دهید تا چیزهای بیشتری یاد بگیریم . این گالری تصاویر در برخی وب سایت هایی که طراحی کرده ام مورد استفاده قرار گرفته و از نظر عملی بدون مشکل بر روی مرورگرهای IE6, IE7, IE8, Firefox, Chrome, Safari و حتی iPhone Safari به درستی کار کرده است .

دانلود کد منبع کامل گالری تصویر(86.5kb)
پسورد فایل زیپ : www.websiteha.com

نظرات (12) -

  • عاطفه

    05/16/1390 07:35:44 ق.ظ | پاسخ به این نظر

    سلام.ببخشد من دقیقا کد هارو کپی کردم و هر کدومو عینن سر جای خودش قرار دادم و عکس ها را هم خودم جایگزین کردم.ولی اجرا نمیشه؟؟من jcarousel را توی جاوااسکریپت قرار دادم و فایل jquery هم گذاشتم ولی اجرا نیشه.میشه لطف کنید راهنمایی کنید؟ی دنیا ممنون

    • Admin

      05/16/1390 11:01:40 ق.ظ | پاسخ به این نظر

      سلام
      شما ابتدا سورس کد رو دانلود کنید. بعد از اینکه از حالت فشرده خارجش کردید، فایل index.html  رو از اجر کنید. نمونه کامل این گالری در کمال سلامت اجرا خواهد شد. سپس روی همین صفحه گالری در حال اجرا (index.html) راست کلیک کنید و view source رو بزنید تا سورس کد صفحه نشون داده بشه. بعد از بالای سورس ببینید که چطور ابتدا فایل کتابخانه جی کوئری به نام jquery-1.4.2.min.js به صفحه اضافه شده . بعد فایل جی کوئری مربوط به این گالری به نام jquery.jcarousel.pack.js  به صفحه اضافه شده . بعد فایل css مربوطه به نام jquery.jcarousel.css اضافه شده و بعد فایل skin.css . همچنین تکه کد جی کوئری و css که در این آموزش آمده ، بعد از اینکه فایل های نام برده شده به صفحه لینک شده، در بالای صفحه نوشته شده است.

      نکته: در معرفی فایل های نام برده شده مربوط به جی کوئری و css، دقت کنید که مسیر فایل های شما ممکن است متفاوت یا سورس کد نمونه باشد. همچنین به جای کپی کردن کدها در پروژتون، میتونید فایل های نام برده شده را عینا" از داخل سورس بردارید و در پروژه خودتون بزارید.


      در کل سورس کد نمونه که برای دانلود گذاشته شده است، بهترین راهنمای شماست. از روی آن عمل کنید و مجددا" اگر سئوالی بود در خدمتم.

  • fa

    09/08/1390 01:41:23 ب.ظ | پاسخ به این نظر

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

    • Admin

      09/08/1390 02:45:08 ب.ظ | پاسخ به این نظر

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

  • باسلام و تشکر، تکنیک خیلی جالبه، سوالی که دارم اینه که چطور میشه تصویر کوچیک و بزرگ هر دو باهم عوض بشن؟ چون دیفالتش اینه که شما با انتخاب تصویر کوچک، تصویر بزرگ رو فعال می کنی!

    بازم تشکر

    • Admin

      12/07/1390 10:54:22 ب.ظ | پاسخ به این نظر

      سلام بهنام جان
      منظورتون رو متجه نشدم! تصویر کوچیک با چی جابجا بشه؟

  • سلام
    تونستم حلش کنم، مرسی
    فقط آیا شما می دونید چطور میشه دو یا چند تکنیک jquery  رو چطور میشه تو یک صفحه استفاده کرد؟ خیلی کلنجار رفتم ولی نشد! اگر نمونه یا رفرنس عملی باشه خیلی ممنون میشم و دعات میکنم
    مرسی

  • مهران

    10/01/1393 02:03:56 ق.ظ | پاسخ به این نظر

    سلام ، من هر کاری کردم پسورد رو قبول نکرد ! ممنون میشم بررسی کنید یا فایل رو بدون پسورد ارسال کنید

  • alireza

    02/14/1394 10:22:13 ب.ظ | پاسخ به این نظر

    سلام با تشکر از زحمتتون jquery من ورژن 11 هست که این slideshow با این ورژن کار نمیکنه چکار باید بکنم؟
    ورژن بالاتر از 4 نیست که باهاش کا کنه؟

Loading