کانال تلگرام پورتال پادرا

بزرگنمایی تصاویر با پلاگین جی کوئری

بزرگنمایی تصاویر با پلاگین جی کوئری - جی کوئری


تاریخ : سه شنبه,۲۱ دی ۱۳۹۵ تعداد بازدید :363

 شما با استفاده از این پلاگین می توانید تصاویر خود را زمانی که موس روی آن قرار می گیرد بزرگتر نمایید.این پلاگین در برنامه های کاربردی و وبسایت های فروشگاهی بسیار پرکاربرد می باشد.

کتابخانه های افزونه  jQuery و PhotoZoom را در سند خود با استفاده از تگ اسکریپت فراخوانی می نمایید.

<script src="jquery.js"></script>
<script  src="photoZoom.min.js"> </script> 
<script> 
$(document).ready(function()
{
$("body").photoZoom();
});
</script> 
//HTML Code
<body>
<img src="one.jpg"/>
<img src="two.jpg"/>
......
......
</body>

برای سفارشی تر کردن آن هم می توانید از خواص CSS استفاده نمایید.

$("body").photoZoom(

zoomStyle : { 
"border":"1px solid #ccc",
"background-color":"#fff",
"box-shadow":"0 0 5px #888"
}
});

رویدادهای  onMouseOver و onMouseOut در این قسمت قرار داده.

$("body").photoZoom(

onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});
 

دمو بزرگنمایی تصاویر


منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید




دیدگاه




در ارتباط با همین مطلب بخوانید