۳۲
دیدگاه
نظر
ساخت اسلایدر عکس واکنشگرا در HTML و لمسی چند کاره
سرفصل‌های مقاله
- قدم اول : فراخوانی کدهای اسلایدر
- قدم دوم : اضافه کردن کدهای HTML
- قدم سوم : تنظیمات اسلایدر
در این آموزش قصد دارم شما رو با اسلایدری آشنا کنم که به صورت 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
۰۷ تیر ۱۳۹۴، ۱۹:۵۶
وحید صالحی
۰۷ تیر ۱۳۹۴، ۲۰:۳۱
shima a
۰۷ تیر ۱۳۹۴، ۱۴:۴۲
وحید صالحی
۰۷ تیر ۱۳۹۴، ۱۴:۴۶
shima a
۰۷ تیر ۱۳۹۴، ۱۹:۱۶
وحید صالحی
۰۷ تیر ۱۳۹۴، ۱۹:۳۲
سید صالح
۱۹ مرداد ۱۳۹۴، ۱۳:۰۲
سید صالح
۱۹ مرداد ۱۳۹۴، ۱۳:۳۳
shima arabi
۲۱ مرداد ۱۳۹۴، ۱۱:۳۹
shima a
۰۷ تیر ۱۳۹۴، ۱۳:۳۳
محمد مهدی اکرمی
۰۸ تیر ۱۳۹۴، ۱۳:۴۹
shima a
۰۷ تیر ۱۳۹۴، ۱۳:۰۵
محمد مهدی اکرمی
۰۸ تیر ۱۳۹۴، ۱۳:۴۸
reza
۱۳ اسفند ۱۳۹۳، ۱۰:۱۱
محمد مهدی اکرمی
۰۸ تیر ۱۳۹۴، ۱۳:۴۷
1234567890
۰۳ اسفند ۱۳۹۳، ۰۵:۵۱
محمد اسفندیاری
۰۳ اسفند ۱۳۹۳، ۰۷:۲۶
بهرام
۱۶ دی ۱۳۹۳، ۰۹:۱۱
محمد مهدی اکرمی
۱۶ دی ۱۳۹۳، ۰۹:۴۷
civil366
۲۶ شهریور ۱۳۹۳، ۱۸:۵۷
مهدی اکرمی
۲۷ شهریور ۱۳۹۳، ۰۲:۱۹
مهدی اکرمی
۲۶ شهریور ۱۳۹۳، ۱۶:۰۷
omid
۲۶ شهریور ۱۳۹۳، ۱۲:۲۸
alikhani98
۲۵ شهریور ۱۳۹۳، ۱۷:۲۸
مهدی اکرمی
۲۵ شهریور ۱۳۹۳، ۱۷:۳۱
دوره الفبای برنامه نویسی با هدف انتخاب زبان برنامه نویسی مناسب برای شما و پاسخگویی به سوالات متداول در شروع یادگیری موقتا رایگان شد: