سلايد شو جديد . . [ jqurey & css ] ~

[linnou]

http://www.dzbatna.com/images/icons/icon26.gif ط³ظ„ط§ظٹط¯ ط´ظˆ ط¬ط¯ظٹط¯ . . [ jqurey & css ] ~ (http://www.dzbatna.com/t2087562/)



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

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

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

رمز PHP:

<code style="white-space:nowrap"> <code> <link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</code> </code>

قم برفع الملف المرفق الى مجلد الـمنتدى الرئيسي
ثانياً : قم بإضافة الكود code التالي باي مكان تريد ان يظهر فيه السلايدر . مثلاً باسفل قالب template الهيدر header ..
لوحة الادارة > خيارات الستايل styleات ولاقوالب > التحكم بالستايل styleات > الستايل style المحدد > القوالب الشائعة > قالب template header
ضيف الكود code التالي بأسفل قالب template الهيدر header ..

رمز PHP:

<code style="white-space:nowrap"> <code> <div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="css/images/image1-small.jpg" alt="" /><span>قريبا</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="css/images/image2-small.jpg" alt="" /><span>قريبا</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="css/images/image3-small.jpg" alt="" /><span>قريبا</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="css/images/image4-small.jpg" alt="" /><span>قريبا</span></a></li>
</ul>

<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="css/images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="/up/" >مركز تحميل توب واو</a></h2>
</div>
</div>

<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="css/images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >قريبا</a></h2>
<p>قـــــريــــبــــآ <a href="#" >ألمزيد</a></p>
</div>
</div>

<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">



<img src="css/images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >قريبا</a></h2>
<p>قـــــريــــبــــآ <a href="#" >ألمزيد</a></p>
</div>
</div>

<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="css/images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >قريبا</a></h2>
<p>قـــــريــــبــــآ <a href="#" >ألمزيد</a></p>
</div>
</div>

</div>
<br />
</code> </code>

مثال حي للسلايدر هنا ،،

jQuery Slider (http://www.des-w.net/slider/)

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








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

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif css.zip (http://www.traidnt.net/vb/attachments/642234d1336205501-css.zip) (149.9 كيلوبايت, عدد مرات المشاهدة 489 مرة)


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