آموزش ساخت اسلایدشو به کمک JQuery

پنج شنبه, ۱۱ام اسفند , ۱۳۹۰ | ۱۷۲ دیدگاه

در این آموزش با مراحل ساخت یک اسلایدشو به کمک JQuery در خدمت شما عزیزان هستم . موتور اصلی این اسلاید شو پلاگین JQuery Cycle است که من به کمک آن یک اسلایدشو ساده با دکمه های کنترل به شما آموزش می دهم . پس در ادامه با مراحل آموزش با بنده همراه باشید

پیش نمایش : نمونه

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

۱٫ عکس زمینه

۲٫ دکمه های کنترل

۳٫ چند عکس برای اسلاید کردن

HTML :

در مرحل اول به یک سند HTML برای شروع کار نیاز داریم. بعد از ساختن صفحه ، به یک بلوک اصلی برای قرار دان اسلایدشو نیاز داریم . پس کد زیر رو به قسمت صفحه ساخته شده اضافه کنید.

<div id="slideshowContainer">

</div>

در مرحله بعد باید یک بلوک دیگه برای اضافه کردن عکس ها به اون بلوک که در مرحله قبل ساختیم اضافه کنیم . کدهای زیر را اضافه کنید :

<div class="slideshow">
    <img src="images/image1.png" alt="" width="600" height="300" />
    <img src="images/image2.png" alt="" width="600" height="300" />
    <img src="images/image3.png" alt="" width="600" height="300" />
    <img src="images/image4.png" alt="" width="600" height="300" />
    <img src="images/image5.png" alt="" width="600" height="300" />
</div>

پس تا اینجا باید کدهای شما مثل این باشه :

<div id="slideshowContainer">
<div class="slideshow">
        <img src="images/image1.png" alt="" width="600" height="300" />
        <img src="images/image2.png" alt="" width="600" height="300" />
        <img src="images/image3.png" alt="" width="600" height="300" />
        <img src="images/image4.png" alt="" width="600" height="300" />
        <img src="images/image5.png" alt="" width="600" height="300" />
</div>
</div>

خوب ، تو این مرحله باید دکمه های کنترلی رو اضافه کنیم . مثل کدهای زیر :

<div id="slideshowContainer">
<div class="slideshow">
         <img src="images/image1.png" alt="" width="600" height="300" />
         <img src="images/image2.png" alt="" width="600" height="300" />
         <img src="images/image3.png" alt="" width="600" height="300" />
         <img src="images/image4.png" alt="" width="600" height="300" />
         <img src="images/image5.png" alt="" width="600" height="300" />
</div>
<ul id="nav">
	<li id="prev"><a href="#">Previous</a></li>
	<li id="next"><a href="#">Next</a></li>
</ul>
</div>

JQuery :

خوب ، توی این مرحله نوبت میرسه به اضافه کردن جی کوئری . بدون اضافه کردن این قسمت فقط یه صفحه دارید که ۵ تا عکس به صورت ساده قرار گرفته.
پس کدهای زیر رو به قسمت Head صفحه اضافه کنید :

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

حالا برای اسلاید کردن تصاویر باید پلاگینی که نصب کردیم رو فراخوانی کنیم . کدهای زیر رو به قسمت Head پایین کدهای مرحله قبل اضافه کنید :

<script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
        fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'
        });
    });
</script>

توی این بخش می تونید هر طوری که خودتون دوست دارید تغییرات ایجاد کنید . مثل افکت ، ترتیب ،عرض ، ارتفاع و …
می تونید همه تنظیمات رو اینجا ببینید

CSS – قالب بندی اسلایدشو :

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

<style type="text/css">
* {
    margin:0px;
    padding:0px;
    border:0px;
}
body {
    background:url(images/background.jpg) repeat-x;
}

#slideshowContainer {
    width: 632px;
    margin: 100px auto 0 auto;
    position:relative;
}
.slideshow {
    height: 332px;
}
.slideshow img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
}
#nav {
    list-style-type:none;
    z-index:150;
}
#nav li a {
    display:block;
    width:58px;
    height:102px;
    text-indent:-9999px;
    outline:none;
}
#prev a {
    background:url(images/left.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    left:-70px;
}
#next a {
    background:url(images/right.png);
    width:58px;
    height:102px;
    position:absolute;
    top:120px;
    right:-70px;
}
#next a:hover {
    background:url(images/right_over.png);
}
#prev a:hover {
    background:url(images/left_over.png);
}
</style>

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

مجتبی موسوی

Be Sociable, Share!


