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

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


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

جافا سكربت / إضافة الصورة الشخصية بجانب الإسم في علبة الدردشة

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

جافا سكربت / إضافة الصورة الشخصية بجانب الإسم في علبة الدردشة

مُساهمة من طرف Mr.TnT في الثلاثاء 21 أبريل 2015 - 2:34

السلام عليكم ورحمة الله وبركاته
موضوعنا اليوم غير موضوع الأشعار:
جديد: إمكانية إظهار صور الأعضاء في دردشة أحلى المنتديات

مقارنة بين أشعار الزعيم وبين هذا الموضوع:
لاحظ ان الموضوع الذي تم فتحه من قبل الزعيم ان الصورة الشخصية يتم وضعها فقط في الشات وليس في القائمة الجانبية
الزعيم :

http://i38.servimg.com/u/f38/19/13/54/32/13-02-19.png
انا

http://i.imgur.com/Y3Sfxh7.png

~~~~~~~~~~~~~
الأن هناك شيئان يجب ان تعرف قبل بدء العمليه.....
في حال اردت ان تظهر الصور الشخصيه على شكل صغير ومنسق كما بالأمثله التي وضعتها بالأعلى, يجب تفعيل خاصية:

http://i38.servimg.com/u/f38/19/13/54/32/13-02-18.png

الموجوده في:
لوحة الإدارة >> عناصر اضافية >> علبة الدردشة >> اعدادات علبة الدردشة:


اما لو لم تفعلها, فستظهر الصور بأحجامها الطبيعيه مما سيؤدي الى تشوه بمظهر الدردشه.
نأتي للأكواد الأن وهي عباره عن أثنان فقط.
يتم وضعه في الجافا سكربت:

الكود:
$(window).load(function() {  var chatbox_script = function() {     var default_avatar = 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png';    var ava_in_member_list = true;    var ava_in_indirect_message = true;     var avatars = {};    var d;    var set_avatar = function(pseudo, elem_to_prepend){      var avatar = avatars[pseudo];      var el = $(this);      elem_to_prepend.find('.cb-avatar').remove();      elem_to_prepend.prepend('<span class="cb-avatar"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');      if(!avatar) {        if(!d) {          d = $.get('/memberlist?change_version=prosilver').done(function(c){            $('.avatar-mini img', c).each(function(){              avatars[$(this).parent().text().substr(1)]= $(this).attr('src')            })          })        }        d.done(function(){          var avatar = avatars[pseudo];          elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)        })      }    };    var overrided = Chatbox.prototype.refresh;    Chatbox.prototype.refresh = function(data) {      var next_scroll = false;      if (data.messages && data.messages.length) {        $.each(data.messages, function(_,m){          if(ava_in_indirect_message)            m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();          if(m.user && m.user.avatar)            avatars[m.username] = m.user.avatar        });        next_scroll = !this.messages || this.messages.length != data.messages.length;      }      overrided.call(this, data);      d = null;      ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){        set_avatar($(this).text(), $(this).parent());      });      ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){        set_avatar($(this).children().attr('data-username'), $(this).parent());      });      if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2    };  };  var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})});


وكود اخر يتم وضعه في ورقة css لنقوم بتحديد حجم الصورة والتحكم بها
الكود:
#chatbox_members .cb-avatar > img {  height:30px;width:30px;  vertical-align: middle;}



دمتم بخير
منقول للإفادة مع التعديل
Mr.TnT
avatar
Mr.TnT
 
 

ذكر
عدد المساهمات : 947
معدل النشاط : 3137
السُمعة : 19

http://www.ce-scripts.net/

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

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


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