جهت ورود به تالار گفتمان سایت کلیک کنید


دانلود پلاگین LightBox حرفه ای جی کوئری + آموزش کامل و ساده

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

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

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

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

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

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

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

و اما آموزش :

ابتدا فایل های مربوط به پلاگین را از اینجا دانلود کنید و در روت سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی 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″]

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

14 پاسخ به “دانلود پلاگین LightBox حرفه ای جی کوئری + آموزش کامل و ساده”

  1. Luminance گفت:

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

    • وحید مجیدی صدر گفت:

      با سلام لطفا یک لینک دمو توی فروم بزارید تا بررسی کنم

  2. tarannom گفت:

    سلام
    من این کارا رو داخل ی صفحه ای به غیر روت انجام میدم ولی عمل نمیکنه.
    آدرس دهی هاشم درست میکنم.

  3. hosna گفت:

    کاری که شما گفتید رو برای نشان دادن گالری به صورت اسلاید شو انجام دادم اما عمل نکرد.لطفا راهنمایی بفرمایید

  4. یاسر گفت:

    عالی بود. ممنون

  5. مجید گفت:

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

  6. رضا نصرالهی گفت:

    به نام خدا
    به نظر بنده جای آموزش zurbo foundation خالیه
    می شه بگید که آموزشش رو قرار می دید یا نه؟

    • وحید مجیدی گفت:

      فریم ورک بسیار قوی و خوبیه , اما من به شخصه bootstrap رو میپسندم .
      فکر نکنم در مورد این فریم ورک آموزشی قرار بدم اما انشاالله تو برنامه هام bootstrap هست …

  7. سجاد گفت:

    واقعا آموزشی تمیزی بود.
    ممنون(:

  8. Reyhaneh_B گفت:

    سلام
    یه دنیا ممنون خیلی قشنگ و کامل توضیح دادین
    واقعا ممنونم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *