الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

طلب مساعدة في استداع الصور

بدأه samy9o في 17 يناير 2012 · 6 رد · 984 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام علكيم ورحمة الله وبركاته

اريد استداعاء الصور من مجلد image عن طريق جكوري او اجاكس طبعا في سكربت مبرمج php

طيب واحد راح يخبرني ليش ما تعمل استداعاء php عادي ماختلفنا بس الجكوري و الأحاكس دقيق

لانو لحضت احينا لم اعمل تحديث الصفحة يظهر بعض الصور والبعض الاخر ما يظهر تم تعمل تحديث تجد انو جميع الصور قد ظهر تم بعد دقائق تعمل تحديث جديد

تلقى صورة او صورتين لم تظهر

1140793579.png

بينا في الجكوري والاجاكس فيه اكواد تجيب الصور اجباري ويتحقق انو الصور احضرت واذا لم تجضر في ذالك المكان يبقى

يحمل الصور عن طريق ايقونات متل هذه

ajaxLoad.gif

هذا متال على طلبي المثال

ياريت يكون شرح دقيق لي طلبي

علما اني استدعيت الصور بهذه الطريقة


print '<a href="/Images/'.$o.'" rel="lightbox[prf]"><img src="/i_mage.php?filename=up/'.$p.'&width=100&height=80" width="100px" height="80px" border="" alt="'.$name.'" style="margin:5px 5px 5px 5px"></a>';

?>
<?php

#2

اخوي الموضوع ماله علاقة لا بجيكوري ولا بـ PHP

اذا انت وضعت روابط الصور بشكل صحيح وكذلك خط الانترنت عندك شغال تمام ماراح تظهر لك اي مشاكل

عموما ً بالنسبة للصورة التحميل الي تظهر قبل ظهور الصورة ممكن تسويها بأكثر من طريقة

الطريقة السهله انت تسوي خلفية التحميل بالـ CSS

شوف المثال التالي :

<html>
	<head>
		<style type="text/css">
			#image
			{
				background:url(images/ajaxLoad.gif);
				width:100px;
				height100px;
			}
		</style>
	</head>

	<body>
		<div id="image">
			<img id="im1" src="images/img1.jpg" />
		</div>
	</body>
</html>

لاحظ الكود السابق سويت بلوك الخلفية حقته عبارة عن صورة التحميل ومحتواه عبارة عن الصورة , لم استخدم لا جيكوري ولا جافا سكربت

فقط انت تأكد انت حاطط رابط الصورة بشكل صحيح وتأكد من الحروف الصغيرة والكبيرة JPG يفرق عن jpg

M.B.O

Mohamed Bin Othman

إبن المكلا

يابني البشر ماذا فعلتم بالبشر !!

إسـألـنـي

#3
M.B.O كتب:

اخوي الموضوع ماله علاقة لا بجيكوري ولا بـ PHP

اذا انت وضعت روابط الصور بشكل صحيح وكذلك خط الانترنت عندك شغال تمام ماراح تظهر لك اي مشاكل

عموما ً بالنسبة للصورة التحميل الي تظهر قبل ظهور الصورة ممكن تسويها بأكثر من طريقة

الطريقة السهله انت تسوي خلفية التحميل بالـ CSS

شوف المثال التالي :

<html>
	<head>
		<style type="text/css">
			#image
			{
				background:url(images/ajaxLoad.gif);
				width:100px;
				height100px;
			}
		</style>
	</head>

	<body>
		<div id="image">
			<img id="im1" src="images/img1.jpg" />
		</div>
	</body>
</html>

لاحظ الكود السابق سويت بلوك الخلفية حقته عبارة عن صورة التحميل ومحتواه عبارة عن الصورة , لم استخدم لا جيكوري ولا جافا سكربت

فقط انت تأكد انت حاطط رابط الصورة بشكل صحيح وتأكد من الحروف الصغيرة والكبيرة JPG يفرق عن jpg

اهلا اخي M.O.B

سويت لقتلي وما شتغل الكود

وبعد التعديل عليه صار تظهر الصور load.gif كخلفية لصورة اي انه تظهر صورتنين في نفس القوت واحدة في الاعلى و load خلفها

كما اني ارى ان ماقلته غير منطقي انت قلت انه يمكن عمل هذا ب css

طيب كيف راح تعرف الصورة loag.gif انه قد تم احضار الصور لتختفي هي وتظهر الصور الاخرى بعد ان تم تحميلها الصور التى من المفترض ان تظهر !!!

كما اني راجعت اكواد lightbox jquery ووجدت انه كما كنت متوقع في الاول يلزم كود جافا سكربت يتحكم في هذه المهة

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

يرجي التوضيح وبارك الله فيك

#4

اخي ذكرت لك انك ممكن تستخدم اكثر من طريقة , الطريقة التي ذكرتها لك تعتبر اسهلها

راح اوضح لك فكرتها بالضبط , هو راح يكون في بلوك div او ايا ً كان , الخلفية تبعة راح تكون صورة التحميل

ثم محتوى البلوك راح تكون الصورة الي هو تاق img

طبعا ً يفترض ان يكون حجم صورة التحميل صغير حتى ينعرض بسرعة , لذا عند استعراض الصفحة يتظهر صورة التحميل التي في خلفية البلوك اولا ً

ثم بعدها ستظهر الصورة المطلوبة , مستعرض الصفحة سيعتقد ان الصورة تتحمل وهو في الحقيقة هما صورتين , صورة في الخلفية وصورة في المقدمة , ان شاء الله تكون وضحت الفكرة

