5 اسلایدر برای مقایسه تصاویر

5 اسلایدر برای مقایسه تصاویر
اگر به صورت حرفه ایی مشغول طراحی وبسایت هستید احتمالا برایتان پیش آمده تا در بعضی بخش ها احتیاج به مقایسه تصاویر با یکدیگر داشته باشید ، عکس‌هایی‌ که قبل و بعد از یک کالا یا عکس خاص را به کاربرانتان نشان دهد. در این مطلب قصد داریم به شما چند کتابخانه جاوا اسکریپت معرفی‌ کنیم که توسط آنها به راحتی‌ میتوانید از اسلایدرهای مقایسه ایی در جهت مقایسه تصاویر در وبسایت های خودتان استفاده کنید.
سایت ترجمه رایت می
سفارش آنلاین ترجمه مقالات و متون تخصصی با خیال راحت
تور مشهد
تور مشهد، همه روزه از تمام شهرهای ایران.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
ازمون ایین نامه رانندگی
آزمون شبیه سازی شده آیین نامه رانندگی
عمان۷۷۷
مجله گردشگری عمان۷۷۷-تور عمان-هتل‌های عمان-جاهای دیدنی و جاذبه‌های گردشگری عمان
خرید فالوور کلاب هاوس
خرید فالوور کلاب هاوس ، افزایش فالوور کلاب هاوس، دعوت نامه رایگان کلاب هاوس و پنل خدمات کلاب هاوس در سایت فالوده
خرید فالوور اینستاگرام
با سرویس‌های ما زودتر از آنچه فکرش را کنید در اینستاگرام خودی نشان دهید!
شارژ کپسول آتش نشانی
شارژ انواع کپسول آتش نشانی با ضمانت و بیمه‌نامه آسیا + خدمات رایگان پس از شارژ
نمایندگی کانن
فروش انواع دوربین های کانن از نمایندگی رسمی دوربین های کانن
استودیو طراحی سلام گرافیک
استودیو طراحی گرافیک سلام گرافیک
قالب و افزونه وردپرس
بیش از 300 محصول تنها با پرداخت 39 هزارتومان اشتراک ویژه در دسترس شما است.
تبلت مناسب کودک
تبلت نارتب با مدیریت اینترنت برای کودک
محصولات سیمپل
محصولات سیمپل
خودتان را اینجا معرفی کنید

مشاهده می‌کنید که همین ترفند ساده تاثیر بسیار زیادی روی بهبود تجربهٔ کاربری گذاشته است.

1-Twentytwenty

Twentytwenty یک ابزار ساده ی تصویریست که از JQuery و jquery.event.move  استفاده میکند، نحوه ی استفاده از آن هم ساده است. کافیست 2 تصویر را در یک container  قرار دهید و تابع  ;()twentytwenty
را فراخوانی کنید.
 
<div id="container">
  <img src="img-before.png">
  <img src="img-after.png">
</div>
فراخوانی تابع:
$("#container").twentytwenty();
لازم به یاد آوریست که این پلاگین ریسپانسیو است و اگر با فریم ورک هایی نظیر foundation  کار میکنید با آن مشکلی نخواهید داشت. wink
 

2- Juxtapose

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

 3-imgSlider

imgslider  پلاگین کاربردی بعدیست که بعد از وارد کردن js و Css مورد نظر تنها کافیست عکس ها را در 2 <div> متفاوت قرار دهید، کلاس left  برای عکس before و کلاس right  برای عکس after استفاده می شود.
<div class="slider responsive">
    <div class="left image">
        <img src="before.jpg"/>
    </div>
    <div class="right image">
        <img src="after.jpg"/>
    </div>
</div>

  فراخوانی :
$('.slider').slider();



4-Cocoen

 مزیت اسلایدر cocoen نسبت به سایر اسلایدر ها را شاید بتوان استفاده از jQuery-Touch Event  دانست، شیوه استفاده مشابه اسلایدر های قبلییست تنها با این تفاوت که باید این جی کوئری جدید را هم وارد صفحه html خود کنید.
 
<div class="cocoen">
    <img src="img/before.jpg" alt="">
    <img src="img/after.jpg" alt="">
</div>
فراخوانی :
$(document).ready(function(){
    $('.cocoen').cocoen();
});

 5-Image Comparison Slider

اگر تمایل دارید بدانید در پشت پرده ماجرا چه می گذرد کافیست نگاهی به cody house بیندازید و ساختار نوشتن کدهای جی کوئری را بررسی کنید .
 

فارغ‌التحصیل رشتهٔ فیزیک و علاقمند به دنیای وب، چند سالی‌ هست که وارد این حرفه شدم و هرروز در حال یادگیری مطلبی جدید!

نظرات و سوالات کاربران

ارسال پاسخ hassani
hassani
یکشنبه ۰۴ بهمن ۱۳۹۴ ۱۲:۳۹
تشکر بابت معرفی این ابزار