إظهار الإعجاب واسم العضو في الصور التي تمت مشاركتها مؤخرًا

[كود جيفري]

تعرض صفحة الصور التي تمت مشاركتها مؤخرًا مجموعة من الصور المنشورة في المنتدى، لكنها لا تخبرك بمن رفع كل صورة ولا بمدى تفاعل الأعضاء معها، فتضطر إلى زيارة المشاركة لمعرفة ذلك. هذا الكود يضيف هذه المعلومات مباشرة على الصور، ويأتي بشكلين: الأول يعرض اسم العضو صاحب الصورة وعدد الإعجابات التي حصلت عليها مساهمته، والثاني يضيف إلى ذلك تاريخ النشر وأيقونة مميزة. وبهذا تتعرف على أصحاب الصور ونشاطهم بلمحة سريعة دون مغادرة الصفحة.

مثال على الكود​

شرح تركيب الكود​

كود Javascript
لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript
العنوان: اختيارك
الصلاحيات: اختيارك
أضف الكود إلى: جميع الصفحات

الكود الأول (الاسم، الإعجاب) لنسخ phpBB3 - PunBB - Invision - ModernBB - AwesomeBB

$(function () {
    const libraries = [
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css',
        'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0'
    ];
 
    libraries.forEach(url => {
        if (!$(`link[href="${url}"]`).length) {
            $('head').append(`<link rel="stylesheet" href="${url}" />`);
        }
    });
    $('<style>')
        .text(`
      .like-badge, .author-badge { transition: all 0.3s ease; pointer-events: none; white-space: nowrap; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
      .image_item { overflow: hidden; position: relative !important; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
      .image_item:hover .like-badge { background: rgba(40, 167, 69, 1) !important; }
      .image_item:hover .author-badge { background: rgba(220, 53, 69, 1) !important; }
      .author-badge { color: #ffffff !important; z-index: 11; }
      .author-badge a, .author-badge span, .author-badge i { color: #ffffff !important; text-decoration: none !important; }
      .like-badge { z-index: 10; min-width: 40px; justify-content: center; }
      .loading-spin { animation: spin 1s linear infinite; font-size: 10px; }
      @keyframes spin { 100% { transform: rotate(360deg); } }
    `).appendTo(document.head);
    function updateContent($item, data) {
        if (data.author) {
            $item.find('.author-badge').html(data.author).fadeIn();
        }
        if (data.likes !== undefined) {
            $item.find('.like-count').html(data.likes);
        }
    }
    const observer = new MutationObserver(() => {
        $('.image_item').each(function () {
            const $this = $(this);
            if ($this.find('.like-badge').length) return;
            const link = $this.find('a.text_overlay').attr('href');
            if (!link) return;
            const postIdMatch = link.match(/[pr](\d+)/);
            if (!postIdMatch) return;
            const postId = postIdMatch[1];
            const $likeBadge = $(`
            <div class="like-badge" style="position:absolute; top:0; left:0; background:rgba(40, 167, 69, 0.85); color:#fff; padding:5px; border-radius:0 0 12px 0; font-size:11px; display:flex; align-items:center; font-weight:bold;">
            <i class="fa fa-thumbs-up" style="margin-left:4px;"></i>
            <span class="like-count"><i class="fa fa-spinner loading-spin"></i></span>
            </div>`).appendTo($this);
            const $authorBadge = $(`
            <div class="author-badge" style="position:absolute; top:0; right:0; background:rgba(220, 53, 69, 0.85); color:#ffffff; padding:5px; border-radius:0 0 0 12px; font-size:11px; font-weight:600; display: none;">...</div>`).appendTo($this);
            const cacheKey = 'post_author_' + postId;
            const cachedAuthor = localStorage.getItem(cacheKey);
            if (cachedAuthor) {
                updateContent($this, { author: cachedAuthor });
            }
            $.ajax({
                url: link.split('#')[0],
                type: 'GET',
                success: function (html) {
                    const doc = $(html);
                    const post = doc.find(`#post-${postId}, #p${postId}, [id="${postId}"], .post:has(a[name="${postId}"])`).first();
                    let likes = post.find('.rep-nb').first().text().trim();
                    likes = likes || "0";
                    let updateData = { likes: likes };
                    if (!cachedAuthor) {
                        const selectors = ['.postprofile-name a', '.comment-author a', '.username', '.author a', '.name a','span.post-author-name'];
                        for (let selector of selectors) {
                            let found = post.find(selector).first();
                            if (found.length) {
                                let authorHTML = found.html().replace('(online)', '').replace('(Offline)', '');
                                localStorage.setItem(cacheKey, authorHTML);
                                updateData.author = authorHTML;
                                break;
                            }
                        }
                    }
                    updateContent($this, updateData);
                },
                error: function() {
                    $this.find('.like-count').text("!");
                }
            });
        });
    });
    const container = document.getElementById('imageList');
    if (container) {
        observer.observe(container, { childList: true, subtree: true });
    }
});
// بواسطة كونان2000

