دانلود پلاگین جی کوئری زوم بر روی تصاویر با 3 افکت زیبا – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Thu, 29 May 2014 08:28:34 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 دانلود پلاگین جی کوئری زوم بر روی تصاویر با 3 افکت زیبا + آموزش کامل و ساده https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html#comments Sat, 22 Mar 2014 19:01:50 +0000 http://xn--mgbguh09aqiwi.com/?p=1214 در ادامه آموزش های زبان Jquery , تصمیم گرفتم یک پلاگین بسیار حرفه ای و زیبا که این روز ها در سایت های زیادی از آن استفاده میود را در اختیار شما عزیزان قرار دهم .

این پلاگین که elevateZoom نام دارد , پلاگینی بسیار حرفه ای برای زوم کردن اتوماتیک در حالت Hover بر روی تصاویر یک وب سایت میباشد .

با استفاده از این پلاگین , دیگر نیازی به کلیک بر روی تصویر مورد نظر برای بزرگنمایی ندارید و فقط کافیست موس بر روی تصویر تغییر مکان دهد تا به صورت یک ذره بین , عمل بزرگ نمایی انجام شود .

این پلاگین دارای 3 افکت زیبا برای پیمایش روی تصاویر می باشد .

آموزش :

در ابتدا فایل های مورد نیاز رو از اینجا دانلود نمایید و سپس در روت سایت خود آپلود نمایید .

توجه فرمایید که تمامی آدرس ها به صورت پیش فرض برای قسمت روت ( root ) اصلی سایت میباشد و طبیعتا برای استفاده در پوشه ای خاص , باید آدرس دهی ها توسط شما عوض شوند .

حال در بالای صفحه ی خود و در بین دو تگ <head> و <head/> سایت خود , کد های زیر را قرار دهید .

<script src='js/jquery.js'></script>
<script src='js/jquery.elevatezoom.js'></script>

 حال هر کجا که میخواهید عکسی اضافه کنید باید تگ عکس شما از قانون زیر تبعیت کند .

<img class="zoom" src="آدرس عکس کوچک" data-zoom-image="آدرس عکس بزرگ"/>

 توجه فرمایید که حتما باید عکس ها شبیه هم و فقط در دو اندازه کوچک و بزرگ باشند . اینکه چه اندازه ای باشند , دست خود شما میباشد و هر اندازه ای که بخواهید میتونید استفاده کنید .

برای مثال در دمویی که قرار داده شده , عکس کوچک در اندازه ( 250*400 ) و عکس بزرگ در اندازه ( 800*1280 ) می باشد . ( صرفا جهت اطلاع )

حال کافیست برای انجام هر افکت از 3 افکت قرار داده شده , تکه کد مربوط به اون رو در آخر کد html , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .

برای افکت زوم در صفحه ای جدید ( با قابلیت زوم اسکرول ) :

<script>
$(".zoom").elevateZoom({
	zoomWindowFadeIn: 500,
	zoomWindowFadeOut: 500,
	lensFadeIn: 500,
	lensFadeOut: 500,
        scrollZoom : true
});
</script>

 برای افکت زوم داخلی :

<script>
$(".zoom").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});
</script>

 و برای افکت زوم با استایل لنز :

$(".zoom").elevateZoom({
        zoomType: "lens",
        lensShape : "round",
        lensSize    : 200,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
        scrollZoom : true
});

دموی پلاگین

گرداوری : وحید مجیدی 

پخش اختصاصی

دانلود نمونه ی دموی آماده

[sdm_download id=”1234″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d9%be%d9%84%d8%a7%da%af%db%8c%d9%86-%d8%ac%db%8c-%da%a9%d9%88%d8%a6%d8%b1%db%8c-%d8%b2%d9%88%d9%85-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1.html/feed 25