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

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

زائر
زائر
تمت المشاركة في الثلاثاء سبتمبر 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


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

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

avatar
عضو نشيط
الجنس : ذكر

السرطان

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

نقاط النشاط : 461

السٌّمعَة : 12

العمر : 26

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء سبتمبر 01, 2015 12:27 pm
سلمت أناملك/ي الذهبية عالطرح الرائع 
الذي أنار صفحات منتدى الابداع العربي
بكل ماهو جديد لكِ مني أرق وأجمل التحايا 
على هذا التألق والأبداع 
والذي هو حليفك/ي دوما" أن شاء الله
التوقــيـــــــــــــــــــــع


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

زائر
زائر
تمت المشاركة في الأربعاء سبتمبر 02, 2015 9:32 pm
منور الموضوع

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

avatar
بصمة خالدة
  •  

  • الجنس : ذكر

    الدلو

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

    نقاط النشاط : 41668

    السٌّمعَة : 283

    بلد العضو :

    العمر : 19

    معاينة صفحة البيانات الشخصي للعضوhttp://WwW.t-AlTwEr.CoM
    تمت المشاركة في الخميس سبتمبر 03, 2015 7:56 am
    جججميل جدآآ آلككود , شككرآ وردة حمراء.
    التوقــيـــــــــــــــــــــع

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

    زائر
    زائر
    تمت المشاركة في الخميس سبتمبر 03, 2015 1:28 pm
    منور الموضوع

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

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    الاسد

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

    نقاط النشاط : 27155

    السٌّمعَة : 90

    بلد العضو :

    العمر : 37

    معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
    تمت المشاركة في السبت فبراير 06, 2016 12:30 pm
    بارك الله فيك  وجعله الله لك في ميزان
    حسناتك دمت في  حمي الرحمن
    التوقــيـــــــــــــــــــــع

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

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    الجدي

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

    نقاط النشاط : 7087

    السٌّمعَة : 65

    بلد العضو :

    العمر : 101

    معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
    تمت المشاركة في الأحد فبراير 07, 2016 6:16 pm
    كوددد جميل
    شكككرآ   ~
    التوقــيـــــــــــــــــــــع


    سبحان الله وبحمده ..
              سبحان الله العظيم ...

    اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين



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

    avatar
    عضو فعال
    الجنس : ذكر

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

    نقاط النشاط : 988

    السٌّمعَة : 24

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الأحد فبراير 07, 2016 6:42 pm
    كود وتطوير رائعه
    يعطيك العافيه وتسلم الأيادي المتألقه
    على روعة ماخطت لنا من ابجديات واكواد ماسيه
    بإنتظار روائعك القادمه بشوووق
    التوقــيـــــــــــــــــــــع



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

    زائر
    زائر
    تمت المشاركة في الأحد فبراير 07, 2016 6:49 pm
    منورين جميعا

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

    زائر
    زائر
    تمت المشاركة في الثلاثاء مايو 17, 2016 7:25 pm
    السلام عليكم ورحمة الله وبركاته
    ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
    إنـجاز أكثر رائــــــع
    لكن أرجو منكَ عدم التوقف عند هذا الحد
    مـنتظرين ابداعتــــــك
    دمتـ ودام تألقـك

    تحياتــي
    استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
    صلاحيات هذا المنتدى:
    لاتستطيع الرد على المواضيع في هذا المنتدى
    Top