بسم الله الرحمن الرحيم، درس اليوم تطبيق لفكرة جميلة ، لعرض آخر صور ، اعمال ، منتجات ، أي صور من أي نوع ، يمكن عرضه في سلسلة متناسقة ، معرض لعدد معين من الصور ، التي تظهر بشكل متناسق و منتظم ، يمكنني أن اتحكم في اجتاه سيرها ، و سرعتها ، و عدد الصور التي تظهر للزائر ، سأحاول أن أشرح طريقة الاستعمال ، من ناحية ( static ) و كذلك من ناحية ( dynamic)

مثال : Demo

لزيارة صفحة المثال تفضل من هنا

الشرح :

كود قائمة الصور الجامد :

<a class="wrapper" href="http://fez-soft.net" title="Apple">
	<img class="logo" id="apple" src="images/12.gif" alt="Apple" />
</a>
<a class="wrapper" href="http://fez-soft.net" title="Firefox">
	<img class="logo" id="firefox" src="images/14.gif" alt="Firefox" />
</a>
.
.
.

لتجنب التعب حاولت ألا تكون القائمة ul حتى لا تأخذ لنا متسعا خلال التنسيق css و نحتاج إلى جعلها عادية ، سميته جامد لأنه لا يتغير إلا إذا تم التعديل على الصور يدويا ، وهذا متعب جدا ، فلنحاول أن نضع الحل الديناميكي لكود php ،

< ?php
 
/**
 * @author Fez-Soft
 * @copyright 2009
 */
 
include('config.php'); 
$table='nom_table'; 
$i=0;
$sql=mysql_query("select* from `".$table."` order by id desc limit 8");
while( $row=mysql_fetch_array($sql)){
	echo "<a class='wrapper' href='".$lien."' title='".$titre."'><img class='logo' src='".$image."' alt='".$alt."' />";
	$i++;
}
 
?>

• nom_table : اسم الجدول من القاعدة .
• $lien : متغير رابط الذي يأخذني عند الضغط على الصورة .
• $image : متغير رابط الصورة.
• $titre : متغير الوصف .
• $alt : متغير وصف الصورة alt .

كذلك حددث عدد الصور التي يتم استخراجها من الجدول بـ 8 ، في :

$sql=mysql_query("select* from `".$table."` order by id desc limit 8");

تنسيقات css

.js-disabled img { 
	width:100px; 
	height:100px; 
	display:block; 
	float:left; 
	margin:30px 0 0; 
}
 
#outerContainer { 
	width:542px; height:202px; margin:auto; position:relative; 
}
 
#imageScroller { 
	width:542px; 
	height:202px; 
	position:relative; 
	background:#E6ECAE;
}
#viewer { 
	width:522px; 
	height:182px; 
	overflow:hidden; 
	margin:auto; 
	position:relative; 
	top:10px; 
}
#imageScroller a:active, #imageScroller a:visited { 
	color:#000000; 
}
#imageScroller a img { 
	border:0; 
}
#controls { 
	width:534px; 
	height:47px; 
	background:url(images/controlsBG.png) repeat-x center center; 
	position:absolute; 
	bottom:4px; 
	left:4px; 
	z-index:10;	
}
#controls a { 
	width:37px; 
	height:35px; 
	position:absolute; 
	top:3px; 
}
#controls a:active, #controls a:visited { 
	color:#0d0d0d; 
}
#title { 
	color:#ffffff; 
	font-family:arial; 
	font-size:100%; 
	font-weight:bold; 
	width:100%; 
	text-align:center; 
	margin-top:10px; 
}
#rtl { 
	background:url(images/rtl.png) no-repeat; 
	left:100px; 
}
#rtl:hover { 
	background:url(images/rtl_over.png) no-repeat; 
	left:99px; 
}
#ltr { 
	background:url(images/ltr.png) no-repeat; 
	right:100px; 
}
#ltr:hover {
	background:url(images/ltr_over.png) no-repeat; 
}

شيء عادي جدا ،
كود الجافا سكربت ، هنا ، يمكنك قراءة التعليقات من خلال الملف للمهتمين ، و أعتذر لكونها باللغة الفرنسية ، لأنني لاحظت أنني لما اكتبها بالعربية تظهر على شكر رموز .

ملاحظات اخيرة :

• التطبيق يعتمد بشكل أساسي على مكتبة jQuery لذلك لا تنس اسدعاء ملفها في وسم head
• بالنسبة لتغيير الاتجاه ، جعلتها ممكنة للزائر ، يالضغط على الزرين ، يمين و يسار ، بالاعتماد عل حدث click ، لو اردت تغييرها لمجرد مرور المأشر على السهم ، ما عليك سوى استبدال الحدث click بـالحدث mouseover من الأسطر التالية من التطبيق :

  //changer la dirction du trajectoire
  $("#ltr").live("click", function() {
  	$("div#container").stop(true);
  	$("div#container").removeClass("rtl").addClass("ltr");
  	var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
  	var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
  	var newDuration = distanceLeft / speed;
  	animator($("div#container"), newDuration, "ltr");
  });
  $("#rtl").live("click", function() {
  	$("div#container").stop(true);
  	$("div#container").removeClass("ltr").addClass("rtl");
  	var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
  	var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
  	var newDuration = distanceLeft / speed;
  	animator($("div#container"), newDuration, "rtl");
  });

  ففي هذا السطر :

  $("#rtl").live("click", function() {

  نستبدلها بهذه :

  $("#rtl").live("mouseover", function() {

  وهكذا ..

• التحكم في سرعة العرض : بالتعديل في السطر التتالي من الملف :

  // la durée avec les secondes 2000 = 2s pour chaque image
  var duration = $(".wrapper").length * 2000;

  2000 تعني ثانيتين ، و كلما زاد عدد الثوان كلما قلت السرعة

التحميل : Download

لتحميل التطبيق بعجره و بجره ، تفضل من هنا .

حظا موفقا للجميع ، و دمتم في طاعة الله، و صلى الله وسلم وبارك على محمد وعلى آله و صحبه و سلم تسليما كثيرا ، و السلام عليكم ورحمة الله وبركاته .

هذه التدوينة نُشرت في الأحد, 25 أكتوبر, 2009 عند 11:04 م و مصنفة تحت تصنيف JavaScript, PHP. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :javascript, jquery, تطبيق, صور, معرض