شرح طريقة عمل عدسة تكبير الصور بالجى كويرى imageLens

http://www.dzbatna.com/images/icons/icon30.gif ط´ط±ط* ط¹ظ…ظ„ ط¹ط¯ط³ط© طھظƒط¨ظٹط± ط§ظ„طµظˆط± ط¨ط§ظ„ط¬ظ‰ ظƒظˆظٹط±ظ‰ imageLens

http://www.mtwer.com/ar/wp-content/u...3267264592.png

|| - حياكم الله أعضاء وزوار معهد مطور ,, ومرحبا دائما بكم في هذا الصرح المجاني free التطويري ..

|| - نأمل دائما ان نكون عند حسن الظن عند جميع المطورين .. والمحبين للعالم التطويري ..

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

http://www.mtwer.com/ar/wp-content/uploads/DS.png

اخوانى الكرام كل عام وانتم بالف خير على قدوم الغالى المنتظر شهر رمضان المبارك

وقد من الله علينا بان قدمنا درس مفصلين فى سياق هذه المجموعة

1- التطبيق الاول : شرح طريقة عمل مستعرض صور رائع بال css3

2- التطبيق الثانى : شرح طريقة عمل سلايد شو بال jQuery

http://www.mtwer.com/ar/wp-content/uploads/DS.png

موعدنا اليوم مع
التطبيق الثانى: وهو شرح طريقة اضافة رائعة للجى كويرى وهي imageLens

http://s19.postimage.org/3wcowvker/0...4_05_03_58.jpg

مثال على تطبيقنا لليوم

من هنا

ويمكنكم تحمل ملفات التطبيق من المرفقات

http://www.mtwer.com/ar/wp-content/uploads/DS.png

ولنبدأ الشرح طريقة باسم الله الرحمن الرحيم

اولا: تركيب installة html الاساسية

index.html

رمز PHP:

<html> <head><title>AHMED SWAILM - EGYPTtitle> <meta name="twitter:site" content="@ahmed_swailm"> <meta name="twitter:url" content="http://twitter.com/ahmed_swailm"> <link rel="stylesheet" href="css/main.css" type="text/css" /> <script src="js/jquery-1.5.2.min.js"> MTWER.COM - AHMED SWAILM

http://www.mtwer.com/ar/wp-content/uploads/DS.png

شرح طريقة النقاط الاساسية فى ملف الاندكس

ملفات الجى كويرى الممعتمد عليه التطبيق

رمز PHP:

<script src="js/jquery-1.5.2.min.js">

الصور المستخدمة فى العرض وهى موجودة فى مجلد data_images

رمز PHP:

<div class="example"> <img id="img_01" src="data_images/img1.jpg" width="350" height="262" /> <img id="img_02" src="data_images/img2.jpg" width="350" height="262" /> <img id="img_03" src="data_images/img3.jpg" width="350" height="262" /> <img id="img_04" src="data_images/img4.jpg" width="350" height="262" /> div>

http://www.mtwer.com/ar/wp-content/uploads/DS.png

ثانيا : ملفات JQuery

js/jquery.imageLens.js

رمز PHP:

/* ahmed swailm */ (function ($) { $.fn.imageLens = function (options) { var defaults = { lensSize: 100, borderSize: 4, borderColor: "#888" }; var options = $.extend(defaults, options); var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize) + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize) + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor + ";background-repeat: no-repeat;position: absolute;"; return this.each(function () { obj = $(this); var offset = $(this).offset(); // Creating lens var target = $(" ").appendTo($(this).parent()); var targetSize = target.size(); // Calculating actual size of image var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src"); var imageTag = ""; var widthRatio = 0; var heightRatio = 0; $(imageTag).load(function () { widthRatio = $(this).width() / obj.width(); heightRatio = $(this).height() / obj.height(); }).appendTo($(this).parent()); target.css({ backgroundImage: "url('" + imageSrc + "')" }); target.mousemove(setPosition); $(this).mousemove(setPosition); function setPosition(e) { var leftPos = parseInt(e.pageX - offset.left); var topPos = parseInt(e.pageY - offset.top); if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) { target.hide(); } else { target.show(); leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1)); topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1)); target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' }); leftPos = String(e.pageX - target.width() / 2); topPos = String(e.pageY - target.height() / 2); target.css({ left: leftPos + 'px', top: topPos + 'px' }); } } }); }; })(jQuery);

http://www.mtwer.com/ar/wp-content/uploads/DS.png

كيق استخدم هذة العدسة فى موقعى ؟

الجواب:

اولا ارفق ملفات الجي كويرى هذة بمنطقة الهيد فى موقعك

رمز Code:

http://www.mtwer.com/ar/wp-content/uploads/DS.png

1- اذا كنت تستخدم صورة عادية ولي مصغرات (thumbnail)

استخدم هذا الكود code

رمز Code:
$("#img_01").imageLens();

http://www.mtwer.com/ar/wp-content/uploads/DS.png

2- اذا كنت تستخدم المصغرات وتريد ان تظهر العدسة الصورة الاصلية

استخدم هذا الكود code

رمز Code:
$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

ملاحظة : قمنا باضافة صورتين المصغرة والصورة الاصلية

http://www.mtwer.com/ar/wp-content/uploads/DS.png

3- بامكانك تحديد حجم واتساع العدسة باستخدام الكود code الاتى

رمز Code:
$("#img_02").imageLens({ lensSize: 200 });

http://www.mtwer.com/ar/wp-content/uploads/DS.png

4- يمكنك ايضا وضع اطار للعدسة وتحديد لون حدودة باستخدام الكود code الاتى

رمز Code:
$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

http://www.mtwer.com/ar/wp-content/uploads/DS.png

اخوانى الكرام اعضاء مطور وزاورة الى هنا ينتهى هذا التطبيق

وتبقى دورتنا ودروسنا مستمرة ان شاء الله تعالى

وانا حاضر لاى سؤال او استفسار

شكرا لكل من ساهم فى هذة الدورة ولو معنويا

شكرا لكم وانتظرونا فى معهد الحصريات : مطور

التعديل الأخير كان بواسطة EGYJOOMLA; 25 - 07 - 2014 الساعة 15:21

ألعاب الأندرويد مجانا و حصريا

الملفات المرفقة [TR]
http://www.traidnt.net/vb/images/attach/zip.gif التطبيق الثالث.zip (258.2 كيلوبايت, عدد مرات المشاهدة 37 مرة) [/TR]

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©