ط´ط±ط* ط¹ظ…ظ„ ط¹ط¯ط³ط© طھظƒط¨ظٹط± ط§ظ„طµظˆط± ط¨ط§ظ„ط¬ظ‰ ظƒظˆظٹط±ظ‰ imageLens








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

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

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




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

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

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


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





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







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

من هنا


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





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

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

index.html


رمز PHP:
<code style="white-space:nowrap"> <code>
<html>
<head><title>AHMED SWAILM - EGYPT</title>
<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"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/main.js"></script>



</head>
<body>
<div class="example">
<h3 align="center"><a href="#">MTWER.COM </a>-<a href="#"> AHMED SWAILM</a></h3>

<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>

<div style="bottom:0;position:fixed;">
<hr style="clear:both;" />

</div>
</body>
</html>
</code> </code>






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


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

رمز PHP:
<code style="white-space:nowrap"> <code> <script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/main.js"></script>
</code> </code>


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


رمز PHP:
<code style="white-space:nowrap"> <code> <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>
</code> </code>




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

js/jquery.imageLens.js


رمز PHP:
<code style="white-space:nowrap"> <code>
/*
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 = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'>&nbsp;</div>").appendTo($(this).parent());
var targetSize = target.size();

// Calculating actual size of image
var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";

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);
</code> </code>





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

الجواب:

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

رمز Code:
<script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;></script> <script src=&quot;jquery.imageLens.js&quot; type=&quot;text/javascript&quot;></script>





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

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

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




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

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

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

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






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

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





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


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




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

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


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


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



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













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


الملفات المرفقة [TR]
التطبيق الثالث.zip (258.2 كيلوبايت, عدد مرات المشاهدة 37 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©