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

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



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

zoom : پلاگین jQuery برای بزرگنمایی تصاویر بصورت زیبا

4 1610 ۲۸ اردیبهشت ۹۴

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

 

zoom-in

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

میبینید که یک تصویر قرار داده شده و هر وقت که روی اون میرید ، یک علامت ذره بین ظاهر میشه و با کلیک بر روی اون افکت مورد نظر اتفاق میوفته.

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به zoom.css و jquery.min.js و transition.js و zoom.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

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

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

اولین کاری که باید بکنیم اینه که محتویات صفحه رو قرار بدیم و در لابلای اون هم عکسامون رو بزاریم :

میبینید که یک div گذاشتیم و در ابتدا و انتهای اون پاراگراف قرار دادیم و در وسط اون هم یک img قرار دادیم و براش کلاس sample رو در نظر گرفتیم. استایلهای ساده زیر رو براشون در نظر میگیرم :

میبینید که عرض div رو 40 درصد کل عرض قرار دادم و همچنین اون رو وسط گذاشتم. برای تصویرمون هم بیشترین عرضشو 100 درصد گذاشتم تا حالت واکنشگرا داشته باشه و با کوچک شدن صفحه ، تصویر هم به نسبت کوچیک بشه.

فایل transition.js از فریم ورک Bootstrap گرفته شده و برای زمانی هست که تصویر بزرگ میشه و بر میگرده سر جای خودش.

حالا تنها کاری که لازمه بکنید ، اینه که برای تصویری که قرار دادیم ویژگی data-action رو اضافه کنیم :

میبینید که مقدار اون zoom قرار دادیم و با اینکار خود ابزار متوجه میشه و با هاور کردن و کلیک کردن بر روی تصویر افکتهای مورد نظر افزوده خواهد شد. نیازی به نوشتن کدهای Javascript نیست.

سایتی که از این افکت زیبا استفاده میکنه ، سایت Medium هست و میتونین در اون ببینید.

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

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

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

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

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

  • ‏‏
    محمد مهدی اکرمی(۲۸ اردیبهشت ۱۳۹۴)

    سلام
    فکر کنم عنوان این مطلب اشباهه !!!

  • ‏‏

    خیلی خوب و کاربردی بود. متشکرم

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram