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

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

الطريقة الأولي: هي أنه حين ينقر الزائر علي أي صورة من شريط الصور فسيلاحظ إختفاء الصور وظهور الصورة التي نقر عليها بأبعاد كبيرة و تري بوضوح من بعد 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJdtdPexzIqNjzrVcpaspSOiD6PS4Remrxo_2Uf9x_L2yG9eM5cBlZRhxlRa4N6WUVxM-inMrqPmwIUEUaBbNzCb4aDKJv5ZJ8Q4eFm3vrCDEimXDIGt07uutKmvVQop8AeqSxDMCSzI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJdtdPexzIqNjzrVcpaspSOiD6PS4Remrxo_2Uf9x_L2yG9eM5cBlZRhxlRa4N6WUVxM-inMrqPmwIUEUaBbNzCb4aDKJv5ZJ8Q4eFm3vrCDEimXDIGt07uutKmvVQop8AeqSxDMCSzI/s1600/go0uoqb22.jpg" />
<font color="#FFFFFF">العودة</font><span> </span>
</div>
أستبدل عنوان مدونتي برابط الصفحة التي تريد من الزائر الإنتقال إليها

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

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

تعليقات

  1. أرجو إعلامي بطريقة جعلها علي الصفحة الرئيسية ؟

    ردحذف
  2. الطريقة الوحيدة هي من إعدادات ثم تنسيق و في عدد الرسائل أختر 0 أو 1 ثم أذهب إلي تصميم ثم أختر أداة جديدة ثم ضع الكود السابق و عدل عليه أي تستطيع وضع 20 رسالة مثلا

    ردحذف
  3. Veeeery nice
    like it
    keep On the good work

    ردحذف
  4. يارب الباك من نصيبي الله

    ردحذف
  5. Они там в конец охренели![url=http://argumenti.ru/parthers/Remont_ipad_tehniki_Apple_s_garantiej_kachestva_bystro_i_nadezhno]http://smi2.ru/asyaporubova/c1519192/[/url] http://smi2.ru/asyaporubova/c1519192/ http://smi2.ru/asyaporubova/c1519192/

    ردحذف
مرحب بك للتعليق و مشاركة رأيك

التسميات

أخبار ، news إدارة الإجهاد في العمل أدسنس أدوات أرخص إشتراك مدفوع إصلاح خطأ إضافات بلوجر أفضل أفضل 10 أفضل 4 أفضل 5 أفضل 7 إكس أكواد أكواد الألوان الإسلام البحث عن وظائف البحث عن وظيفة البرامج التسويق بالعمولة التصميم التصوير التصوير الاحترافي الجزائر الحماية الذكاء الاصطناعي، تطبيقات ،أندرويد ،الآيفون الربح من الانترنت الربح من النت الشراء عبر الإنترنت في الجزائر العمل العمل والتوظيف ألوان الوان أندرويد إيثريوم أيردروب بايبال بايبال، ماستر كارد،فيزا،تفعيل،paypal بدون رأس مال بلوجر بيتس ستوديو 3 بيتس ستوديو برو بيتكوين تبادل إعلاني تخفيضات،كوبون،شراء،ربح تدوينة تطيقات تعيين مستشار وظيفي تواصل اجتماعي توظيف توظيفـ، سيرة ذاتية تويتر جي كويرى حد إدخال الأحرف حد إدخال الأحرف في ChatGPT حساب حساب فاتورة الكهرباء خطأ خطأ 740 على ويندوز خطأ ويندوز دراسة دروس بلوجر ر ربح ساعة سكربتات مواقع سلسلة كيف تربح من مدونتك سوناطراك شرح شرح بالفيديو شركات استضافة شركات استضافة مواقع صور طرق طريقة طريقة إصلاح عام 2023 عامل مستقل عملات غوغل فاتورة الكهرباء فايس بوك فوركس في فيديوهات ترفيه فيس بوك قابلة للطي قوالبي كاميرا كانفا كتب تعليمية كسب المال كمبيوتر كيفية الشراء من Aliexpress ليتكوين مجانيات محفظة مراجعة مسابقات مستشار وظيفي مشاكل بلوجر مشكلة مشكلة ChatGPT مُصور مُصور هاوٍ مصورًا محترفًا مقارنة مقارنة،هواوي،آبل،آيباد إير مقالات منصات منوعات مواقع نتفليكس نصائح نصاب هاوٍ هواتف هواتف قابلة للطي هواوي واتش 4 برو وظيفة وورد بريس ويندوز ويندوز 10 ويندوز 11 يوجوف Aliexpress bitsler Chatgpt ChatGPT Plus fiverr GPT-4 HTML jQuery youtube

نموذج الاتصال

إرسال