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


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

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

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

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

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

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

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

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

و اما آموزش :

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

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

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

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

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

 توضیحات :

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

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

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

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

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

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

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

پخش اختصاصی 

دموی پلاگین

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

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (لطفا رای بدید)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

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

    1. Luminance گفت:

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

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

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

    2. tarannom گفت:

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

    3. hosna گفت:

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

    4. یاسر گفت:

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

    5. مجید گفت:

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

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

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

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

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

    7. سجاد گفت:

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

    8. Reyhaneh_B گفت:

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

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

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