كود code فعاليات المنتدى forum بعرض مميز مع Jquery

[said]

http://www.dzbatna.com/images/icons/icon30.gif ظƒظˆط¯ ظپط¹ط§ظ„ظٹط§طھ ط§ظ„ظ…ظ†طھط¯ظ‰ ط¨ط¹ط±ط¶ ظ…ظ…ظٹط² ظ…ط¹ Jquery (http://www.dzbatna.com/t1944756/)



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

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




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

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

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

مثال

منتديات قطر Qatar (http://www.3mri-qtr.com/vb)

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

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

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

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

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

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

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

وضع الكود code في تعاريف 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:pointer; 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 التالي اسفل الهيدر header


رمز Code:
<center><div class=&quot;jimgMenu&quot;> <ul> <li id=&quot;landscapes&quot;><a href=&quot;http://www.3mri-qtr.com/vb/showthread.php?t=7972&quot;>Landscapes</a></li> <li id=&quot;people&quot;><a href=&quot;http://www.3mri-qtr.com/vb/showthread.php?t=7972&quot;>People</a></li> <li id=&quot;nature&quot;><a href=&quot;http://www.3mri-qtr.com/vb/showthread.php?t=7972&quot;>Nature</a></li> <li id=&quot;abstract&quot;><a href=&quot;http://www.3mri-qtr.com/vb/showthread.php?t=7972&quot;>Abstract</a></li> <li id=&quot;urban&quot;><a href=&quot;http://www.3mri-qtr.com/vb/showthread.php?t=7972&quot;>Urban</a></li> </ul> </div></center> <link href=&quot;css/jimgMenukwicks.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/jquery-easing-1.3.pack.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/jquery-easing-compatibility.1.2.pack.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/jquery.kwicks-1.5.1.pack.js&quot;></script> <script type=&quot;text/javascript&quot;> $().ready(function() { $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'}); }); </script>



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




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

[ المسودة ]
- تم نقل الكود code من موقع اجنبي وهو : http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html








التعديل الأخير كان بواسطة !!جبرني الشوق!!; 10 - 09 - 2014 الساعة 01:12

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

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif image-menu.zip (http://www.traidnt.net/vb/attachments/599436d1315597643-image-menu.zip) (289.2 كيلوبايت, عدد مرات المشاهدة 314 مرة)


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