استعمل مربع البحث في الاسفل لمزيد من المواضيع
سريع للبحث عن مواضيع في المنتدى
-
10-30-2013, بتوقيت غرينيتش 09:48 PM
#1
سلايد شاو جديد بتقنية جميلة جداً ، [ jqurey & css ] .
ط³ظ„ط§ظٹط¯ ط´ط§ظˆ ط¬ط¯ظٹط¯ ط¨طھظ‚ظ†ظٹط© ط¬ظ…ظٹظ„ط© ط¬ط¯ط§ظ‹ طŒ [ 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]
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
المواضيع المتشابهه
-
بواسطة romaissa في المنتدى بلوغر blogger
مشاركات: 0
آخر مشاركة: 11-01-2013, بتوقيت غرينيتش 08:19 AM
-
بواسطة linnou في المنتدى القوالب والتصاميم الجاهزه
مشاركات: 0
آخر مشاركة: 11-01-2013, بتوقيت غرينيتش 06:08 AM
-
بواسطة romaissa في المنتدى دورات تدريبية و شروحات لتصميم المواقع
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 09:47 PM
-
بواسطة linnou في المنتدى دورات تدريبية و شروحات لتصميم المواقع
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 09:45 PM
-
بواسطة walid في المنتدى دروس و تقنيات عالم التصميم
مشاركات: 0
آخر مشاركة: 10-30-2013, بتوقيت غرينيتش 01:51 AM
ضوابط المشاركة
- لا تستطيع إضافة مواضيع جديدة
- لا تستطيع الرد على المواضيع
- لا تستطيع إرفاق ملفات
- لا تستطيع تعديل مشاركاتك
-
قوانين المنتدى