منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.


انشاء منتدى مجاني شبيه بهذا المنتدى

كود [Java] [CSS] لوضع صورة في اخر المواضيع بطريقة احترافية للنسخة الثانية

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود [Java] [CSS] لوضع صورة في اخر المواضيع بطريقة احترافية للنسخة الثانية

مُساهمة من طرف فرسان المساعدة في الجمعة 8 مارس 2013 - 0:14

بسم الله الرحمن الرحيم

كود [Java] [CSS] لوضع صورة في اخر المواضيع بطريقة احترافية للنسخة الثانية

هذا الكود من تصميم : simoelmaachi

صورة للمعاينة


كود جافا
الكود:
// Avatar Center by simoelmaachi phpbb2
$(document).on('ready', function() {
    $('.forumline tr .row3.over').prepend('<div class="avatar-simoelmaachi"><div>');
    $('.forumline tr .row3.over .avatar-simoelmaachi').each(function () {
        var profileUser = $(this).parent().children('span').children('span').children('strong').children('a').attr('href');
 
      $(this).html('<a href="' + profileUser + '"
class="avatar-index-enlace"><img
src="http://i35.servimg.com/u/f35/17/45/45/08/12810.png" alt="No Avatar"
 /></a>');
        $(this).children('a').load(profileUser + ' .forumline .row1.gensmall[align="center"]:eq(0) img:eq(0)');
    });
});

وكود السي اس اس
الكود:
/* Avatar Center by simoelmaachi phpbb2*/
.avatar-simoelmaachi { float: Center; }
.avatar-simoelmaachi img { width: 50px; height: 50px; padding: 2px; border: 2px solid #25EBFF; margin: 0 10px; }
الكود في عاية الجمال

avatar
فرسان المساعدة
 
 

انثى
عدد المساهمات : 477
معدل النشاط : 3256
السُمعة : 2

http://montada.ahlamoontada.net/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

(JAVASCRIPT) لوضع صورة في خانة اخر المساهمة***Mohamed Nsr

مُساهمة من طرف Mohamed Nsr في الإثنين 16 ديسمبر 2013 - 1:44

بسم الله الرحمان الر
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام
اما بعد
اليوم اتيت لكم بكود جميل جدا الا وهو وضع صورة العضو صاحب اخر مساهمه في القسم 
في خانة "اخر مساهمه في الرئيسيه" 


الان طريقة وضع الكود 
اولا في الجافا
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
اضف الكود الى:جميع الصفحات
كود Javascript * :

الكود:
$(function(){
 
    if(!window.localStorage) return;
 
    // Avatar por defecto
    var default_avatar= 'http://illiweb.com/fa/invision/pp-blank-thumb.png';
 
    // Tiempo de cache, aqui 24 h * 60 m * 60 s * 1000 ms entonces un dيa
    var caching_time= 24*60*60*1000;
 
    // Tiempo de cache de un error, ici 60 s * 1000 ms entonces un minuto
    var caching_error= 60*1000;
 
    var set_avatar= function(id) {
        $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
    };
 
    var get_avatar= function(id) {
        if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
        {
            localStorage.setItem('d_ava'+id, default_avatar);
            $.get('/u'+id, function (d){
                localStorage.setItem('t_ava'+id,+new Date);
                localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                set_avatar(id);
            });
        }
        return localStorage.getItem('d_ava'+id);
    };
 
    var to_replace= {};
 
    $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
        to_replace[$(this).attr('href').substr(2)]= 1;
        $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
    });
 
    for(i in to_replace)
    {
        set_avatar(i);
    };
 
});


ثانيا اكواد ال css
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال css 
وضع الكود التالي:

الكود:

.mini_ava {
  float: left;
}
.mini_ava img {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 10px;
  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  -o-transition: all 2s;
}
.mini_ava img:hover
{
  width: 80px;
  height: 80px;
}
قبل وضع مؤشر الفأره على الصوره:

بهعد وضع مؤشر الفأره على الصوره:
منقول للافاده


وبهذا قد انتهى الشرح
بالتوفيق ليكم
  
تحياتي
[Mohamed Nsr]
فريق المساعدة
avatar
Mohamed Nsr
احلى إدارة
احلى إدارة

ذكر
عدد المساهمات : 13558
معدل النشاط : 13065
السُمعة : 452

https://www.egylive.org/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى