آموزش ساخت اسلایدر عکس با جی کوئری

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

توی این مقاله فقط نحوه استفاده رو میگم.

با سرچ کردن "free jquery image slide" توی گوگل، میتونید چندین سورس رایگان از این اسلایدر ها پیدا کنید.

من یه نمونه از این slider ها رو براتون به عنوان مثال اینجا میارم.

اگه فایل ضمیمه رو دانلود کنید، میبینید که یه index.html داره و دوتا پوشه. به نام های engine و data. توی پوشه engine که جی کوئری و سی اس اس لازم هست. و توی پوشه data هم عکس هایی که میخوایم نشون بده.

این دوتا پوشه رو به پروژتون اضافه کنید.  و فایل های jquery.js و style.css رو که در پوشه engine هست رو به هدر صفحه اضافه کنید.

  1. <link rel="stylesheet" type="text/css" href="engine/style.css" media="screen" />
  2. <script type="text/javascript" src="engine/jquery.js"></script>

و بعد این div رو جایی که میخواین slider باشه اضافه کنید.

  1. <div id="wowslider-container">
  2.     <div id="wowslider-images">
  3.         <a href="#"><img src="data/images/s3.jpg" alt="s3" title="توضیحات عکس اول" id="wows0" /></a>
  4.         <a href="#"><img src="data/images/s1.jpg" alt="s1" title="توضیحات عکس دوم" id="wows1" /></a>
  5.         <a href="#"><img src="data/images/s2.jpg" alt="s2" title="اینم توضیحات عکس سوم" id="wows2" /></a>
  6.     </div>
  7.     <div class="ws_bullets">
  8.         <a href="#wows0" title="s3"><img src="data/tooltips/s3.jpg" alt="s3" /></a>
  9.         <a href="#wows1" title="s1"><img src="data/tooltips/s1.jpg" alt="s1" /></a>
  10.         <a href="#wows2" title="s2"><img src="data/tooltips/s2.jpg" alt="s2" /></a>
  11.     </div>
  12. </div>

در div با آیدی wowslider-images باید آدرس عکس هاتون رو بذارید. و توی title تگ a میتونید یه متن رو بنویسید که زیر عکس نوشته بشه.

در div دیگه که کلاس ws_bullets رو داره باید عکس های کوچیکتون رو قرار بدین تا موقع نمایش به صورت تولتیپ نمایش داده بشن. البته این فقط مخصوص این اسلایدره و ممکنه توی اسلایدرای دیگه نباشه. توی همین اسلایدر هم اگه div با کلاس رو بردارین، ینی کد به صورت زیر بشه، دیگه تولتیپ نداریم.

  1. <div id="wowslider-container">
  2.     <div id="wowslider-images">
  3.         <a href="#"><img src="data/images/s3.jpg" alt="s3" title="توضیحات عکس اول" id="wows0" /></a>
  4.         <a href="#"><img src="data/images/s1.jpg" alt="s1" title="توضیحات عکس دوم" id="wows1" /></a>
  5.         <a href="#"><img src="data/images/s2.jpg" alt="s2" title="اینم توضیحات عکس سوم" id="wows2" /></a>
  6.     </div>
  7. </div>

و در خط آخر، بعد از این div جی کوئری slider رو فراخونی میکنیم.

  1. <script type="text/javascript" src="engine/script.js"></script>

حالا اگه سایز عکس هاتون یا... فرق داره، خودتون دیگه از توی css اسلایدر عوضش کنید.

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

دانلود اسلایدر عکس

/ 0 نظر / 283 بازدید