ساخت ِ یک نمایش اسلایدی ساده به‌وسیله‌ی جی‌کوئری

نمایش اسلایدی یا همان SlideShow، برای نمایش تصاویر، به‌صورت متحرک و پشت ِ سرهم به‌کار می‌رود. احتمالا نمونه‌هایی‌ از نمایش اسلایدی را در سایت‌های مختلف مشاهده کرده‌اید.

به روش‌های مختلف می‌شود نمایش اسلایدی ساخت، اما جی‌کوئری کارمان را در این مورد بسیار آسان و حجم کدمان را مقادیری کم‌تر کرده است. در ادامه، روش ِ ایجاد ِ نمایش اسلایدی‌ای که ایشان ساخته‌اند را باهم مرور می‌کنیم ببینیم چه می‌شود :)

jquery slideshow

لازم هم نیست که بگویم کتاب‌خانه‌ی جی‌کوئری را ابتدا از این‌جا بگیرید و اگر نشد، می‌توانید آن را از این‌جا بگیرید؟

کدهای اچ‌تی‌ام‌ال ِ زیر را می‌نویسم:

<div id="slideshow">
    <img src="01.jpg" alt="Slideshow Image 1" class="active" />
    <img src="02.jpg" alt="Slideshow Image 2" />
    <img src="03.jpg" alt="Slideshow Image 2" />
</div>

نکته: حتما باید کلاس ِ اولین تصویر، active باشد.

دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه می‌کنیم و آن را خوب هَم می‌زنیم :دی

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}

خب، حالا یک فانکشن با نام ِ slideswitch تعریف می‌کنیم و کدهای مربوط به افکت ِ نمایش اسلایدی‌مان را در آن می‌نویسیم:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

مدت‌زمان توقف هرعکس بسته به مقداری‌ست که به setInterval() می‌دهید (خط ۱۹). الان روی ۵۰۰۰ یعنی ۵ ثانیه می‌باشد که باتوجه به نیاز خود می‌توانید آن را تغییر دهید.

حالا بفرمایید این‌جا و نتیجه را مشاهده کنید و این نمونه را کامل دریافت کنید:

download-zips

