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

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

الطريقة الأولي: هي أنه حين ينقر الزائر علي أي صورة من شريط الصور فسيلاحظ إختفاء الصور وظهور الصورة التي نقر عليها بأبعاد كبيرة و تري بوضوح من بعد 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(){
   $("#gallery img").click(function(){
      $("#gallery").hide("slow");
      $("#show_it").show("slow");
      var src = $(this).attr("src");
      $("#show_it img").attr("src",src);

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

</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="#" />    
</p></div>

<div id="show_it" class="box">
<p align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXxC0GRZZpaHQB_aQB_0j01VXT1Sry3Ze60SEVtq560072WLUUJifSzyME9xgplU8b0oFqrIdIcY2PtVGttR6IMXTxYEaaw190TmZjQxLaYqw-1TPYIZ3e7Ecw5YEGizI2VIYA34CAR0/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>    
</div>

<div id="show_it" class="box">
<p align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXxC0GRZZpaHQB_aQB_0j01VXT1Sry3Ze60SEVtq560072WLUUJifSzyME9xgplU8b0oFqrIdIcY2PtVGttR6IMXTxYEaaw190TmZjQxLaYqw-1TPYIZ3e7Ecw5YEGizI2VIYA34CAR0/s1600/go0uoqb22.jpg" />
<font color="#FFFFFF">العودة</font><span> </span>
</div>

أستبدل عنوان مدونتي برابط الصفحة التي تريد من الزائر الإنتقال إليها

ملاحظة : إذا كنت تريد عدد قليل من الصور أحذف

<img src="#" /></a>
<a href="http://esrare.blogspot.com">

أما إذا أردت أن تضيف صورا فأضف الكود السابق

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

By glok

Similiar tagsإضافات بلوجر