JQZoom لتكبير الصور تفاعليا عن طريق مكتبية jQuery

المحرّر: بوابتي

JQZoom لتكبير الصور تفاعليا عن طريق مكتبية jQuery

إنها مكتبية تعمل من خلال دوال jQuery ، وهي تمكن من إضافة عمليات التكبير (zoom) للصور المتواجدة بصفحة ويب، بطريقة تفاعلية مباشرة حين تمرير الفأرة فوق الصورة المعنية. ولا شك ان إضافة امكانية تكبير الصور يجعل من هذه المكتبية أداة مهمة.

JQZoom هي مكتبية مطورة كطبقة فوق طبقة jQuery، والتي تعمل كلها من خلال لغة JavaScript، وبالتالي فانه يسري على استعمال JQZoom مايسري على استعمال دوال JavaScript، حيث يجب اولا التأشير على موقع مكتبيتي: jQuery ثم JQZoom وذلك في أول الصفحة. ثم إنه يلزم إضافة ملف تنسيق CSS وهو الذي يحوي تفصيلات تنسيق الصورة المكبرة.
وتقوم عملية التكبير على وجود صورة صغيرة وهي الصورة الأصلية، وصورة أخرى كبيرة يقع إنتاجها من خلال تمرير الفأرة بجوار مساحة صغيرة بالصورة الأصلية.

بعدها يجب اختبار هل ان الصفحة تم شحنها كاملا ليقع اطلاق عمل دالة التكبير، ويتم كل هذا عن طريق شيفرة JavaScript كالتالي:

$(document).ready(function(){
$('.MYCLASS).jqzoom();
});

وعملية التكبير يمكن التصرف فيها من خلال العديد من الخيارات، بحيث يمكن التصرف في حجم الصورة، ومكان الإظهار، وطريقة الإظهار، واظهار النص العنوان من عدمه وغيرها من الخيارات التي يمكن التحكم فيها.

وهذه عينة من الشيفرة التي تمثل تصرفا في الشيفرة التي تستعمل لاطلاق عمل دالة التكبير:

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});

الروابط

أنظر عينات من استعمال مكتبية تكبير الصور
تنزيل المكتبية

اضغط على الكلمات المفتاحية التالية، للإطلاع على المقالات الأخرى المتعلقة:

jQuery، JavaScript framework، مكتبية جافاسكريبت، JavaScript، JQZoom، zoom،

يسمح بالنقل، بشرط ذكر موقع "بوابتي" مصدر المقال، ويفضّل أن يكون ذلك في شكل رابط

تاريخ نشر المقال بموقع بوابتي

20-12-2008

تقاسم المقال مع اصدقائك، أو ضعه على موقعك

لوضع رابط لهذا المقال على موقعك أو بمنتدى، قم بنسخ محتوى الحقل الذي بالأسفل، ثم ألصقه

رابط المقال

لإعلام أحدهم بهذا المقال، قم بإدخال بريده الإلكتروني و اسمك، ثم اضغط للإرسال

البريد الإلكتروني

اسمك