پلاگین بزرگنمایی تصویر توسط جی کویری

برای کار با تصویر در جی کوئری پلاگین های زیادی وجود داره. (کلیک کنید) اما یک پلاگین مشهور که خیلی هم زیبا هست و به راحتی هم میشه از اون استفاده کرد LightBox هست.

نحوه استفاده از پلاگین LightBox

مرحله اول :

در اولین قدم این پلاگین را از این لینک دانلود کنید و در روت پروژه خود کپی کنید. منظور از روت در پروژه های Asp همان فایل wwwroot می باشد.

مرحله دوم :

مرحله دوم استفاده از فایلهای css و jquery مربوط به این پلاگین می باشد. در قسمت head پروژه و یا در فایل layout و قسمت head ابتدا فایل Css را به پروژه لینک کنید

  <!--LightBox Plugin-->
  <link href="~/lib/LightBox/css/lightbox.css" rel="stylesheet" />

سپس فایل های جاوااسکریپت مربوط به پلاگین LightBox را در قسمتی که فایلهای جی کوئری را به پروژه لینک کرده اید لینک کنید. دقت کنید که فایلهای جاوااسکریپت و جی کوئری بعد از فایل jquery اصلی باشد.

<script type="text/javascript" src="~/js/libraries/jquery.min.js"></script>

<!--LightBox Plugin-->
<script src="~/lib/LightBox/js/modernizr.custom.js"></script>
<script src="~/lib/LightBox/js/lightbox-2.6.min.js"></script>

خب همه چیز آماده است!!!

استفاده از پلاگین LightBox همین سادگی می باشد.

مرحله سوم :

حال کافیست در هر جایی که می خواهید تصویری را به صورت گرافیکی نمایش دهید کد زیر را بنویسید : 

  <a href="~/path/image.png" data-lightbox="mypic">کلیک کنید</a>

مشاهده خواهید کرد که تصویر شما با گرافیک زیبایی نمایش داده خواهد شد.

نکته : خاصیت data-lightbox را در تگ a حتما بایستی استفاده کنید تا تصویر به صورت گرافیکی نمایش داده شود. همچنین مقدار این Attribute دلبخواه می باشد.