سلايد شاو جديد بتقنية جميلة جداً ، [ jqurey & css ] .

[romaissa]

http://www.dzbatna.com/images/icons/iconrote.gif ط³ظ„ط§ظٹط¯ ط´ط§ظˆ ط¬ط¯ظٹط¯ ط¨طھظ‚ظ†ظٹط© ط¬ظ…ظٹظ„ط© ط¬ط¯ط§ظ‹ طŒ [ jqurey & css ] . (http://www.dzbatna.com/t2075962/)



××
السلام عليكم ورحمة الله وبركاته
كيفكم شباب ان شاء الله تكونوا تمآم وفي عافية .؟!
~
اليوم اتيت لكم بسلايد شاو [ عارض الشرايح ] . رائع جداً ومستخدم في أكثر من
موقع سواء كان عربي ام اجنبي .. القالب 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 (http://www.bubbles4arab.com/lessons/slider/)

تحياتي للجميع .. http://www.dzbatna.com/images/smilies/blushing.gif








ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif slider.zip (http://www.traidnt.net/vb/attachments/639294d1334172055-slider.zip) (85.7 كيلوبايت, عدد مرات المشاهدة 1182 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©