[ط¯ط±ط³ ظ‚ظˆظٹ] ط·ط±ظٹظ‚ط© ظˆط¶ط¹ ط§ط´ط§ط±ط© ظ„ظˆط¯ظ†ط¬ ط*طھظ‰ ظٹطھظ… طھط*ظ…ظٹظ„ ط§ظ„طµظˆط±ط© ظƒط§ظ…ظ„ط©
السلام عليكم ورحمة الله وبركاته
رمضان مبارك
والله يبلغنا ليلة القدر ويتمها علينا
ويرزقنا الجنة قولوا امين
اخواني الكرام.. اليوم احضرت لكم شرح طريقة وضع اشارة لودنج لحد ما يتم تحميل الصورة كاملة
ثم تظهر الصورة
ملاحظة: انا قمت بترجمة الدرس مفصل وهو ليس من اعدادي الشخصي وهذا المصدر هنا
نيجي للمهم
الميزة هذي سنقوم بعملها عن طريق مكتبة الجي كويري الرائعة جدا
وهي على فكرة الطريقة سهلة جدا جدا وبتضفي جمال على الموقع
الان نيجي لطريقة العمل >> هذا هو المهم
بداية عليك تنزيل مكتبة الجي كويري وتضمنيها داخل صفحة العمل بالطريقة المعهودة
يمكنك تحميلها من الموقع الرسمي فهي مجاني freeة
jquery.com
في صفحة الhtml عليك بوضع الصور في لست list
ونعين ايدي معين لlist اللي عنا
وراح يكون الكود code على هذا الشكل
رمز PHP:
<code style="white-space:nowrap"> <code> <ul id="portfolio">
<li class="loading"></li>
<li class="loading"></li>
<li class="loading"></li>
</ul>
</code> </code>
ثم لا بد من اننا يجب ان نعطي تأثيرات css الخلابة على العمل لانه العمل بدونها ما راح يكون جميل وحتى يمكن ما يشتغل ...
المهم هذا كود code التنسيقات.. اللي بعرف لcss بقدر يعدل عليه
رمز PHP:
<code style="white-space:nowrap"> <code> <style type="text/css">
ul#portfolio { margin:0; padding:0; }
ul#portfolio li { float:left; margin:0 5px 0 0; width:250px; height:250px; list-style:none; }
ul#portfolio li.loading { background: url(spinner.gif) no-repeat center center; }
</style>
</code> </code>
الكود code هذا بتقدر تضعه في منطقة الهيد او البودي ما في مشكلة
الان الشي المهم هو كود code الجافاسكربت
هذا هو كود code الجافا سكربت
رمز PHP:
<code style="white-space:nowrap"> <code>
// DOM ready
$(function () {
// image source
var images = new Array();
images[0] = 'http://farm4.static.flickr.com/3293/2805001285_4164179461_m.jpg';
images[1] = 'http://farm4.static.flickr.com/3103/2801920553_656406f2dd_m.jpg';
images[2] = 'http://farm4.static.flickr.com/3248/2802705514_b7a0ba55c9_m.jpg';
// loop through matching element
$("ul#portfolio li").each(function(index,el){
// new image object
var img = new Image();
// image onload
$(img).load(function () {
// hide first
$(this).css('display','none'); // since .hide() failed in safari
//
$(el).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
$(el).remove();
}).attr('src', images[index]
;
});
});
</code> </code>
اظن ما عليك الا تغيير روابط الصور
ولو حبيت تضيف صور اكثر من هيك بتقدر بكل سهولة من خلال التعديل على المصفوفة في الجافاسكربت وعلى اللست اللي وضعنها اول العمل
واللي بيحب يشوف النتيجة انا وضعت مثال في اول الموضوع
واي استفسار انا جاهز ان شاء الله
التعديل الأخير كان بواسطة Hudaislam; 28 - 08 - 2014 الساعة 03:45
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
