كود سلايدر احترافي بشكل انيق وبعدة صور

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف زائر في الثلاثاء سبتمبر 01, 2015 10:02 am


تذكير بمساهمة فاتح الموضوع :

كود سلايدر احترافي بشكل انيق وبعدة صور

صورة السلايدر


http://i62.tinypic.com/fc08s9.gif




الكود



الكود:
<style>
 #mcis { display: none;}
 #sliderFrame {
   background:#222;
   margin: 2px auto 20px;
   padding: 20px 20px 28px;
   position: relative;
   width: 620px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }
 #slider {
  width: 620px;
  height: 350px;
  background: #fff url(https://lh6.googleusercontent.com/-TghMlE2NjrY/U0ZhaCofIVI/AAAAAAAADuE/Y3WD45mnRDU/s32/preview.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
 }
 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
 }
 div.mc-caption-bg, div.mc-caption-bg2 {
  position: absolute;
  width: 100%;
  height: auto;
  padding: 0;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }
 div.mc-caption-bg {background-color: black;}
 div.mc-caption {
   background: url("https://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   color: #EEEEEE;
   font: bold 15px/30px tahoma;
   padding: 10px 0;
   text-align: center;
   z-index: 4;
 }
 div.mc-caption a { color: #FB0;}
 div.mc-caption a:hover { color: #DA0;}
 div.navBulletsWrapper {
  top:350px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }
 div.navBulletsWrapper div{
 background:#ccc;
 cursor: pointer;
 float: right;
 height: 9px;
 margin-left: 1px;
 overflow: hidden;
 vertical-align: middle;
 width: 87px;
 }
 div.navBulletsWrapper div.active { background:#1980E6;}
 #slider {
  transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
 }
 </style>
 <script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
 <div id="slider">
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 <a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
 </div></div>


شرح التعديل على السلايدر شو

الرقم  620 هو عرض السلايدر عدله في المرتين
الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
هذا #1980E6 هو لون السلايدر النشط

الإستخدام

استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر
استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة
اما كلمة عنوان الموضوع استبدلها بعنوان مناسب
انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود دة
الكود:
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>


 لتحصل على صور جديدة
في حالة الزيادة او النقصان شريط التنقل السفلي لن يكون مظهره مضبوط لذلك عدل الرقم 87
ان زدت الصور قم بتقليل الرقم حتى تصغر مساحة ازرار التنقل وتستوعب الصور الجديدة دون تشوه
اما ان قللت عدد الصور زد الرقم حتى تتسع الازرار وتكون بمظهر مناسب

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML


ذكر المصدر عند النقل


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل


رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 7:25 pm


السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 6:05 pm


كود جمييل شكرا لك


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 10:22 pm


منور الموضوع


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف AmEr MaGroh في الأربعاء سبتمبر 14, 2016 11:29 pm

avatar
AmEr MaGroh
عضو نشيط
عضو نشيط

الجنس : ذكر

الدلو

عدد المساهمات : 353

نقاط النشاط : 436

السٌّمعَة : 10

بلد العضو :

العمر : 15


معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف JoryAbdallah في السبت يناير 28, 2017 11:47 pm


#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك




التوقيع



avatar
JoryAbdallah
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : انثى

السمك

عدد المساهمات : 124012

نقاط النشاط : 139271

السٌّمعَة : 2898

بلد العضو :

العمر : 31




معاينة صفحة البيانات الشخصي للعضو http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف El Desha El Hlawany1 في الإثنين يناير 30, 2017 11:26 am


شكرا اخي الغالي على الطرح الرائع ,,,,,واصل تالقك .... مع جزيل الشكر ..." تحية مع الشكر




avatar
El Desha El Hlawany1
عضو فعال
عضو فعال

الجنس : ذكر

القوس

عدد المساهمات : 633

نقاط النشاط : 716

السٌّمعَة : 38

بلد العضو :

العمر : 20


معاينة صفحة البيانات الشخصي للعضو http://egyptian-cafe.123.st/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف OuSsaMa BeDdAi في الجمعة فبراير 17, 2017 1:52 pm


يعطيك العافية

avatar
OuSsaMa BeDdAi
الادارة العليا

الادارة العليا

الجنس : ذكر

السمك

عدد المساهمات : 22220

نقاط النشاط : 22954

السٌّمعَة : 78

بلد العضو :

العمر : 16




معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف Sportacus في الثلاثاء مارس 21, 2017 1:17 am

avatar
Sportacus
بصمة خالدة

بصمة خالدة

الجنس : ذكر

القوس

عدد المساهمات : 33942

نقاط النشاط : 35892

السٌّمعَة : 84

بلد العضو :

العمر : 31


معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود سلايدر احترافي بشكل انيق وبعدة صور

مُساهمة من طرف Abir The Queen في الثلاثاء مارس 21, 2017 1:18 am

avatar
Abir The Queen
عضو محترف
عضو محترف

الجنس : انثى

الثور

عدد المساهمات : 2054

نقاط النشاط : 2076

السٌّمعَة : 9

بلد العضو :

العمر : 16





معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى






Feedage Grade B rated