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

في درس اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب

نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

اولا مثال بسيط
ط¯ظٹظ…ظˆ طھطµظ…ظٹظ… ط¨ظ†ط± ط¨ظˆط§ط³ط·ظˆ JQuery

اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب


1- صفحة HTML

اولا ننشيء صفحة HTML عادية ثم نضيف الكود التالي
بين وسمي <body>
كود PHP:
                                <div class="content"
<
div id="ca_banner2" class="ca_banner ca_banner2"
      <
div class="ca_slide ca_bg2"
        <
div class="ca_zone ca_zone1"><!--الصورة العليا--> 
            <
div class="ca_wrap 
ca_wrap1"
>           
            <
img src="images/gs1.png" class="ca_shown" alt=""/> 
            <
img 
src
="images/gs2.png" alt="" style="display:none;"/></a> </div
        </
div
        <
div class="ca_zone ca_zone2"><!--صورة الوسط--> 
            <
div class="ca_wrap ca_wrap2"
            <
img src="images/gs3.png" class="ca_shown" alt=""/></a
            <
img src="images/gs4.png" alt="" style="display:none;"/></a> </div
        </
div
      </
div
      </
div
  
      <
div style="clear:both;"></div

  [
IMG]http://cdn5.tribalfusion.com/media/37536.gif[/IMG]    
      
<div
لاحظ اننا استخدمنا صورتين في كل عنصر

1- كود CSS


الكود مشروح ...
كود PHP:
     /*نمط الشعار*/
.ca_banner{
    
position:relative;
    
overflow:hidden;
    
background:#f0f0f0;
    
padding:10px;
    
border:1px solid #fff;
    
-moz-box-shadow:0px 0px 2px #aaa inset;
}
.
ca_slide{
    
width:100%;
    
height:100%;
    
position:relative;
    
overflow:hidden;
}
.
ca_zone{
    
position:absolute;
    
width:100%;
}
.
ca_wrap{
    
position:relative;
    
display:table-cell;
    
vertical-align:middle;
    
text-align:center;
}
.
ca_wrap img.ca_shown{
    
display:inline !important;
}
 
/*حجم البنر*/
.ca_banner2{
    
width:120px;
    
height:600px;
}
/*الخلفية*/
.ca_bg2{
    
background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.
ca_banner2 .ca_zone1{
    
top:10px;
    
left:0px;
}
.
ca_banner2 .ca_wrap1/*نفس الحجم*/
.ca_banner2 .ca_wrap2{
    
width:120px;
    
height:220px;
}
.
ca_banner2 .ca_zone2{
    
top:250px;
    
left:0px;

1- جافا سكريبت JavaScript

الان سوف نهيكل الخطوات في الخطوة الاحيرة من الدرس
عن طريق الجافا سكريبت الى خطوات
(خطوة1..خطوة2...)
عن طريق الكود
كود PHP:
     [{"to" "2"}, {"effect""zoomOutRotated-zoomInRotated"}],
[{
"to" "1"}, {}],
[{
"to" "2"}, {"effect""slideOutRight-slideInRight"}] 
في البنر المطروح كمثال
لدينا حركتين في كل عنصر
و 4 حركات كلية في البنر


كود PHP:
   <!-- كود الجافا سكريبت -->
    <
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script src="jquery.transform-0.8.0.min.js"></script>
    <script src="jquery.banner.js"
type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
 
      //4 حركات للبنر 
      $('#ca_banner2').banner({
        steps : [
            [
            //1 حركة :
            [{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}],
            [{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}]
            ],
            [
            //2 حركة:
            [{"to" : "1"}, {"effect":
"slideOutRight-slideInRight"}],
            [{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
            ],
            [
            //3 حركة:
            [{"to" : "2"}, {"effect":
"slideOutLeft-slideInLeft"}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
            ],
            [
            //4 حركة:
            [{"to" : "1"},
{"effect":"zoomOutRotated-zoomInRotated"}],
            [{"to" : "1"}, {"effect": "zoomOutRotated-zoomInRotated"}],
            ]
        ],
        total_steps    : 4,
        speed     : 2000
      });
      });
    </script> 
و هذه بعض الاوامر الاخرى التي يمكن استعمالها على البنر كحركات

* zoomOut-zoomInRotated
* zoomOutRotated-zoomInRotated
* zoomOut-zoomIn
* slideOutRight-slideInRight
* slideOutLeft-slideInLeft
* slideOutTop-slideInTop
* slideOutBottom-slideInTop
* slideOutTop-slideInBottom
* fadeOut-fadeIn commented
* fadeOut-zoomIn commented
* zoomOut-fadeIn commented

و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك

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