زوم تصاویر با 3 افکت زیبا
زوم تصاویر با پلاگین که elevateZoom نام دارد , پلاگینی بسیار حرفه ای برای زوم کردن اتوماتیک در حالت Hover بر روی تصاویر یک وب سایت میباشد .
با استفاده از این پلاگین , دیگر نیازی به کلیک بر روی تصویر مورد نظر برای بزرگنمایی ندارید و فقط کافیست موس بر روی تصویر تغییر مکان دهد تا به صورت یک ذره بین , عمل بزرگ نمایی انجام شود .
این پلاگین دارای 3 افکت زیبا برای پیمایش روی تصاویر می باشد .
آموزش :
در ابتدا فایل های مورد نیاز رو از اینجا دانلود نمایید و سپس در روت سایت خود آپلود نمایید .
توجه فرمایید که تمامی آدرس ها به صورت پیش فرض برای قسمت روت ( root ) اصلی سایت میباشد و طبیعتا برای استفاده در پوشه ای خاص , باید آدرس دهی ها توسط شما عوض شوند .
حال در بالای صفحه ی خود و در بین دو تگ <head> و <head/> سایت خود , کد های زیر را قرار دهید .
2 3 4 5 6 7 | <script src=‘js/jquery.js’></script> <script src=‘js/jquery.elevatezoom.js’></script> |
حال هر کجا که میخواهید عکسی اضافه کنید باید تگ عکس شما از قانون زیر تبعیت کند .
2 3 4 5 6 | <img class=“zoom” src=“آدرس عکس کوچک” data–zoom–image=“آدرس عکس بزرگ”/> |
توجه فرمایید که حتما باید عکس ها شبیه هم و فقط در دو اندازه کوچک و بزرگ باشند . اینکه چه اندازه ای باشند , دست خود شما میباشد و هر اندازه ای که بخواهید میتونید استفاده کنید .
برای مثال در دمویی که قرار داده شده , عکس کوچک در اندازه ( 250*400 ) و عکس بزرگ در اندازه ( 800*1280 ) می باشد . ( صرفا جهت اطلاع )
حال کافیست برای انجام هر افکت از 3 افکت قرار داده شده , تکه کد مربوط به اون رو در آخر کد html , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .
برای افکت زوم در صفحه ای جدید ( با قابلیت زوم اسکرول ) :
2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> $(“.zoom”).elevateZoom({ zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, scrollZoom : true }); </script> |
برای افکت زوم داخلی :
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> $(“.zoom”).elevateZoom({ zoomType: “inner”, cursor: “crosshair”, zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, scrollZoom : true }); </script> |
و برای افکت زوم با استایل لنز :
2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(“.zoom”).elevateZoom({ zoomType: “lens”, lensShape : “round”, lensSize : 200, zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, scrollZoom : true }); |
گرداوری : وحید مجیدی
پخش اختصاصی
دانلود نمونه ی دموی آماده
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید ؟در گفتگو ها شرکت کنید!