فعاليات المنتدى بتأثيرات الجافا [Java-Slider] الاحترافية

الملف الشخصي · 06-27-2011 08:18 PM

فعاليات المنتدى بتأثيرات الجافا [Java-Slider] الاحترافية

السلام عليكم ورحمة الله وبركاته :

فعاليات المنتدى بتأثيرات الجافا [Java-Slider] الاحترافية

المميز في الـ Java-Slider

1. لا يشترط وجود أي مجلة لتركيبه ، فهو يعمل مع جميع الإصدارات*.
2. يعرض الشريط فعاليات المنتدى بالصور وبأي مقاس تريد**.
3. يعرض نصاً رئيسياً يمثل عنوان الفعالية ، ونصاً ثانوياً يمثل ملخصاً عنها.
4. الانتقال التلقائي للصور مع إمكانية التنقل اليدوي من أزرار الأسهم ، أو الضغط على كلمة More لاختيار من الصورة المصغرة.
5. يمكنك تغيير تنسيقه كاملاً (طول - عرض - لون الخلفية ) من خلال ملفي الـ CSS المرفقان معه.
6. تمت تجربته على الإكسبلورر والأوبرا والفايرفوكس وهو يعمل بكفاءة.

* يعتمد ذلك على عمل هاك "إعلانات في الصفحة الرئيسية" في منتداك وهو يعمل مع نسخ 3.8 بكفاءة.
** يفضل اختيار صور بلاحقة JPEG وتصغير حجمها قدر الإمكان.

- التركيب :~..
::
أولاً - المتطلبات
::
~ ملفات CSS للتحكم بالتنسيق
~ ملفات Java Script
~ هاك "إعلانات في الصفحة الرئيسية" تجدونها جميعاً في المرفقات

::
ثانياً - خطوات العمل:
::
1. قم بتركيب هاك "إعلانات في الصفحة الرئيسية" مرفق مع الموضوع ، ثم فعّله من خيارات المنتدىواختر مكان العرض "فوق الأقسام"، في خانة النص أضف الكود التالي:

كود :

<script type="text/javascript">

            function startGallery() {

                  var myGallery = new gallery($('myGallery'), {

                    timed: true

                });

            }

            window.addEvent('domready',startGallery);

        </script>

<div class="content"> 

            <div id="myGallery">

            <div class="imageElement">

                    <h3>عنوان الفعالية الأولى</h3>

                    <p>ملخص الفعالية الأولى  </p>

                    <a href="رابط موضوع الفعالية الأولى" title="عنوان موضوع الفعالية الأولى" class="open"></a>

                    <img src="رابط صورة الفعالية الأولى" class="full" />

                    <img src="رابط مصغر الفعالية الأولى" class="thumbnail" />

                  </div>

                <div class="imageElement">

                    <h3>عنوان الفعالية الثانية</h3>

                    <p>ملخص الفعالية الثانية  </p>

                    <a href="رابط موضوع الفعالية الثانية" title="عنوان موضوع الفعالية الثانية" class="open"></a>

                    <img src="رابط صورة الفعالية الثانية" class="full" />

                    <img src="رابط مصغر الفعالية الثانية" class="thumbnail" />

                  </div>

        </div>

        </div>

2. ضع هذا الكود في هيدر الستايلات جميعاً لتضمن عمل الشريط فيها بالكامل

كود :

<link rel="stylesheet" href="Java-Slider/css/jd.gallery.css" type="text/css" media="screen" />

        <link rel="stylesheet" href="Java-Slider/css/layout.css" type="text/css" media="screen" />

        <script src="Java-Slider/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>

        <script src="Java-Slider/scripts/mootools-1.2-more.js" type="text/javascript"></script>

        <script src="Java-Slider/scripts/jd.gallery.js" type="text/javascript"></script>

3. قم برفع المجلد Java-Slider إلى مجلد منتداك الرئيسي ، وبذلك يكون التركيب قد انتهى.

- ملاحظات مهمة :~..
1. يجب مراعاة حجم الصور لتتناسب مع حجم الشريط كما تحدده من تنسيق ملفي الـ CSS ( الافتراضي للصور 767 * 310 ) .

2. يمكن إضافة عدد لا نهائي من الفعاليات بتكرار الكود التالي في هاك الإعلانات:

كود :

<div class="imageElement">

                     <h3>عنوان الفعالية </h3>

                     <p>ملخص الفعالية </p>

                     <a href="رابط موضوع الفعالية " title="عنوان موضوع الفعالية " class="open"></a>

                     <img src="رابط صورة الفعالية " class="full" />

                     <img src="رابط مصغر الفعالية " class="thumbnail" />

                  </div>

فوق الوسمين

كود :

</div>

         </div>

الموجودين في آخر الكود في الخطوة رقم 1 من خطوات التركيب ، وقد جعلت المسافة بينهما وبين بقية الكود كبيرة لسهولة التمييز.

3. يمكن وضع نفس رابط الصورة الخاصة بالفعالية في خانة رابط الصورة المصغرة للفعالية وسيتم تصغيرها تلقائياً عند العرض.

4. يجب أن يكون هناك على الأقل فعاليتين ليعمل الشريط.

5. الملفات المطلوبة في الموضوع مرفقة، بالإضافة لصورة لعمل الشريط في حال لم يظهر عند البعض.

6. لتغيير الفعاليات في المستقبل كل ما عليكم هو تغيير الروابط الخاصة باسم وصورة الفعالية في هاك الإعلانات من خيارات المنتدى.

7. معرفتي بالـ CSS شبه معدومة ، واعتمدت على التجربة والخطأ لتنسيق العرض ليتناسب مع منتداي، لذا أعتذر عن الأسئلة المتخصصة بالتنسيق.

للتحميل : http://www.traidnt.net/vb/attachments/51...slider.zip

http://www.traidnt.net/vb/attachments/51...8-demo.zip

http://www.traidnt.net/vb/attachments/51...%C2%A9.zip

منقول من ترايدنت

ادارة سكيورتي العرب

المواضيع المحتمل أن تكون متشابهة .
كود آخر مواضيع المنتدى عبر تقنية rss
شرح الـ Web Font واضافة خطوط جديدة الى المنتدى
كود فعاليات لمنتديات vb3
كود خريطة المنتدى وأضفنا في مفضلتك وإسترجاع كلمة المرور والاتصال مع الادارة