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

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



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

fresco : پلاگین jQuery برای ساخت Lightbox واکنشگرا

0 2422 ۱۶ دی ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام fresco رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر یک LightBox زیبا درست کنید و از اون در سایتتون استفاده کنید. این ابزار دو نسخه رایگان و پولی داره. در این مطلب از نسخه رایگان اون استفاده میکنیم ، اما میتونین با پرداخت هزینه ای نسخه پیشرفته اون رو که امکانات بیشتری داره ، دریافت کنید.

برای دیدن دمو میتونین از انتهای مطلب اون رو دانلود کنید و ببینید.

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و fresco.js و fresco.css نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

حالا باید یک لینک قرار بدین و آدرس عکس مورد نظر رو به اون بدین. همچنین برای اون باید کلاس fresco رو نسبت بدین. بصورت زیر :

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

حالا اگه دوباره نگاه کنید ، caption هم اضافه شده. اگر بخواین یک گالری و گروه بندی درست کنید ، باید چندتا کپی از کد بالا بزارین و آدرس ها رو عوض کنید و همچنین از خاصیت data-fresco-group برای اون عکسها استفاده کنید و مقدار این خاصیت رو برای همه اونا یکسان قرار بدین. بصورت زیر :

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

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

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

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram