برای دریافت نحوه نصب این پلاگین روی ادامه مطالب کلیک کنید. همچنین می توانید به صورت کامل این پلاگین را دانلود کنید و به میل خود تغییر دهید و روی سایت خود اعمال کنید.

برای دانلود کلیک کنید

با کلیک روی نمایش می توانید نمونه آنرا ببینید… پلاگین زوم روی عکس که مناسب CSS و HTML می باشد.

برای اینکه بتوانید از آن استفاده کنید باید تنظیمات زیر را انجام دهید:

اول باید آدرس عکستان را عوض کنید . ما اینجا ۲ عکس را قرار دادیم به عنوان نمونه:

<a href=”large.jpg”><img src=”small.jpg” alt=”Small image” /></a>

در CSS این کلاس را با این مشخصات ایجاد کنید:

#easy_zoom{ width:600px; height:400px; border:5px solid #eee; background:#fff; color:#333; position:absolute; top:15px; left:400px; overflow:hidden; -moz-box-shadow:0 0 10px #555; -webkit-box-shadow:0 0 10px #555; box-shadow:0 0 10px #555; /* vertical and horizontal alignment used for preloader text */ line-height:400px; text-align:center; }

حال این تغییرات در هر بخش انجام دهید:

id

Default value: “easy_zoom”

——————————————————

parent

Default value: “body”

——————————————————

append

Default value: “true”

——————————————————

preload

Default value: “Loading…”

—————————————————–

error

Default value: “There has been a problem with loading the image.”

——————————————————-

این یک نمونه از کد جی کوئری است بعد از تغییرات مورد نظر:

jQuery(function($){ $(‘a.zoom’).easyZoom({ id: ‘imagezoom’, preload: ‘<p class=”preloader”>Loading the image</p>’ parent: ‘#container’ }); });
—————————————————————————————————-

حال شما این تغییرات را می بینید در قالب خود.

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>