صورة للنتجية النهائية
معاينة
سوف نقوم في مشروعنا هذا بإنشاء 3 ملفات وهي
index.html الصفحة الرئيسية
Style/Style.css ملف الأنماط CSS
Js/slider.js الملف الذي سوف نكتب فيه أوامر jQuery
بعد أن نقوم بإنشاء الملفات السابقة نقوم بربطها بملف index.html عن طريق إضافة الأسطر التالية بين وسمي Head
رمز PHP:
<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="Style/Style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js/slider.js"></script>
</code> </code>
لاحظ أننا قمنا بربط مكتبة jQuery أيضاً من خلال رابط ملف المكتبة من موقعها الرسمي أو بإمكانك تحميل المكتبة وربطها كما ربطنا ملف slider.js
الأسطر البرمجة في ملف index.php
رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
*
<head>
*
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[ معاينة ] برمجة عارض الصور المنزلقة Image Slideshow باستخدام jQuery و CSS</title>
<link rel="stylesheet" type="text/css" href="Style/Style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Js/slider.js"></script>
*
</head>
*
<body>
*
<div id="slider">
*
*<div id="sliderNextImg">التالي</div>
*<div id="sliderPreviousImg">السابق</div>
*
*<div id="ImgsWrapper">
*
*<div id="description"><div id="desContent"></div></div>
*
*<div id="scroll">
*<a href="http://photoshop.faressoft.org/?p=229"><img src="Images/01.jpg" alt="تصميم واجهة interface موقع بالفوتوشوب بتأثيرات ضوئية" /></a>
*<a href="http://www.faressoft.org"><img src="Images/02.jpg" alt="" /></a>
*<a href="http://www.faressoft.org"><img src="Images/03.jpg" alt="" /></a>
*<a href="http://www.faressoft.org"><img src="Images/04.jpg" alt="" /></a>
*</div>
*
*</div>
*
*<ul>
*<li>في هذا الدرس مفصل سوف أريك كيف تقوم بتصميم واجهة interface احترافية لموقع خاص بالمصممين ليعرضوا فيه أعمالهم ونبذة عنهم. أعتقد أنك سوف تتعلم الكثير من التقنيات الجديدة ...</li>
*<li>وصف 2</li>
*<li>وصف 3</li>
*<li>وصف 4</li>
*</ul>
*
</div>
*
</body>
*
</html>
</code> </code>
وكما تلاحظ فبإمكانك إضافة ما تشاء من الصور بداخل الطبقة scroll
رمز PHP:
<code style="white-space:nowrap"> <code> <div id="scroll">
<a href="http://photoshop.faressoft.org/?p=229"><img src="Images/01.jpg" alt="تصميم واجهة interface موقع بالفوتوشوب بتأثيرات ضوئية" /></a>
<a href="http://www.faressoft.org"><img src="Images/02.jpg" alt="" /></a>
<a href="http://www.faressoft.org"><img src="Images/03.jpg" alt="" /></a>
<a href="http://www.faressoft.org"><img src="Images/04.jpg" alt="" /></a>
</div>
</code> </code>
ولا تنسى أن تقوم بإضافة وصف لكل صورة بداحل الفقرات li
رمز PHP:
<code style="white-space:nowrap"> <code> <ul>
<li>في هذا الدرس مفصل سوف أريك كيف تقوم بتصميم واجهة interface احترافية لموقع خاص بالمصممين ليعرضوا فيه أعمالهم ونبذة عنهم. أعتقد أنك سوف تتعلم الكثير من التقنيات الجديدة ...</li>
<li>وصف 2</li>
<li>وصف 3</li>
<li>وصف 4</li>
</ul>
</code> </code>
نقوم الآن بإضافة محتويات الملف Style/Style.css
رمز PHP:
<code style="white-space:nowrap"> <code> #slider {
position:relative;
margin: 0 auto;
height:202px;
width:502px;
border:1px #8D8C8D solid;
background-color:#E1E1E0;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}
#ImgsWrapper {
position:relative;
height:188px;
width:488px;
margin:0 7px;
top:7px;
overflow:hidden;
}
#description {
position:absolute;
background-color:black;
width:100%;
bottom:0;
color:white;
text-align:right;
font-size:1em;
font-weight:bold;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#description #desContent {
margin:10px;
}
#slider a {
display:block;
height:188px;
width:488px;
}
#slider img {
border:0;
}
#slider #sliderNextImg, #slider #sliderPreviousImg {
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
#slider #sliderNextImg, #slider #sliderPreviousImg {
position:absolute;
background-color:white;
text-align:center;
height:24px;
width:50px;
top:50%;
margin-top:-12px;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:black;
cursor:pointer;
padding-top:5px;
visibility:hidden;
z-index:9999;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
#slider #sliderNextImg {
left:20px;
}
#slider #sliderPreviousImg {
right:20px;
}
#slider #sliderNextImg:hover, #slider #sliderPreviousImg:hover {
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
#slider ul {
display:none;
}
</code> </code>
سوف نتعرف على أهم الخصائص في هذا الملف
رمز PHP:
<code style="white-space:nowrap"> <code> overflow:hidden
</code> </code>
لإخفاء الأجزاء التي تخرج من حواف الطبقة، وهي أهم خاصية في برمجة عارض الصور فهي تمكنك من إخفاء الصور الأخرى التي لا تظهر في مربع عارض الصور.
رمز PHP:
<code style="white-space:nowrap"> <code> filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
</code> </code>
الخصائص السابقة تمكنك من ضبط شفافية أحد العناصر. كل خاصية من الخصائص السابقة متعلقة بمتصفح معين.
رمز PHP:
<code style="white-space:nowrap"> <code> -moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
</code> </code>
الخصائص السابقة تمكنك من إنشاء حواف دائرية للعناصر. كل خاصية من الخصائص السابقة متعلقة بمتصفح معين.
رمز PHP:
<code style="white-space:nowrap"> <code> display:none;
</code> </code>
عدم إظهار العنصر وعدم حجز مساحة له من التصميم.
نقوم الآن بالانتقال إلى أهم ملف وهو ملف Js/slider.js الذي سوف نكتب فيه أوامر jQuery
رمز PHP:
<code style="white-space:nowrap"> <code> $(document).ready(function(){
var imgHeight = 188;
var imgWidth = 488;
var imagesCount = $("#slider img").length;
var autoSlideShowTime = 5000;
var correntImg = 0;
var t=setTimeout("$('#sliderNextImg').trigger('click');",autoSlideShowTime);
function showDescription() {
$("#desContent").html($("#slider ul li").slice(correntImg, correntImg+1).html());
var descriptionHeight = $("#description").height();
$('#description').animate({opacity: 0.0, height: '0px'}, 1);
$('#description').delay(1000).animate({opacity: 0.5, height: '60px'}, 500);
}
showDescription();
$("#slider").hover(function() {
$("#sliderNextImg, #sliderPreviousImg").css("visibility","visible");
}, function() {
$("#sliderNextImg, #sliderPreviousImg").css("visibility","hidden");
})
$("#sliderNextImg").click(function() {
clearTimeout(t)
if (correntImg != imagesCount-1) {
correntImg += 1;
$('#scroll').animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 1000);
t=setTimeout("$('#sliderNextImg').trigger('click');",autoSlideShowTime);
} else {
correntImg = 0;
$('#scroll').animate({marginTop: "0px"}, 2000);
t=setTimeout("$('#sliderNextImg').trigger('click');",1000+autoSlideShowTime);
}
showDescription()
});
$("#sliderPreviousImg").click(function() {
clearTimeout(t)
if (correntImg != 0) {
correntImg -= 1;
$('#scroll').animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 1000);
} else {
correntImg = imagesCount - 1;
$('#scroll').animate({marginTop: (-(correntImg) * imgHeight) + "px"}, 2000);
}
t=setTimeout("$('#sliderNextImg').trigger('click');",autoSlideShowTime);
showDescription()
});
});
</code> </code>
سوف نقوم الآن بشرح طريقة أهم الأوامر المكتوبة
رمز PHP:
<code style="white-space:nowrap"> <code> $(document).ready
</code> </code>
هذا عبارة عن حدث يتم تنفيذه عندما تكون الصفحة جاهزة (عندما يكتمل تحميل أسطر HTML للصفحة).
في البداية قمنا بتعريف 5 متغيرات المتغير الأول يحتوي على ارتفاع الصور والثاني عرض الصور والثالث عدد الصور والرابع نضبط فيه المدة الزمنية التي يقوم فيها عارض الصور بالانتقال إلى الصورة التالية تلقائياً ( كل ثانية = 1000 ) أما المتغير الخامس فيحتوي على الصورة الحالية التي تظهر حالياً في عارض الصور وكما هو ملاحظ فإن الصورة الأولى رقمها 0 والثانية 1 وهكذا.
بعد ذلك قمنا باستخدام الأمر setTimeout لكي يقوم بتنفيذ أمر معين بعد مدة زمنية معينة وهي المدة الموجودة في المتغير autoSlideShowTime، والأمر الذي سوف ينفذه هو الضغط على sliderNextImg كما لو أنك ضغطته بنفسك.
رمز PHP:
<code style="white-space:nowrap"> <code> $("#desContent").html($("#slider ul li").slice(correntImg, correntImg+1).html());
</code> </code>
الأمر السابق يقوم بتغيير محتويات طبقة الوصف باستخدام الوظيفة html() فهو يقوم بضبط محتويات الفقرة li المقابلة للصورة التي يتم عرضها الآن فلو افترضنا أن الصورة التي يتم عرضها الآن رقمها (correntImg=0) فإن هذا السطر البرمجي سوف يضع محتويات الفقرة الأولى li بداخل طبقة الوصف desContent وكل ذلك يتم بالاستعانة بالمحدد slice الذي قوم بانتقاء الفقرة المطلوبة من بين الفقرات الأخرى اعتماداً على رقم الصورة الموجود في المتغير فلو كان رقم الصورة 0 فسيقوم المحدد بتحديد العنصر الذي يقع بين 0 و 1 وهو العنصر 0.
رمز PHP:
<code style="white-space:nowrap"> <code> $('#description').delay(1000).animate({opacity: 0.5, height: '60px'}, 500);
</code> </code>
الوظيفة delay تقوم بتنفيذ ما بعدها بعد مدة زمنية محددة والوظيفة animate أعتبرها من أهم ما يميز jQuery فهي تقوم بتغيير أحد خصائص العنصر تدريجياً خلال مدة زمنية معينة. فهي الآن تقوم بتغيير الشفافية حتى تصبح مساوية لـ 0.5 وتغيير الارتفاع حتى يصبح مساوياً لـ 60 بكسل خلال نصف ثانية ( كل ثانية = 1000 ) بمعنى أنك لو قمت بقياس الارتفاع في منتصف هذه المدة سوف تجده يساوي 30 بكسل لأنه يزيد حتى يصبح 60 بكسل خلال النصف ثانية.
[PHP] رمز PHP:
<code style="white-space:nowrap"> <code> $("#sliderNextImg, #sliderPreviousImg").css("visibility","visible");
</code> </code>
تقوم الوظيفة css بتغيير أنماط أي عنصر ففي السطر السابق تقوم بضبط الخاصية visibility إلى القيمة visible لزري التالي والسابق.
منقول من اكاديمية فارس سوفت