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

- visibility ۶ mode_comment

در این مطلب میخوام یک پلاگین 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 هست و میتونین در اون ببینید.

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

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

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

comment دیدگاه کاربران
محمد مهدی اکرمی

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

محمد اسفندیاری

با تشکر از شما و عذر خواهی از کاربران
رفع شد
موفق باشید

کارت rfid

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

محمد اسفندیاری

موفق باشید

موسی الرضا سنگ سفیدی

ممنون محمد جان

خواهش میکنم
موفق باشی دوست عزیز

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.