۱۷۲ دیدگاه


  1. xz
    ۲ اردیبهشت ۱۳۹۱

    با سلام;
    چگونه می توان کامنت هایی که قبلا داده ایم را ببینیم.؟؟؟




  2. مجتبی
    ۲ اردیبهشت ۱۳۹۱

    XZ :
    منظورتون رو نفهمیدم !!




  3. محسن
    ۵ اردیبهشت ۱۳۹۱

    ممنون از راهنمائیتون.

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




  4. مجتبی
    ۶ اردیبهشت ۱۳۹۱

    نه محسن جان ، ابهامی نیست
    من اون دوتا آیتم رو که بعدن اضافه کردم رو لیست نکرده بودم .
    ولی الان درست شد




  5. محسن
    ۵ اردیبهشت ۱۳۹۱

    یه سوال دیگه هم داشتم.

    این اسلایدشو برای عوض کردن یا فیدکردن عکس، از یک حالت ساده و یکسان استفاده میکنه.
    بعضی از اسلایدشو ها، با افکتهای متنوعی، عکس هارو فید میکنن.
    چطور میتونیم برای این اسلایدشو، افکتهای متنوع فید شدنِ عکس ها رو پیاده سازی کنیم؟




  6. مجتبی
    ۶ اردیبهشت ۱۳۹۱

    در مورد افکت :
    توی آموزش چندبار توضیح دادم
    این سورس اصلی هست . خودتون می تونید تغییرات زیادی اعمال کنید و همچنین برای افکت می تونید مشخصه fx رو از توی کدهای جی کوئری تغییر بدید
    و برای تنظیمات بیشتر به اینجا برید




  7. محسن
    ۷ اردیبهشت ۱۳۹۱

    سپاس فراوان…

    اصلاً به اون صفحه تنظیمات دقت نکرده بدوم.

    دکمه pause / play رو طبق همون تغییراتی که گفته بودید، گذاشتم اما کار نمیکنه.



  8. […] the original post: آموزش ساخت اسلایدشو به کمک JQuery دانلود تصاویر لایه باز نماهنگ – Clipart Korea PSD 01 » […]




  9. مرتضی
    ۱۰ اردیبهشت ۱۳۹۱

    سلام ممنونم از بابت اموزشی که قرار دادید
    راستش من آشنایی جندانی باg اچ تی ام ال ندارمو همچنین سی اس اس و…
    آیا امکانش هست که قالب ویلاگ رو قرار بدم و شما اسلاید شو رو برام قرار بدید و من فقط لینک تصاویر مورد نظر خودمو رو قرار بدم؟
    آگه این کار رو بکنید یه دنیا ازتون ممنون میشم




  10. bahar
    ۱۶ اردیبهشت ۱۳۹۱

    واقعا از لطفتون ممنون.خیلی مفید بود.من هم اجرا گرفتم




  11. ghazaleh
    ۲۰ اردیبهشت ۱۳۹۱

    ببخشید میشه لینک دانلود jquery رو هم بذارید یا اینکه
    به امیلم ارسال بفرمایید؟
    با تشکر.
    arshad91shf@gmail.com




  12. احمدرضا
    ۲۱ اردیبهشت ۱۳۹۱

    سلام.

    ممون از آموزشتون.

    دوتا سوال داشتم.

    ۱- فرق این اسلایدر با مثلا اسلایدر nivo یا easySlider چیه؟ چه مزایا یا معایبی نسبت به همدیگه دارن؟

    ۲- من دارم یه سایت طراحی میکنم و از این اسلایدشو توش استفاده کردم؛ به این صورت که فرضاً ۵تا لینک داریک که روی هر لینکی که کلیک بشه، این اسلایدشو لود میشه هربار ۶-۷تا عکس رو اسلاید میکنه.
    یه مشکلی داره و اون اینکه وقتی چندبار روی لینکهای مخنلف کلیک میشه، اسلایدر قاطی میکنه و بین هر عکسی با عکس بعدیش، فضای خالی نشون میده و بعد از چند ثتنیه تازه عکس بعدی رو اسلاید میکنه.




  13. زهرا
    ۲۹ اردیبهشت ۱۳۹۱

    واقعا ممنونم از این آموزش عالی که گذاشتید.من که با این آموزشای عالی دعاگوی شما هستم.




  14. علی
    ۴ خرداد ۱۳۹۱

    سلام
    عالی بود ممنون .




  15. مسعود
    ۹ خرداد ۱۳۹۱

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

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




  16. مجتبی
    ۹ خرداد ۱۳۹۱

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




  17. سرگرمی
    ۲۱ خرداد ۱۳۹۱

    کاش شمارنده هم داشت خیلی احتیاج دارم




  18. مجتبی
    ۲۱ خرداد ۱۳۹۱

    این اسلایدشو خیلی ساده است ، و فقط جنبه آموزشی داره
    اگه می خواید توی وبسایتتون استفاده کنید پیشنهاد می کنم از پلاگین هایی شبیه Nivo Slider و Easy Slider استفاده کنید که هم امکانات بیشتری داره و هم بروزتره و انعطاف پذیز تر !




  19. newbie
    ۲۲ خرداد ۱۳۹۱

    سلام سایته فوق العاده ای دارید ولی چرا دیر به دیر آپ میشه؟؟ماشالا این همه بازدید بازم دیر به دیر آپ میشه..




  20. moji irani
    ۳۰ خرداد ۱۳۹۱

    آقا دستت درد نکنه,,,,,,,,,,ایول




  21. نگار
    ۲ تیر ۱۳۹۱

    سلام برای من عکس هارو پشت سر هم گذاشت ؟
    مشکل از چیه ؟
    عکس ها رو پشت هم به صورت عمودی گذاشته !!!




  22. علی
    ۶ تیر ۱۳۹۱

    سلام…چطور میشه کاری کرد که عکس ها تا وقتی که خودمون نزدیم بعدی یا قبلی عوض نشه؟




  23. مجتبی
    ۶ تیر ۱۳۹۱

    سلام دوست عزیز
    این افزونه همچین قابلیتی رو نداره
    ولی میشه وقتی موس رو روی اسلایدشو ببری stop بشه
    یه پست دیگه با همین موضوع هست که توی اون یه اسلایدشو حرفه ای تر معرفی کردم
    اگه بخواید با اون میشه این کارو کرد




  24. hoseini
    ۱۲ تیر ۱۳۹۱

    سلام
    خیلی ممنون از این آموزش عالی
    موفق و پیروز باشید




  25. A.S
    ۱۴ تیر ۱۳۹۱

    سلام . دستتون درد نکنه . عالی بود 🙂




  26. fatima
    ۱۸ تیر ۱۳۹۱

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




  27. مهیار
    ۲۴ تیر ۱۳۹۱

    عالی بود
    عالی




  28. وحید
    ۳ مرداد ۱۳۹۱

    من از این کد تو سایتم استفاده کردم و بخوبی کار میکنه. فقط مشکلی که هست اینه که من ۴ تا تصویر بهش آدرس دادم از دیتابیس بخونه ولی همیشه یه دونه خالی هم نشون میده. یعنی ۵ تا عکس که یکیش فقط یه فریم خالیه. ممنون میشم سایتم رو بررسی کنید در این مورد
    damatajhiz.com




  29. مجتبی
    ۴ مرداد ۱۳۹۱

    من آدرسی که دادید رو دیدم ، ولی کلا ۳ تا آیتم واسه اسلاید تعریف کردید + ۱ فریم خالی
    اولا که اگه می خواید اسلاید به صورت Random کار بکنه جلوی عبارت random در کدهای فراخوانی اسکریپت به جای عدد ۱ کلمه true رو بزارید
    دوما نحوه جنریت کردن عکس ها رو هم چک کنید
    موفق باشید




  30. وحید
    ۴ مرداد ۱۳۹۱

    مجتبی جان مشکل منم همون یه فریم خالیه که نمیدونم از کجا پیداش شده! برای فراخوانی عکسها هم از کد زیر استفاده میکنم:
    query(“SELECT `img`,`des`,`url` FROM `ads` WHERE `section` = 0 AND `status` = 1”);
    while($row = $result->fetch(PDO::FETCH_ASSOC)){
    $rtn .= “\t \n”;
    $rtn .= “\t \n”;
    $rtn .= “\t \t \n”;
    $rtn .= “\t
    \n”;
    $rtn .= “\t \n”;
    }
    echo $rtn;
    ?>




  31. مجتبی
    ۴ مرداد ۱۳۹۱

    مشکل اول که گفتم برطرف کردید ؟
    واسه این سایت از چه سیستمی استفاده می کنید ؟




  32. وحید
    ۴ مرداد ۱۳۹۱

    از صفر خودمون نوشتیمش!



  33. […] در این آموزش با مراحل ساخت یک اسلایدشو به کمک JQuery در خدمت شما عزیزان هستم . موتور اصلی این اسلاید شو پلاگین JQuery Cycle است که من به کمک آن یک اسلایدشو ساده با دکمه های کنترل به شما آموزش می دهم . پس در ادامه با مراحل آموزش با بنده همراه باشید پیش نمایش : نمونه برای این آموزش من از چند عکس استفاد کردم که می تونیدادامه مطلب […]



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