شرح حصري : عمل شريط صور يتحرك بطريقة فلاشية متطورة

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

الطريقة الأولي: هي أنه حين ينقر الزائر علي أي صورة من شريط الصور فسيلاحظ إختفاء الصور وظهور الصورة التي نقر عليها بأبعاد كبيرة و تري بوضوح من بعد 5 أمتار من الكمبيوتر كما هناك زر للعودة إلي شريط الصور و هذا النموذج لكي تفهم عما اتكلم هذا نموذج للمعاينة

http://ikhtibarat.blogspot.com

أعجبك الشريط أليس كذلك و هذا الشريط لعرض الصور فقط

الطريقة الثانية:نفس الشريط السابق لكنه ينقلك إلي صفحة أو تدوينة تريد أن ينتقل الزائر إليها بمجرد النقر علي الصورة لكن الأهم أنه قبل الإنتقال ستظهر الصورة مكبرة لمدة 5 ثوان



و الآن مع شرح التطبيق

تطبيق الطريقة الأولي
من لوحة تحكم المدونة أضغط علي تصميم ثم علي تحرير html 
أبحث عن الوسم التالي :
</head>
ضع الكود التالي قبله :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script>
$(document).ready(function(){
   $(&quot;#gallery img&quot;).click(function(){
      $(&quot;#gallery&quot;).hide(&quot;slow&quot;);
      $(&quot;#show_it&quot;).show(&quot;slow&quot;);
      var src = $(this).attr(&quot;src&quot;);
      $(&quot;#show_it img&quot;).attr(&quot;src&quot;,src);

    });
   $(&quot;#show_it span&quot;).click(function(){
      $(&quot;#show_it&quot;).hide(&quot;slow&quot;);
      $(&quot;#gallery&quot;).show(&quot;slow&quot;);
    });
});

</script>
<style>
.box{
  padding: 10px;
  background: #333333;
  border:#000000 2px solid;
  width: 430px;
}
#gallery img{
  width:100px;
  height: 100px;
  background: #333333;
  border:#000000 2px solid;
  cursor: pointer;
}
#show_it img{
  width:430px;
  height: 330px;
  background: #333333;
  border:#000000 2px solid;
}
#show_it span{
  cursor: pointer;
  color:#FFF;
}
#show_it{
    display: none;
}


</style>
 قم بحفظ القالب ثم أنتقل إلي عناصر الصفحة
قم بالضغط علي إضافة أداة ثم أضغط علي  HTML/JavaScript
قم بوضع الكود التالي بدون عنوان
<div class="box" id="gallery" style="width: 902px; height: 126px">
<p align="center">
<img src="#" />

<img src="#" />
<img src="#" width="450" height="300" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />&nbsp;&nbsp;&nbsp;&nbsp;
</p></div>

<div id="show_it" class="box">
<p align="center">
<img src="http://2.bp.blogspot.com/-Q9NBkFa6DfE/Ths3oeL8VRI/AAAAAAAAAPo/pdnUb32rdKA/s1600/go0uoqb22.jpg" />
<span> العودة </span>
</p></div>
ملاحظة1: قم بتغيير ما باللون الأزرق # بروابط صورك التي تريد عرضها

ملاحظة2: بعد إختيارك موضع الشريط (أعلي الصفحة أم أسفلها ) قم بسحب الأداة إليها مصلما بالصورة

تطبيق الطريقة الثانية
عليك تطبيق كل الخطوات لكن عند عناصر الصفحة ضع الكود التالي 
<div class="box" id="gallery" style="width: 902px; height: 126px">
<p align="center"><a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" width="450" height="300" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
</div>

<div id="show_it" class="box">
<p align="center">
<img src="http://2.bp.blogspot.com/-Q9NBkFa6DfE/Ths3oeL8VRI/AAAAAAAAAPo/pdnUb32rdKA/s1600/go0uoqb22.jpg" />
<font color="#FFFFFF">العودة</font><span> </span>
</div>
أستبدل عنوان مدونتي برابط الصفحة التي تريد من الزائر الإنتقال إليها

ملاحظة : إذا كنت تريد عدد قليل من الصور أحذف
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
أما إذا أردت أن تضيف صورا فأضف الكود السابق

و أنتهت رحلتنا في هذا الدرس

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

