ساخت اسلایدر واکنشگرا و لمسی چند کاره

‏  6 دقیقه
۲۵ شهریور ۱۳۹۳
ساخت اسلایدر واکنشگرا و لمسی چند کاره

در این آموزش قصد دارم شما رو با اسلایدری آشنا کنم که به صورت lightbox عمل میکنه و دیگه مشکل واکنشگرا بودن رو نداره و از همه مهم‌تر قابلیت لمسی بودن اون است که اون رو از دیگر اسلایدر‌ها متمایز میکنه .

از قابلت‌های این اسلایدر :

  • واکنشگرا بودن
  • لمسی بودن
  • دارای افکت‌های زیبا
  • پشتیبانی از Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone , ...
  • قابلیت قرار دادن ویدئو
  • قابلیت نوشت عنوان و شرح تصاویر
  • قابلیت شخصی سازی بسیار سریع و آسان
  • بسیار سبک
  • پشتیبانی از تصاویر بند انگشتی
  • تصاویر جداگانه برای دستگاه‌های موبایل
  • کنترل اسلایدر به وسیله کیبرد
  • پشتیبانی از فونت آیکون
  • و ...

خوب دمو رو هم ببینید تا بریم سراغ کد هاش :

فهرست محتوای این مقاله

قدم اول : فراخوانی کد‌های اسلایدر

بعد از دانلود فایل‌ها کد‌های زیر رو به بخش  <head> سایتتون اضافه کنید :

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.min.js"></script>
نکته :

 اگر قبلا کتاب خانه jQuery رو اضافه کردید خط 2 کدهای بالا رو به کلی حذف کنید .

قدم دوم : اضافه کردن کد‌های HTML

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

<ul id="yourGallery">
<li data-src="img/img1.jpg" data-title="7learn.com" data-desc="the best web designer" data-responsive-src="img/mobile5.jpg">
<img src="img/thumb1.jpg" />
</li>
<li data-src="img/img2.jpg" data-title="7learn.com" data-desc="the best web designer" data-responsive-src="img/mobile5.jpg">
<img src="img/thumb2.jpg" />
</li>
</ul>

توضیحات :

  • در خط 1 و در بخش id اسم مورد نظر خودتون رو قرار بدید .
  • در بخش data-src (خط‌های 2 و 5) باید آدرس عکس کامل ( full image url) رو قرار بدید .
  • در قسمت img و بخش src باید آدرس عکس کوچک شده از اندازه واقعی رو (thumb url) قرار بدید. این تصویری هست که قرار در صفحه به نمایش در بیاید و با کلیک بر رو این تصویر ، تصویر اصلی با اندازه کامل نمایان خواهد شد.
  • بخش های data-title و data-desc برای اضافه کردن عنوان و توضیحات هستند.
  • در بخش data-responsive-src هم اگر از تصویر نسخه ای برای موبایل دارید آدرس آن را قرار دهید و اگر نه این قسمت را حذف کنید .

قدم سوم : تنظیمات اسلایدر

در این مرحله ما با استفاده از کد زیر باید اسلایدر خودمون رو به کد‌های jQuery اسلایدر بشناسونیم :

<script type="text/javascript">
$(document).ready(function() {
$("#yourGallery").lightGallery(); 
 caption:true,
 desc:true,
 mobileSrc:true,
 hideControlOnEnd:true,
 easing:'cubic-bezier(0.25, 0, 0.25, 1)'
});
</script>
یاداوری :

در کد بالا و در خط 4 باید به جای yourGallery#  اسمی (id) رو که در مرحله قبل برای اسلایدرتون انتخاب کردید رو بنویسید . یعنی اگر اسم اسلایدرتون رو 7learn انتخاب کردید باید در کد‌های بالا 7learn# رو بنویسید.

با استفاده از کد بالا شما از تنظیمات پیشفرض اسلایدر استفاده کردید. ولی اگر می‌خواهید که اسلایدر را سفارشی کنید از کد زیر به جای بالای استفاده کنید و id رو هم باید مثل کد بالا در خط 3 وارد کنید :

