آموزش ساخت اسلایدشو به کمک 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. […] more here: آموزش ساخت اسلایدشو به کمک JQuery Be the first to like. Like […]




  2. ماهان
    ۱۱ اسفند ۱۳۹۰

    خیلی ممنون، عالی بود 😡




  3. Goback
    ۱۲ اسفند ۱۳۹۰

    به نظر من وقتی میشه با دو خط یه اسلایدشو نوشت با جی کوئری دیگه سنگین کردن صفحه با این پلاگینا بی مورده.
    فکر کنید،یکی میاد جی کوئری+یه پلاگین اسلایدشو+یه پلاگین اعتبارسنجی+… میذاره تو صفحه!!




  4. مجتبی
    ۱۲ اسفند ۱۳۹۰

    Goback : ببینید دوست عزیز ، هسته اصلی جی کوئری که واسه هر پروسه ای باید باشه و هر چه قدر کدنویسی حرفه ای تر بشه صد در صد تاثیر داره .
    در ضمن من از اون اسلایدشو دو خطی شما نیز استقبال می کنم !!!




  5. sina
    ۱۳ اسفند ۱۳۹۰

    سلام
    نمونه نهایی رو هم در یک صفحه وب میذاشتی ببینیم بد نبود
    اگر ممکنه چند تا مطلب در مورد کانتنت اسلایدر ها هم بذار
    باکس هایی که هم شامل محتوای HTMLو هم تصاویر هستند




  6. مجتبی
    ۱۳ اسفند ۱۳۹۰

    به زودی دمو این اسلایدشو رو می زارم
    در مورد کانتنت : بله حتما Content Slideshow هم می زارم




  7. محسن
    ۱۴ اسفند ۱۳۹۰

    سلام.

    توضیحات خیلی خوب و واضح بود.

    مرسی.

    یه سوال: عکس هایی که برای اسلایدشو استفاده میکنیم، حتماً باید یک اندازه باشن؟ یا اینکه میتونیم از عکسها در سایزهای مختلف استفاده کنیم؟

    در مورد نحوه استفاده از پلاگین های جی-کوئری باز هم مطلب بذاریید.
    مثل همین کانتنت اسلایدر که گفتن، یا اسلایدشوهایی که کمی پیچیده تر هستن.
    یا پلاگین هایی که برای زیباسازی فرم ها استفاده میشه…




  8. مجتبی
    ۱۴ اسفند ۱۳۹۰

    ممنون دوست عزیز ، خواهش می کنم
    اگه اندازه عکس از ۳۰۰*۶۰۰ کوچکتر باشه بقیه فضا خالی می مونه ولی اگه بزرگتر باشه فقط به اندازه لازم نشون داده می شه
    آموزش های حرفه ای Jquery رو هم میزارم . منتظر پست های بعدی باشید




  9. zhaleh
    ۱۴ اسفند ۱۳۹۰

    سلام تشکر از آموزشتون
    ولی اسلاید شویی که ساختید افکت خاصی نداره!!!!!!!!!!!




  10. مجتبی
    ۱۴ اسفند ۱۳۹۰

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




  11. صابر
    ۲۳ اسفند ۱۳۹۰

    بسیار بسیار عالی بود
    خدا خیرتان بدهد




  12. احسان
    ۲۴ اسفند ۱۳۹۰

    سلام
    حاجی تو رو خدا آموزش جزکوئری در ۱۵ روز رو به یه سرانجامی برسون

    ممنون




  13. hooman
    ۲۴ اسفند ۱۳۹۰

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




  14. مجتبی
    ۲۴ اسفند ۱۳۹۰

    خواهش میکنم ،
    اگه سابسکرایب شده باشید جدیدترین پست ها بهتون ایمیل میشه
    در مورد کلیدهای عقب و جلو کردن اسلایدشو : با تغییر دادن استایل میشه این کارو انجام داد
    اون کلید ها رو می تونید با مشخصه های Top , Bottom , Right , Left کنترل کنید
    مثلا اگه می خواهید دقیقا روی اسلاید باشه واسه کلید سمت چپ left:0px; و برای کلید سمت راست right:0px; رو قرار بدید
    اگه باز سوالی بود مطرح کنید جواب می دم




  15. محسن
    ۱ فروردین ۱۳۹۱

    سلام.

    من دارم یه وبسایت طراحی میکنم.

    دز زمینه CSS مشکل خاصی ندارم.

    اما در زمینه jQyery مشکل دارم.

    البته آشنایی اولیه دارم.

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

    اما مشکل اینجاست که وقتی این پلاگین هارو دانلود میکنم، نمیدونم باید چطوری برای پروژه خودم کاستومایزشون کنم.

    یعنی کدهای CSS/jQuery مختلفی داره و هرچقدر با کدها بازی میکنم یا استایلها بهم میخوره یا خود اسلایدر از کار میفته.

    پلاگین هایی که دانلود کردم، easy-slider و nivo هستن.

    احساس خنگی میکنم…




  16. مجتبی
    ۲ فروردین ۱۳۹۱

    سلام ، موفق باشید
    شما اون پلاگین هایی که می خوای استفاده کنید رو اعمال کنید و مطمئن بشید که درست کار می کنه.
    دیگه لازم نیست کدهای JQuery رو Edit کنید چون پلاگین هایی مثل Nivo و … خیلی ساده اند .
    شما فقط باید فایل های استایل پلاگین ها رو اونطوری که دوست دارید تغییر بدید .
    سوالی بود در خدمتم …




  17. محسن
    ۲ فروردین ۱۳۹۱

    خوب دقیقاً مشکل من همین جاست.

    ببینید مثلا عکسهای eadySlider به صورت لینکه.

    من میرم اون لینکهارو حذف میکنم، کل اسلایدر بهم میریزه.

    ضمن اینکه nivo فایلهای های زیادی داره و چند تا فایل CSS داره … نمیدونم کدوم به کدومه!




  18. مجتبی
    ۲ فروردین ۱۳۹۱

    در مورد Easy Slider :
    اگه وقتی لینک ها رو حذف می کنید به هم میریزه ، حذف نکنید ، به جای آدرس لینک # بزارید

    در مورد Nivo Slider :
    شما باید دو تا فایل استایل رو ویرایش کنید .
    ۱ nivo-slider.css
    ۲ هم بستگی به تم داره که اگه پیشفرض خود پلاگین باشه باید default.css رو ویرایش کنید




  19. روح الله
    ۶ فروردین ۱۳۹۱

    خودش خود بخود۵مطلب آخر رابه صورت اسلاید نشون نمیده؟




  20. مجتبی
    ۷ فروردین ۱۳۹۱

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




  21. omid
    ۷ فروردین ۱۳۹۱

    سلام
    من دقیقا همه اینارو که گذاشتین کپی کردم
    دستورات اعمال میشه ولی هیچ عکسی لود نمیشه؟
    علت چیه؟




  22. مجتبی
    ۷ فروردین ۱۳۹۱

    اگه درست انجام داده باشید باید کا بکنه . مثل دمو
    کد ها رو بررسی کنید اگه نشد بفرستید کدها رو تا ببینم مشکلش چیه




  23. Hadi
    ۱۳ فروردین ۱۳۹۱

    به جان مادرم کار نمیکنه این چندمین باریه که این جوری شده – مو به مو نوشتمش اما مثل همیشه نشد که نشد.دلیل چیه آخه؟؟؟




  24. مجتبی
    ۱۳ فروردین ۱۳۹۱

    ببین هادی جان :
    شما می تونی یه کاری بکنی
    دمو رو باز کن ، وقتی کامل لود شد ، Ctrl + U رو بزن
    هر چی کد توی صفحه است کپی کن توی Notepad و فایل رو به اسم index.html ذخیره کن
    حتما درست میشه
    بعد هر طور دوست داشتی Edit کن




  25. تك سيستم
    ۱۳ فروردین ۱۳۹۱

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




  26. مجتبی
    ۱۳ فروردین ۱۳۹۱

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




  27. محسن
    ۱۶ فروردین ۱۳۹۱

    سلام.

    من باز هم نتونستم برای پروژم اسلایدر کار بذارم.

    امکانش هست سورس هارو براتون ایمیل کنم و شما یه اسلایدر کار بذارین ؟

    میخوام ببینم واقعا ایراد کارم تو کجاس وگرنه میدادم کسی برام این کارو میکرد.

    ولی میخوام یکبار برای همیشه واقعا بفهمم چجوری باید این کارو کرد.




  28. danial
    ۲۰ فروردین ۱۳۹۱

    mer3000000000000000000000000000000000000
    dadash dmt hal daddi
    vaghean ali bood kheyli vaght bood dombale ye ham chin chizi migasham




  29. danial
    ۲۰ فروردین ۱۳۹۱

    فقط یه سوال برای آوردن دکمه ها رو اسلید شو باید کد های left:0px; و right رو کجا وارد کنیم؟




  30. مجتبی
    ۲۰ فروردین ۱۳۹۱

    Danial : خواهش می کنم




  31. مجتبی
    ۲۰ فروردین ۱۳۹۱

    Danial :
    باید توی کد های استایل قسمت مربوط رو پیدا کنی . مثلا واسه کلید سمت چپ #prev a و واسه کلید سمت راست #next a




  32. محسن
    ۲۹ فروردین ۱۳۹۱

    سلام.

    من یه فرم ساده “تماس با ما” طراحی کردم.

    میخوام با استفاده از jQuery این فرم رو validation کنم.

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

    ممنون میشم راهنمایی کنید.




  33. shima
    ۳۰ فروردین ۱۳۹۱

    slm khaste nabashid torokhoda be man komak konid man mikham veb site tarahikonam htmlo css ro midonam daram jquery ham yad migiram vali nemidonam chetor va az koja shoro ba tarahi konam age komakam kond mamnoon misham.merc




  34. elnaz
    ۲ اردیبهشت ۱۳۹۱

    ممنون…خیلی عالی بود




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

    سلام.

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

    ۱- من میخوام برای این اسلایدشو، دکمه pause / play بذارم که کاربر روی هر عکسی که خواست، بتونه اسلایدشو رو نگه داره و دوباره پلی کنه.
    چطور میشه این کارو کرد؟

    ۲- میشه کاری کرد که کاربر نتونه عکسهای اسلایدشو رو توی سیستمش ذخیره کنه؟
    اگر جواب مثبته، چطور میشه این کارو کرد؟




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

    محسن :
    ۱-این اسلایدشو یکی از کامل ترین پلاگین های موجود برای اسلایدشو هست . برای این که قابلیت Play و Stop رو اضافه کنید مراحل زیر رو انجام بدید :
    کد زیر رو :

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

    به این کد :

    <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>
    <ul>
    <li id="play"><a href="#">Play</a></li>
    <li id="pause"><a href="#">Pause</a></li>
    </ul>
    </div>
    

    تغییر بدید
    در مرحله بعد کد زیر رو :

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

    به این کد تغییر بدید :

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

    خوب ، با این کار ما دوتا لینک به اسلایدشو اضافه کردیم . یکی واسه Stopکردن و یکی واسه Play کردن
    امیدوارم نتیجه بگیرید

    ۲-سوال دوم یه ترفند محسوب میشه که روش های زیادی داره و اینجا نمی تونم توضیح بدم



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