الطريقة الأولي: هي أنه حين ينقر الزائر علي أي صورة من شريط الصور فسيلاحظ إختفاء الصور وظهور الصورة التي نقر عليها بأبعاد كبيرة و تري بوضوح من بعد 5 أمتار من الكمبيوتر كما هناك زر للعودة إلي شريط الصور و هذا النموذج لكي تفهم عما اتكلم هذا نموذج للمعاينة

http://ikhtibarat.blogspot.com

أعجبك الشريط أليس كذلك و هذا الشريط لعرض الصور فقط

الطريقة الثانية:نفس الشريط السابق لكنه ينقلك إلي صفحة أو تدوينة تريد أن ينتقل الزائر إليها بمجرد النقر علي الصورة لكن الأهم أنه قبل الإنتقال ستظهر الصورة مكبرة لمدة 5 ثوان



و الآن مع شرح التطبيق

تطبيق الطريقة الأولي
من لوحة تحكم المدونة أضغط علي تصميم ثم علي تحرير html 
أبحث عن الوسم التالي :
</head>
ضع الكود التالي قبله :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script>
$(document).ready(function(){
   $(&quot;#gallery img&quot;).click(function(){
      $(&quot;#gallery&quot;).hide(&quot;slow&quot;);
      $(&quot;#show_it&quot;).show(&quot;slow&quot;);
      var src = $(this).attr(&quot;src&quot;);
      $(&quot;#show_it img&quot;).attr(&quot;src&quot;,src);

    });
   $(&quot;#show_it span&quot;).click(function(){
      $(&quot;#show_it&quot;).hide(&quot;slow&quot;);
      $(&quot;#gallery&quot;).show(&quot;slow&quot;);
    });
});

</script>
<style>
.box{
  padding: 10px;
  background: #333333;
  border:#000000 2px solid;
  width: 430px;
}
#gallery img{
  width:100px;
  height: 100px;
  background: #333333;
  border:#000000 2px solid;
  cursor: pointer;
}
#show_it img{
  width:430px;
  height: 330px;
  background: #333333;
  border:#000000 2px solid;
}
#show_it span{
  cursor: pointer;
  color:#FFF;
}
#show_it{
    display: none;
}


</style>
 قم بحفظ القالب ثم أنتقل إلي عناصر الصفحة
قم بالضغط علي إضافة أداة ثم أضغط علي  HTML/JavaScript
قم بوضع الكود التالي بدون عنوان
<div class="box" id="gallery" style="width: 902px; height: 126px">
<p align="center">
<img src="#" />

<img src="#" />
<img src="#" width="450" height="300" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />
<img src="#" />&nbsp;&nbsp;&nbsp;&nbsp;
</p></div>

<div id="show_it" class="box">
<p align="center">
<img src="http://2.bp.blogspot.com/-Q9NBkFa6DfE/Ths3oeL8VRI/AAAAAAAAAPo/pdnUb32rdKA/s1600/go0uoqb22.jpg" />
<span> العودة </span>
</p></div>
ملاحظة1: قم بتغيير ما باللون الأزرق # بروابط صورك التي تريد عرضها

ملاحظة2: بعد إختيارك موضع الشريط (أعلي الصفحة أم أسفلها ) قم بسحب الأداة إليها مصلما بالصورة

تطبيق الطريقة الثانية
عليك تطبيق كل الخطوات لكن عند عناصر الصفحة ضع الكود التالي 
<div class="box" id="gallery" style="width: 902px; height: 126px">
<p align="center"><a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" width="450" height="300" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
<img src="#" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
</div>

<div id="show_it" class="box">
<p align="center">
<img src="http://2.bp.blogspot.com/-Q9NBkFa6DfE/Ths3oeL8VRI/AAAAAAAAAPo/pdnUb32rdKA/s1600/go0uoqb22.jpg" />
<font color="#FFFFFF">العودة</font><span> </span>
</div>
أستبدل عنوان مدونتي برابط الصفحة التي تريد من الزائر الإنتقال إليها

ملاحظة : إذا كنت تريد عدد قليل من الصور أحذف
<img src="#" /></a>
<a href="http://esrare.blogspot.com">
أما إذا أردت أن تضيف صورا فأضف الكود السابق

و أنتهت رحلتنا في هذا الدرس

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
abuiyad