<script type="text/javascript">
$(document).ready(function() {
$("#lightGallery").lightGallery({
// Elements
thumbnail : true, // Whether to display a button to show thumbnails.
caption : false, // Enables image captions. Content is taken from "data-title" attribute.
captionLink : false, // Makes image caption a link. URL is taken from "data-link" attribute.
desc : false, // Enables image descriptions. Description is taken from "data-desc" attr.
counter : false, // Shows total number of images and index number of current image.
controls : true, // Whether to display prev/next buttons.

//preload

preload : 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...

// Transitions
mode : 'slide', // Type of transition between images. Either 'slide' or 'fade'.
useCSS : true, // Whether to always use jQuery animation for transitions or as a fallback.
easing : 'linear', // Value for CSS "transition-timing-function" prop. and jQuery .animate().
speed : 1000, // Transition duration (in ms).

// Navigation
hideControlOnEnd : false, // If true, prev/next button will be hidden on first/last image.
loop : false, // Allows to go to the other end of the gallery at first/last img.
auto : false, // Enables slideshow mode.
pause : 4000, // Delay (in ms) between transitions in slideshow mode.
escKey : true, // Whether lightGallery should be closed when user presses "Esc".

// Mobile devices
mobileSrc : false, // If "data-responsive-src" attr. should be used for mobiles.
mobileSrcMaxWidth : 640, // Max screen resolution for alternative images to be loaded for.
swipeThreshold : 50, // How far user must swipe for the next/prev image (in px).

// Video
vimeoColor : 'CCCCCC', // Vimeo video player theme color (hex color code).
videoAutoplay : true, // Set to false to disable video autoplay option.
videoMaxWidth : 855, // Limits video maximal width (in px).

// i18n
lang : { allPhotos: 'All photos' }, // Text of labels.

// Callbacks
onOpen : function() {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function() {}, // Executes immediately before each transition.
onSlideAfter : function() {}, // Executes immediately after each transition.
onSlideNext : function() {}, // Executes immediately before each "Next" transition.
onSlidePrev : function() {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function() {}, // Executes immediately before the start of the close process.
onCloseAfter : function() {}, // Executes immediately once lightGallery is closed.

// Dynamical load
dynamic : false, // Set to true to build a gallery based on the data from "dynamicEl" opt.
dynamicEl : [], // Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.

// Misc
rel : false, // Combines containers with the same "data-rel" attr. into 1 gallery.
exThumbImage : false, // Name of a "data-" attribute containing the paths to thumbnails.
});
});
</script>
یاداوری :

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

از اسلایدر لذت ببرید ... 🙂

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

 

چه امتیازی به این مقاله می دید؟
نویسنده -
-
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

Agahi90.iR

بسیار عالی و مفید بود سپاسگزار

امیر حسین

عزیز لینک ها خرابن همشون

shima a

راستی من فکر میکردم ایمیل جزو اطلاعاتیه منتشر نمیشه نگو همه میبینن گرچه نام من در پروفایل ایمیلم هم شیماست و موردی نداره که کسی اسمش نام ایمیلش باشه 😆 اینم گذاشتم 😀 باز کسی فکر نکنه 😀 ما لحن بدی داریم 😀 نادون (بی خبر) 😀 از همه جا 😀

وحید صالحی

آقا عرفان ایمیل شما کاملا خصوصی هست و فقط مدیران سایت میتونن ببیننش نه همه باز پیش پیش قضاوت کردید دلیل اینکه اسم مستعارتون رو هم شیما گذاشتین به خودتون مربوطه…

shima a

آقا ما به خودمون گفتیم شما چرا ناراحت میشی؟! 😐
شما سوال مارو درست متوجه نشدی برادر من. منم دوباره توضیح دادم گفتم بجا img ,ویدئو بذارم نه اینکه برای ویدئو تگ img بذارم!!
من که ناراحت نشدم والا 😀 ولی شما انگار ناراحت شدید! ❓
خو من اگه بلد بودم کجاشو آزمون خطا کنم که از نویسنده مطلب نمیپرسیدم راستی چرا نویسنده مطلب پاسخ نداده.
من روی یه اسلایدشو به جای تگ img تگ video گذاشتم (وحید خان شما دقت کن اگه میخای پاسخ منو بدی برادر) اما درست نشد چون قسمتی از کد توی فایل jquery ساخته میشد که من ازش سر در نمی اوردم از این رو از نویسنده مطلب خاستم تغییرات لازم روی این اسلاید شو رو بمن بگه. اگرم حوصله ندارید که هیچی بی خیال
ضمنا من جستجوهامو کردم با نمایش ویدئو تو html ناآشنا نیستم چون بجایی نرسیدم اومدم اینجا که اونم هیچی

وحید صالحی

نه عرفان خان اینجا کسی ناراحت نمیشه اگر هم حوصله نداشتیم اصلا پاسخ نمیدادیم به هر حال من پاسخ شما رو دادم و خیلی هم واضح هست ولی اینکه متوجه نشدید بهتره بصورت اصولی و از پایه مباحث html و جی کوئری رو یاد بگیرید
موفق باشید…

shima a

اگه بخوام بجای عکس فیلم نمایش داده بشه توی کد html به جای تگ img ویدئو بذارم درست میشه یا تغییرات دیگه هم باید بدم؟

سید صالح

سلام ، من گشتم یه چیزایی پیداکردم فکر کنم به کارت بیاد
برو تو این
http://sachinchoolur.github.io/lightGallery/examples.html
صفحه تو قسمت Local HTML5 videos
خودش کامل توضیحات رو با مثل گفته

shima arabi

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

وحید صالحی

سلام باید از تگ video در html5 استفاده کنید برای توضیحات بیشتر عبارت تگ نمایش ویدئو در html رو گوگل کنید

shima a

منظورم توی این اسلایدره. این طور که توضیح دادن این اسلایدر قابلیت نمایش ویدئو رو داره.
توی توضیحات اسلایدر جاری یه قطعه کد html بود که توش تگ img قرار داشت منظور سوال من اینه که آیا باید بجای اون تگ video بذارم؟
اصلا بطور کلی ما نادون به این اسلایدر، شما بگید چه تغییری باید در کدای این اسلایدر بدم تا بتونم باهاش چند تا ویدئو رو اسلاید کنم؟

سید صالح

من هم آزمایش کردم ، نشد این کار
فکر کنم باید تگ data-src تغییر کنه ، اما نمیدونم چه تغییری
لطفا یکی از دوستان راهنمایی کنه
ممنون از نویسنده و آقا وحید که راهنمایی میکنن به ما

وحید صالحی

خانم شیما یا آقای عرفان خان کسی به شما اهانت نکرد و نادون نگفت که با این لحن کامنت میزارید شما پرسیدی برای نمایش ویدئو بجای عکس میشه از تگ img استفاده کرد بنده هم گفتم نه باید از تگ video و doctype html5 استفاده کنید این دیگه ناراحتی نداره یکمم زحمت بکشیم و جستجویی در اینترنت بکنم بد نیست همه چیز نباید حاضر و آماده باشه در ضمن شما بجای ناراحتی یه آزمون خطای ساده انجام بدید و بجای تگ img تگ ویدئو رو قرار بدبد doctype سند رو هم برابر htlm5 قرار بدید و آدرس فایل ویدئویی رو هم درونش قرار بدید ببیند میشه یا نه اینطوری موارد دیگه ای رو هم یاد میگیرید موردی رو هم برای سرچ در کامنت قبلی گفتم همون عبارت رو سرچ کنید به جواب میرسید…
موفق باشید…

shima a

من عین کد های شما رو بدون تغییر قرار دادم و اصل پوشه هارو هم کپی کردم فقط نام عکس هارو عوض کردم اما از اسلایدشو خبری نیست اصلا تو کد html ی که شما قرار دادید تگ a وجود نداره که بخاد به اسلایدشو لینک بشه اگرم قراره با فایل جی کوئری ساخته بشه برای من ساخته نشد

محمد مهدی اکرمی

دوست عزیز حتما یه جا رو اشتباه کردید .
به سورس کد های دمو یه نگاه بندازید ببینید کجا رو اشتباه کردید .

shima a

سلام نمیشه کد رو طوری تنظیم کرد که از همون اول با اسلایدشو نمایش داده بشه نه با کلیک روی عکسها؟

محمد مهدی اکرمی

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

reza

میشه بگید برای فعال کردن تاچ کدوم کد ها باید اضافه بشه تو هر اسلایدر دیگه 😛

محمد مهدی اکرمی

سلام
تاچ به صورت پیشفرض فعاله .

محمد اسفندیاری

بله از IE7 به بالا پشتیبانی میشه
موفق باشید