• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ایجاد Lightbox زیبا برای تصاویر

2 3343 ۵ آبان ۹۳

در این مطلب مبخوام طریقه استفاده از یک lightbox زیبا برای تصاویر رو ، بهتون توضیح بدم.

برای شروع به بخش مورد نظر Github برین و فایلهای مربوطه رو دانلود کنید.

به همه فایلها نیاز نداریم و فقط به 3 فایل زیر احتیاج داریم :

  1. jquery.js
  2. lightbox.min.js
  3. lightbox.css

همچنین به تعدادی عکس هم برای این مطلب نیاز داریم. من فایلهای مورد نیاز رو در انتهای همین مطلب براتون قرار دادم و میتونین اونو دانلود کنید و از فایلها استفاده کنید.

در ابتدا سه پوشه با نامهای css و js و img بسازید. در پوشه js فایلهای jquery.js و lightbox.min.js رو قرار میدیم. فایل lightbox.css رو در پوشه ی css قرار بدین و چهار عکس close.png و loading.gif و prev.png و next.png رو در پوشه ی img قرار میدیم. برای مثال ما میخوایم عملیات lightbox رو بر روی سه تا عکس انجام بدیم. این عکس هارو هم در پوشه img قرار میدیم.

حالا یک فایل بنام index.html میسازیم و کدهای زیر رو درون اون قرار میدیم :

همونطور که میبینید ، تمام فایلهارو به صفحمون متصل کردیم. با اضافه کردن فایل css به صفحه ، بطور اتوماتیک اون 4 تا تصویر هم به صفحتون الصاق میشه و در مکانهای لازم از اون استفاده میشه. فقط حواستون باشه که این 4 تا تصویر حتما باید در پوشه img باشند.

خب حالا برای اینکه یک lightbox از اون عکس بسازین ، کافیه که کد زیر رو قرار بدین :

میبینید که در بالا یک لینک ایجاد کردیم. خاصیت href لینک رو آدرس اون عکسی قرار میدیم که میخوایم در lightbox ظاهر بشه. با استفاده از خاصیت data-lightbox میتونین یک نام برای این lightbox انتخاب کنید. به این معنا که ، اگه این مقدار برای هر لینک متفاوت باشه ، این lightbox ها مستقل هستن و بهم ربطی ندارن و اگه بخواین تعدادی عکس رو بصورت گروهی در یک lightbox مدیریت کنید ، باید برای همه اونایی که میخواین در یک گروه باشن ، اسم یکسانی رو انتخاب کنید.

با استفاده از خاصیت data-title هم میتونین یک caption برای اون تصویر انتخاب کنید. اگر ار این خاصیت استفاده نکنید ، هیچ چیزی نمایش داده نمیشه.

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

در لینک بالا من یک نوشته قرار دادم. مثلا Image #1. میتونیم بجای متن از تصویر هم استفاده کنید.

حالا فرض کنید ، میخوایم سه تا لینک درست کنیم که با کلیک بر روی هر کردم یک lightbox باز بشه و عکس مورد نظر درونش قرار بگیره. کدهاش بصورت زیر هست :

همونطور که میبینید ، خاصیت data-lightbox برای هر سه لینک ، یکسان هست. پس یعنی در یک گروه قرار دارن. اگه کد بالا رو در خروجی ببینید ، بصورت زیر هست :

light1

حالا فرض کنید ، بر روی لینک Image #2 کلیک کنید ، lightbox بصورت زیر خواهد بود :

light2

  1. اگر بر روی این گزینه کلیک کنید ، به عکس بعد منتقل میشین.
  2. با کلیک بر روی این گزینه ، lightbox بسته میشه.
  3. اینجا هم میگه که این عکس ، چندمین عکس ار گروه هست.

خب دوستان امیدوارم بدردتون بخوره.

موفق باشید. یا علی

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    بسیار عالی بود واقعا دمتون گرم

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram