ط³ظ„ط§ظٹط¯ ط´ط§ظˆ ط¬ط¯ظٹط¯ ط¨طھظ‚ظ†ظٹط© ط¬ظ…ظٹظ„ط© ط¬ط¯ط§ظ‹ طŒ [ jqurey & css ] .


××
السلام عليكم ورحمة الله وبركاته
كيفكم شباب ان شاء الله تكونوا تمآم وفي عافية .؟!
~
اليوم اتيت لكم بسلايد شاو [ عارض الشرايح ] . رائع جداً ومستخدم في أكثر من
موقع سواء كان عربي ام اجنبي .. القالب template بسيط جداً وطريقة تركيب installه موضحة بالاسفل :

==============

للمنتديات :
أولاً : لوحة الادارة > خيارات الستايل styleات والقوالب > تعديل الستايل styleات > الستايل style المحدد > القوالب الشائعة
بعدين ضيف الكود code التالي بأسفل قالب template الـ headerinclude

رمز PHP:
<code style="white-space:nowrap"> <code>
<link rel="stylesheet" type="text/css" href="images/slider_info/style.css">
<script type="text/javascript" src="images/slider_info/jquery-1.js"></script>
<script type="text/javascript" src="images/slider_info/slider.js"></script>
</code> </code>

قم برفع الملف المرفق الى مجلد الـ images الذي يتواجد داخل مجلد منتداك .
ثانياً : قم بإضافة الكود code التالي باي مكان تريد ان يظهر فيه السلايدر . مثلاً باسفل قالب template الهيدر header ..
لوحة الادارة > خيارات الستايل styleات ولاقوالب > التحكم بالستايل styleات > الستايل style المحدد > القوالب الشائعة > قالب template header
ضيف الكود code التالي بأسفل قالب template الهيدر header ..
رمز PHP:
<code style="white-space:nowrap"> <code> <!-- بداية السلايدر-->
<div id="slider">
<div style="visibility: hidden;" id="sliderNextImg">التالي</div>
<div style="visibility: hidden;" id="sliderPreviousImg">السابق</div>
<div id="ImgsWrapper">
<div style="opacity: 0.5; height: 60px; display: block; overflow: hidden;" id="description">
<div id="desContent">My Slider</div>
</div>
<div style="margin-top: -255.864px;" id="scroll">
<a target="_self" href="#"><img src="images/slider_info/1.png"></a>
<a target="_self" href="#"><img src="images/slider_info/2.png"></a>
<a target="_self" href="#"><img src="images/slider_info/3.png"></a>
<a target="_self" href="#"><img src="images/slider_info/4.png"></a>
<a target="_self" href="#"><img src="images/slider_info/5.png"></a>
</div>
</div>
<ul>
<li>وصف الرابط الأول</li>
<li>وصف الرابط الثاني</li>
<li>وصف الرابط الثالث</li>
<li>وصف الرابط الرابع</li>



<li>وصف الرابط الخامس</li>
<!--/ نهاية السلايدر -->
</code> </code>

==============

لأصحاب المدونات والمواقع التي تتعامل مع القوالب أو التي مصممه بالـ HTML
افتح القالب template المسؤول عن رأس الصفحة واضف الكود code التالي ، قبل كلمة </head>

رمز PHP:
<code style="white-space:nowrap"> <code>
<link rel="stylesheet" type="text/css" href="images/slider_info/style.css">
<script type="text/javascript" src="images/slider_info/jquery-1.js"></script>
<script type="text/javascript" src="images/slider_info/slider.js"></script>
</code> </code>



وحط هالكود code في منطقة الـ body
 رمز PHP:
<code style="white-space:nowrap"> <code> <!-- بداية السلايدر-->
<div id="slider">
<div style="visibility: hidden;" id="sliderNextImg">التالي</div>
<div style="visibility: hidden;" id="sliderPreviousImg">السابق</div>
<div id="ImgsWrapper">
<div style="opacity: 0.5; height: 60px; display: block; overflow: hidden;" id="description">
<div id="desContent">My Slider</div>
</div>
<div style="margin-top: -255.864px;" id="scroll">
<a target="_self" href="#"><img src="images/slider_info/1.png"></a>
<a target="_self" href="#"><img src="images/slider_info/2.png"></a>
<a target="_self" href="#"><img src="images/slider_info/3.png"></a>
<a target="_self" href="#"><img src="images/slider_info/4.png"></a>
<a target="_self" href="#"><img src="images/slider_info/5.png"></a>
</div>
</div>
<ul>
<li>وصف الرابط الأول</li>
<li>وصف الرابط الثاني</li>
<li>وصف الرابط الثالث</li>
<li>وصف الرابط الرابع</li>
<li>وصف الرابط الخامس</li>
<!--/ نهاية السلايدر -->
</code> </code>

لاتنسى رفع المجلد المرفق الى ملف بمسمى images داخل دليل السكربت او الصفحة المستخدمة ..
مثال حي للسلايدر هنا ،،
Magical Slider

تحياتي للجميع ..






الملفات المرفقة [TR]
slider.zip (85.7 كيلوبايت, عدد مرات المشاهدة 1182 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©