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

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

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

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

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

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

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

قدم دوم : اضافه کردن کد‌های 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 هم اگر از تصویر نسخه ای برای موبایل دارید آدرس آن را قرار دهید و اگر نه این قسمت را حذف کنید .

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

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

[remind]در کد بالا و در خط 4 باید به جای yourGallery#  اسمی (id) رو که در مرحله قبل برای اسلایدرتون انتخاب کردید رو بنویسید . یعنی اگر اسم اسلایدرتون رو 7learn انتخاب کردید باید در کد‌های بالا 7learn# رو بنویسید.[/remind]
با استفاده از کد بالا شما از تنظیمات پیشفرض اسلایدر استفاده کردید. ولی اگر می‌خواهید که اسلایدر را سفارشی کنید از کد زیر به جای بالای استفاده کنید و 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>

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

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

[adr]برای اینکه بیشتر با امکانات اسلایدر آنا بشید به این آدرس بردید .[/adr]

[dl]دانلود فایل ها [/dl]