[ 3.8 ] كود فعاليات المنتدى بعرض مميز مع Jquery

[SH3A3-Q]

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

وجدت طريقة مميزه وراقية لعرض فعاليات المنتدى ويمكن استخدامها في اكثر من مجال

كعرض اعلانات المنتدى او غيرها ف المجال مفتوح امامكم ..

وقبل البدء في شرح طريقة التركيب احب اقدم شكري وتقديري للأخ ( عمري قطر ) مدير منتديات

الله ياعمري قطر ع السماح بتجربة الطريقة ع منتداه ووضعها كمثال عشان تقدرون تشوفون الطريقه

مثال

منتديات قطر Qatar

الحين طريقة التركيب وهي سهلة جداً :

اولا نقوم برفع مابداخل مجلد vb في المرفق الى مجلد منتداك

مع تغيير الصور في مجلد image دون تغيير اسمها فقط غير الصور وضعها بنفس الاسم




مثلا في صورة باسم landscapes الصور اللي تبي تحطها حطها بهذا الاسم والامر ينطبق ع باقي الصور

بعد الانتهاء من الرفع الى مجلد منتداك

اضف الكود التالي الى الاستايل في خيارات css الاضافيه

لوحة التحكم > التحكم بالاستايلات > الاستايل الذي تستخدمه اختار css رئيسي

وضع الكود في تعاريف CSS الإضافية/Additional CSS Definitions

الصندوق الثاني .

رمز Code:

---

.jimgMenu {
position:relative;
margin: 0px 0px 0px 50px;
padding: 0px;
width:475px;
height:200px;
overflow: hidden;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: block;
height: 200px;
position: relative;
}
.jimgMenu ul li {
width: 95px;
float: left;
display: block;
overflow: hidden;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#fff repeat scroll 0%;
border-right: 2px solid #fff;
cursor😛ointer;
display:block;
overflow: hidden;
height: 200px;
}
.jimgMenu ul li#landscapes a {
background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li#people a {
background: url(images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li#nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li#abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
background: url(images/urban.jpg) repeat scroll 0%;
border-right-style: none;
}

---

​

ثم ضع الكود التالي اسفل الهيدر

رمز Code:

---

• Landscapes
  
• People
  
• Nature
  
• Abstract
  
• Urban
  

---

لا ننسى تعديل الروابط اللي باللون الاحمر بروابط المواضيع في منتداكم
​

ملاحظة : في حالة اللي يبي يغير اسماء الصور يجب التغيير في الاسماء اللي باللون الازرق بالترتيب​

الملفات المرفقة

image-menu.zip (289.2 كيلوبايت)