دیدگاه‌ها (۲۴)

  • آ … عرض کنم که اونطور که فهمیدم همه ی عکس ها همون اول لود می شن بعد یکی یکی زد ایندکس شون تغییر می کنه و نشون داده میشن . حالا اگه تعداد عکس ها زیاد باشه روی سرعت احتمالن اثر میزاره .
    خوب حالا راهی هست که ابتدا یک تصویر لود بشه و بعد در بازه های مشخص شده آدرس جدیدی جایگزین قبلی بشه و تصویر جدید لود بشه . آیا این میشه و اگه بشه تاثیری در بهتر شدن سرعت کار داره یا نه ؟ مرسی

    پاسخ

  • @محسن
    بله دقیقا همین‌طوره / تا به حال من هر اسلایدشوای که دیدم کارشون به همین صورت هست که همون ابتدا عکس‌ها رو لود می‌کنن. البته این حالتی که شما فرمودین هم به نظر امکان پذیره اما فکر کنم فرقی نداشته باشه و حتی سرعت کار پایین‌تر هم بیاد چون حتما یک دور نمایش باید صورت بگیره تا همه‌ی عکس‌ها لود بشن.

    پاسخ

  • به به … عجب عکس های خوشگلی :دی اینا رو هم رو اسلاید می دن؟!!! :D

    پاسخ

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

    پاسخ

  • عالی بود.
    امکانش هست یاد بدید چی جوری مثل شما وقتی کد اچ تی ام ال یا پی اچ پی می زاریم اینجوری شماره خط ها هم بیاد کنارش …؟

    پاسخ

  • خیلی جالبه . مرسی فقط اگه لطف کنید و بگید چطور میشه به هر عکس یه لینک جداگانه داد ممنون میشم.
    چشم به راه جوابتان می مانم.

    پاسخ

  • @حدیث
    برای این‌کار پلاگین های مختلف هست که من از سینتکس های‌لایتر استفاده می‌کنم. برید این‌جا: http://alexgorbatchev.com/wiki/SyntaxHighlighter

    @رضا
    خواهش می‌کنم. اگر منظورتون این هست که خود عکس لینک بشه، کافیه هر عکس رو داخل تگ a بگذارید. اما اگر می‌خواهید مثلا زیر هر عکس یک لینک یا یک متن به عنوان توضیح بیاد، مثال زیر رو دریافت کنید، نمونه‌ی دومش در این مورد به شما کمک می‌کنه: http://jonraasch.com/downloads/simple-jquery-slideshow.zip

    پاسخ

  • عالی بود علیرضا جان !

    پاسخ

  • علیرضا جان کاش برای استفاده از تگ a یک مثال بزنید چون من زمانی که از این تگ استفاده میکنم و بیشتر از ۲ تصویر در اسلاید دارم ، تصویر آخر به صورت بی موقع و بر روی بقیه اسلید ها نمایش داده میشه.
    از راهنمایی های پی در پی تون هم ممنون.

    پاسخ

  • ایول داداش.
    چــــــــــــاکــــــــرتــــــــــــــــیـــــــــــــم!!!!!!!!!

    پاسخ

  • بسیار متشکر. فقط ایکاش از PHP هم سر درمیاوردم!

    پاسخ

  • با درود به دوست عزیز
    یه سوال از خدمتتان داشتم:من تازگیا ویندوز سیستمم را عوض کردم و از اون زمان سیستمم دی وی دی رو play نمیکنه و چنین پیغامی رو میدهد dvd decoder does not exist .
    به نظرتون مشکل از کجاست؟؟

    پاسخ

  • بابا ای ول !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    پاسخ

  • @solmaz

    نسخه ی اصلی دیدگاه توسط solmazبا درود به دوست عزیز
    یه سوال از خدمتتان داشتم:من تازگیا ویندوز سیستمم را عوض کردم و از اون زمان سیستمم دی وی دی رو play نمیکنه و چنین پیغامی رو میدهد dvd decoder does not exist .
    به نظرتون مشکل از کجاست؟؟

    جسارت به کار بزرگاس ولی
    پاور دیو دی یا کدک دیوی نصب کنید درست میشه
    اینم یه نرم افزار کدک http://www.free-codecs.com/K_lite_codec_pack_download.htm
    البته خودمم میدونم جای پرسیدن و جواب دادن این سوال اینجا نبودا

    پاسخ

  • امشب با این سایت آشنا شدم
    خیلی عالیه
    مخصوصا همین پست که کلیم دنبالش بودم
    خسته نباشید و مرسی.

    پاسخ

  • اگه یه کم دستکاری بشه سایدبار اضافه بشه فکر کنم ازش یه قالب فتوبلاگ قشنگ دربیاد… مرسی ،قشنگ بود :)

    پاسخ

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

    پاسخ

  • سلام، واقعا این مطلب و سایز مطالب شما خیلی ریز بینانه و خاص است، خدا قوت.
    راستی اگه بخوایم برای هر تصویر یک شماره اختصاص بدیم که کاربر با کلیک روی اون به تصویر مورد نظر روی اسلاید هدایت بشه امکانش هست؟
    آیا میشه این تصاویر که در حال نمایش هستند بصورت لینک در بیان؟

    پاسخ

  • خوب بود
    خوشم اومد

    پاسخ

  • سلام
    بسیار ممنون از زحماتتون
    من یه اسلاید شو شبیه این http://up.iranblog.com/Files7/4b2369d70f7b41cbaa76.jpg میخوام (ورد پرسم) البته افزونش هست ولی تو ابزارک نمیاره من میخوام تو ابزارک استفاده کنم

    پاسخ

    جستجو کن رفیق؛ کمکی نمی‌تونم بکنم.

    پاسخ

  • من هنوز منتظر جوابمـــــــا…

    پاسخ

  • سلام
    این که نمونه برای دانلود میزاری خیلی‌ عالیه دستت درد نکنه

    پاسخ

دیدگاه خود را ارسال کنید


می‌توانید از برخی کدهای HTML استفاده نمایید:


<a> <b> <blockquote> <i> <em> <pre> <code> <strong>