اما بالنسبة لعملية احضار الصورة والتأكد انه تم جلب الصورة

سأوضح لك الفكرة التي تتم ببساطة , في البداية عند طلب الصفحة لاول مره يتم جلب كود HTML فيه صورة التحميل ولاتوجد فيه اي صور اخرى

ثم بعد جلب الصفحة يتم تنفيذ طلب اخر Request الى السيرفر عن طريق الاجاكس

يتم جلب الصورة المطلوبة , وعند وصول الرد من السيرفر Response يتم استبدال رابط صورة التحميل برابط الصورة التي تم جلبها , ويتظهر الصورة للمستخدم

بالنسبة للزائر يعتقد انه يتم تحميل الصورة , لكن الامر ليس كذلك بالضبط , بإمكانك وضع اي شي بدل صورة التحميل

طبعا ً عملية التحقق من ان الصورة وصلت ام لا , فعليا ً لايتم التحقق من الصورة ولكن يتم التحقق من الطلب Request المرسل الى السيرفر في حالة تم الطلب وجاء الرد تكون العملية تمت في حالة اي مشاكل يتم نفيذ امر اخر .

انظر للكود التالي حتى تتضح لك الصورة :

<html>
	<head>
		<script src="jQuery.js" type="text/javascript" /></script>
		<script type="text/javascript">

				function getImg(src,id)
				{
					$.ajax({
						url : src,
						error: function()
						{
							$("#"+id).attr('src','images/error.png');
						},
						success : function()
						{
							$("#"+id).attr('src',src);
						}
					})
				}

				// get image 1
				getImg('images/img1.jpg','im1');

				// get image 2 
				getImg('images/img2.jpg','im2');

				// get image 3
				getImg('images/img3.jpg','im3');
		</script>

	</head>

	<body>
			<img id="im1" src="images/ajaxLoad.gif" /> <br />
			<img id="im2" src="images/ajaxLoad.gif" /> <br />
			<img id="im3" src="images/ajaxLoad.gif" /> <br />
	</body>
</html>

لاحظ في فرق مابين الطريقة الاولى الي عطيتك اياها والطريقة الثانية هذه , الطريقة الاولى يتم تنفيذ الطلب Request لجلب روابط الصورة تلقائي بدون انا ما اتدخل في جلب الصور

لكن الطلب الثاني انا اطلبه بشكل يدوي واعرضه

الطريقة الثانية ربما تكون افضل في التحقق من انه تم جلب جميع الصورة , لكن قد تكون مطولة وربما تكون مبهمه اذا كنت لا تلم بهذه الامور مثل الاجاكس والجافاسكربت

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

الكود الذي وضعته لك بسيط جدا ً بإمكانك ان تطوره حسب ما تريد هذا يعتمد على مدى فهمك للجافاسكربت

موفق ان شاء الله

1

M.B.O

Mohamed Bin Othman

إبن المكلا

يابني البشر ماذا فعلتم بالبشر !!

إسـألـنـي

#5

عمل ممتاز M.O.B بارك الله فيك وجزاك الله الفردوس يارب شرح كافي واوافي بانسبة ل Request هذا يتم

التخاطب به مع http

طيب ماذا عن لو كان لدينا مجلد لانو انت شرحت احضار كل صورة على حدة

ياريت تشرح لو كان عندي مجلد واحد به مجموعة من الصور والصور تم طلبها كلها عن طريق php يعني لازم اعمل div

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

 
                             getImg('images/img1.jpg','im1');

                                // get image 2 
                                getImg('images/img2.jpg','im2');

                                // get image 3
                                getImg('images/img3.jpg','im3');

مو معقول اني اكتبوااا كل الصور التى هي داخل هذا المجلد ؟؟ :sad:

كما ياريت تشرح لي متى ستظهر الصورة error

عموما لازلت مبتدا في البرمجة لانو مستوي في php في تـحسن مستمر وكما تعمل لا طعم ل php وحدها :lol:

تم تعديل هذه المشاركة بواسطة samy9o في 18 يناير 2012 في 04:49

#6
اقتباس
طيب ماذا عن لو كان لدينا مجلد لانو انت شرحت احضار كل صورة على حدة

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

بخصوص جلب اكثر من صورة نفذ التالي :

var imgNum = 3;

								for(i = 1 ; i <= imgNum ; i++)
								{
									getImg('images/img'+i+'.jpg','im'+i);
								}

اقتباس
كما ياريت تشرح لي متى ستظهر الصورة error

تظهر اذا كان في خطأ في الـ Request

جرب مثلا ً تضع مسار لصورة غير موجودة مثل

getImg('images/dasdasdasdsad.jpg','im1');

جرب وشوف اي يطلع لك

M.B.O

Mohamed Bin Othman

إبن المكلا

يابني البشر ماذا فعلتم بالبشر !!

إسـألـنـي

#7
M.B.O كتب:

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

بخصوص جلب اكثر من صورة نفذ التالي :

var imgNum = 3;

								for(i = 1 ; i <= imgNum ; i++)
								{
									getImg('images/img'+i+'.jpg','im'+i);
								}

تظهر اذا كان في خطأ في الـ Request

جرب مثلا ً تضع مسار لصورة غير موجودة مثل

getImg('images/dasdasdasdsad.jpg','im1');

جرب وشوف اي يطلع لك

شكراااا لك اخي M.O.B واسف كتيراااا لتأخر في الرد

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

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

مواضيع مشابهة