لایت باکس

لایت باکس کامپوننت ویجت کیت به شما امکان می دهد تا تصاویر ، HTML و مطالب چند رسانه ای را در یک کادر با پس زمینه ی تیره به نمایش بگذارید بدون اینکه لازم باشد صفحه ی خود را ترک نمایید .

ویژگی‌ها

  • برای نمایش تصاویر ، ویدئو ، اچ تی ام ال ، آی فریم ، اجاکس و SWF
  • پشتیبانی از یوت یوب ، ویمئو ، فایل های با پسوند MP4 و فایل های ویديویی با پسوند FLV
  • گروه لایت باکس و ترکیب انواع محتوای مختلف
  • طراحی ریسپانسیو و متناسب با تمامی صفحات نمایش
  • لود شدن سایر ویجت‌ها در لایت باکس
  • ۳ حالت مختلف باز و بسته شدن کادر ها
  • ۴ حالت متفاوت برا یکادر درج متن
  • پیمایش مطالب با استفاده موس و کیبورد
  • در طراحی آن از آخرین نسخه ی jQuery استفاده شده است
  • قابل استفاده در جوملا و وردپرس

نمونه ها

انیمیشن های متفاوت - fade, elastic و none

موقعیت های مختلف عنوان - float, inside و over

نمونه های مختلف در یک گالری (همچنین سعی کنید از صفحه کلید و اسکرول موس استفاده نمایید

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

لود شدن ویجت ها در لایت باکس

از #wk-ID برای بارگذاری ویجت ها مانند اسلایدشو و گالری ها در لایت باکس استفاده کنید. برای مثال: ویجت کیت اسلایدشو

<a data-lightbox="width:600;height:300;" href="#wk-10">لایت باکس</a>

طریقه استفاده

می توانید HTML5 سفارشی را در ویژگی های داده با استفاده از کد data-lightbox استفاده نمایید .. شما می توانید پارامترهای مختلف لایت باکس را در ویژگی های داده تنظیم نمایید. برای مثال :

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">لایت باکس</a>

در اینجا لیستی از پارامترهای رایج درج شده است:

  • موقعیت عنوان ها - چگونه باید عنوان را نمایش دهیم ؟ (float, outside, inside یا over)
  • بازکردن - تنظیم بازشونده کادر. (fade, elastic, یا none)
  • بستن - تنظیم بسته شدن کادر (fade, elastic, یا none)
  • درست یا غلط - تنظیم درست یا غلط
  • پیمایش - تنظیم بله یا خیر
  • عرض - تنظیم عرض در پیکسل
  • ارتفاع - تنظیم ارتفاع در پیکسل
  • مختصات - تنظیم مختصات در پیکسل