الكود الثاني (الاسم، الإعجاب، التاريخ، الأيقونة) لنسخة AwesomeBB

$(function () {
  if (!$('link[href*="font-awesome"]').length) {
    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />');
  }
 
  $('<style>')
    .text(`
      .like-badge i.fa-thumbs-up {
        color: azure;
        margin: 0;
        padding: 0;
      }
      .post-date-badge {
        position: absolute;
        bottom: 40px;
        right: 0;
        background: rgba(0,0,0,0.6);
        color: #fff;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 10px 0 0 0;
        z-index: 45;
      }
      .icon-badge {
        position: absolute;
        bottom: 55px;
        left: 0;
        padding: 4px;
        background: rgba(255,255,255,0.6);
        border-radius: 0 10px 0 0;
        z-index: 45;
      }
      .icon-badge img {
    height: auto;
    width: auto;
    transform: none;
    transition: none;
      }
    `)
    .appendTo(document.head);
  const observer = new MutationObserver(() => {
    $('.image_item').each(function () {
      if ($(this).find('.like-badge').length) return;
      const link = $(this).find('a.text_overlay').attr('href');
      if (!link || !link.match(/#?r(\d+)/)) return;
      const postId = link.match(/r(\d+)/)[1];
      if (!postId) return;
      const likeBadge = $(`<div class="like-badge" style="
        position:absolute; top:0; left:0;
        background:#28a745; color:#fff;
        padding:4px 10px; border-radius:0 0 10px 0;
        font-size:12px; display:flex; align-items:center;
        gap:4px; z-index:5;">
          <i class="fa fa-thumbs-up"></i> <span class="like-count">…</span>
      </div>`);
      const authorBadge = $(`<div class="author-badge" style="
        position:absolute; top:0; right:0;
        background:#dc3545; color:#fff;
        padding:4px 10px; border-radius:0 0 0 10px;
        font-size:12px; font-weight:bold;
        z-index:6;">…</div>`);
      const dateBadge = $(`<div class="post-date-badge">…</div>`);
      const iconBadge = $(`<div class="icon-badge"><img src="" alt="icon" /></div>`);
      $(this).css('position', 'relative')
        .append(likeBadge)
        .append(authorBadge)
        .append(dateBadge)
        .append(iconBadge);
      $.get(link.split('#')[0], function (html) {
        const doc = $(html);
        const post = doc.find(`#post-${postId}`);
        if (!post.length) return;
        const nb = post.find('.fa_like_div .rep-nb').first().text().trim() || '0';
        likeBadge.find('.like-count').text(nb);
        const author = post.find('.post-author-name').first().text().trim();
        if (author) authorBadge.text(author);
        const date = post.find('.post-date').first().text().trim();
        if (date) dateBadge.text(date);
        const iconImg = post.find('.post-header h2 img').first();
        if (iconImg.length) {
          iconBadge.find('img').attr('src', iconImg.attr('src'));
        } else {
          iconBadge.remove();
        }
      });
    });
  });
  const container = document.getElementById('imageList');
  if (container) {
    observer.observe(container, { childList: true, subtree: true });
  }
});
// بواسطة كونان2000

اختر أحد الكودين ثم اضغط على زر قدم.

إضافة تمنح صفحة الصور حياة جديدة وتبرز جهود الأعضاء الذين يثرون المنتدى بمشاركاتهم المصورة. كل التقدير لصاحب الكود على هذا العمل الذي طوّره بالاستعانة بالذكاء الاصطناعي.

صاحب الكود: كونان2000