پلاگین افکت تصویر – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Thu, 29 May 2014 08:33:07 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 دانلود پلاگین LightBox حرفه ای جی کوئری + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-lightbox-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4.html https://www.xn--mgbguh09aqiwi.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-lightbox-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4.html#comments Tue, 04 Feb 2014 11:01:33 +0000 http://xn--mgbguh09aqiwi.com/?p=1057 حتما تابحال به این مشکل برخورده اید که پس از کلیک بر روی عکس های گالری و یا مکان های دیگر , عکس در صفحه ای جدید باز شده و طبیعتا کل دیزاین شمارو در طراحی سایت بهم میزند .

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

ویژگیهای این پلاگین :

نمایش در تمامی مرورگرها

دارای افکت های زیبا و حرفه ای

امکان درج شرح مختصر ر زیر هر عکس

امکان گروه بندی عکس ها برای نمایش پشت سر هم ( اسلاید شو )

و اما آموزش :

ابتدا فایل های مربوط به پلاگین را از اینجا دانلود کنید و در روت سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )

نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .

حال در بالای صفحه و یا صفحات خود , کد زیر را در بین دو تگ <head> و <head/> قرار دهید .

<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
<script src="js/modernizr.custom.js"></script>

 پس از این کار , کدهای زیر را در 2 خط مانده به آخر , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

 حال کافیست که عکس های خود را به شیوه ی زیر کدنویسی کنید ( یعنی فرمت زیر را دارا باشند )

<a href="آدرس عکس بزرگ" data-lightbox="vahid-majidi" title="شرح کوتاهی در مورد عکس"><img src="آدرس عکس کوچک"/></a>

 توضیحات :

 1 – داشتن 2 اندازه بزرگ و کوچک برای یک عکس به این دلیل است که هنگام بارگذاری صفحات سایت شما , ابتدا عکس کوچک و حجم کم بارگذاری شود و پس از کلیک بر روی عکس , عکس بزرگتر که دارای حجم بیشتری هست بارگذاری شود . 

ضمنا میتوانید هر دو آدرس رو یکی قرار دهید . یعنی در هر دو صورت , یک عکس بارگذاری شود که مسلما روش بالا بهتر است .

2 – با نوشتن شرح کوتاه در اتربیوت title , میتوانید در زیر هر عکس , شرحی در مورد همان عکس را به نمایش بگذارید .

3 – گاهی میخواهید با کلیک بر روی یک عکس , عکس های دیگری که در همان گروه تصویری هستند را به صورت اسلاید شو , به کاربران نشان دهید . کافیست در اتربیوت data-lightbox , یک نام به دلخواه انتخاب نمایید و برای دیگر عکس های همان گروه تصویری هم , همان نام را تکرار کنید . به همین سادگی چند عکس را در یک گروه تصویری برای اسلاید شو قرار میدهید .

به عنوان مثال :

<a href="img/demopage/image-1.jpg" data-lightbox="vahid" title="عکس شماره یک"><img src="img/demopage/thumb-1.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-2.jpg" data-lightbox="vahid" title="عکس شماره دو"><img src="img/demopage/thumb-2.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-3.jpg" data-lightbox="majidi" title="عکس شماره سه"><img src="img/demopage/thumb-3.jpg" width="150" height="150"/></a>
<a href="img/demopage/image-4.jpg" data-lightbox="majidi" title="عکس شماره چهار"><img src="img/demopage/thumb-4.jpg" width="150" height="150"/></a>

 همان طور که در بالا میبینید , دو عکس اول در یک گروه و دو عکس دوم در یک گروه دیگر قرار گرفتند …

آموزش : وحید مجیدی

پخش اختصاصی 

دموی پلاگین

دانلود نمونه پلاگین به صورت آماده

[sdm-download id=”1059″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-lightbox-%d8%ad%d8%b1%d9%81%d9%87-%d8%a7%db%8c-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4.html/feed 14