در این آموزش قصد دارم شما رو با اسلایدری آشنا کنم که به صورت lightbox عمل میکنه و دیگه مشکل واکنشگرا بودن رو نداره و از همه مهمتر قابلیت لمسی بودن اون است که اون رو از دیگر اسلایدرها متمایز میکنه .
از قابلتهای این اسلایدر :
خوب دمو رو هم ببینید تا بریم سراغ کد هاش :
بعد از دانلود فایلها کدهای زیر رو به بخش <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>
در هر جایی که میخواهید اسلایدر قرار بگیرد از کدهای زیر استفاده کنید :
<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>
در این مرحله ما با استفاده از کد زیر باید اسلایدر خودمون رو به کدهای 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>
[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]
لینک ها همشون 404 میدن😑