كود سلايد شو

السلام عليكم

اليوم اعطيكم كود جميل لسلايد شو

وان شاء الله يعجبكمم

الكود

الكود:: <style type="text/css"> #mcis { display: none; } #sliderFrame { position: relative; width: 468px; margin: 0 auto; border:3px solid #E1E0E2; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; right: -4px; } #slider { width: 468px; height: 260px; background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px 010007; } #slider img { position: absolut; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; right: 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; right: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: #0066CC; } div.mc-caption { font: bold 25px/21px traditional arabic ; color: #0000; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 250px; right: 190px; width: 150px; background: none; padding-right: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(http://i18.servimg.com/u/f18/15/90/68/93/mdonti10.png) no-repeat 0 0; float: right; overflow: hidden; vertical-align: middle; cursor: pointer; margin-left: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #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 type="text/javascript" src="http://my-mdonti.googlecode.com/files/js-image-slider.js"></script> <div id="sliderFrame"> <div id="ribbon"> </div> <div id="slider"> <img alt="ttttt" src="pppp" /> <img alt="ttttt" src="ppppp" /> <img alt="ttttt" src="ppppp" /> <img alt="ttttt" src="ppppp" /> <img alt=" ttttt" src="ppppp" /> </div></div>

قبل حفظ الأداة نقوم باضافة الصور التي نود ظهورها على السلايد شو كما يلي :

نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)
نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )

1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

الكود: ---------تضليل المحتوى

الكود:: <img src="pppp" alt="ttttt"/></a>

اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو (Slideshow ).

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :

لتغيير عرض الأداة width
لتغيير ارتفاع الأداة height

#slider {
width: 468px;
height: 260px;

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي
background-color: #0066CC;
ونقوم بتغيير الرمز 0066cc (للحصول على الألوان بصيغة html انتقل للصفحة التالية )

4- تغيير حجم ولون خط عنوان الموضوع (عناوين المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :

الكود:: font: bold 25px/21px traditional arabic ;

الرمز traditional arabic لإستبدال نوع الخط
الرمز 25px حجم الخط .
هذه هي اهم التعديلات التي نحتاج اليها لتنسيق الأداة بما يتناسب مع الشكل والتصميم
ملاحظة : الكود ليس من تصميمى ولكن تم التعديل عليه بما يناسب احلى منتدى

طريقة وضع الكود : يوضع الكودفى اى مكان يقبل HTML
انتهى
Arabian Star