السلام عليكم ورحمة الله وبركاته
إضافة نافذة الصور المفضلة
-----------------------------
إضافة نافذة الصور المفضلة
-----------------------------
تتيح هذه الميزة لمستخدمي المنتدى (الاعضاء والزوار) نقل صورهم المفضلة في نافذة منفصلة بكل سهولة ومتعة.
فعندما تمرر الماوس فوق أي صورة، تظهر نجمة حمراء تشير إلى خيار حفظها كمفضلة.
وعند النقر فوق النجمة يتم نقل الصورة تلقائيًا إلى نافذة مخصصة للصور المفضلة،
-
ملاحظة...
عند حذف ملفات تعريف الارتباط، تتم إزالة الصور الموجودة في النافذة أيضًا.
طريقة التركيب
أولاً، أضف الكود التالي في اسفل قالب الهيدر.الكود:
<div class="photos-delete" style="display:none;">
<div class="Favorite-photos"></div></div>HTML
ثانيا، أضف كود HTML في مكان مناسب لتحديد مكان الصور المفضلة، سواء على الصفحة الرئيسية أو العناصر أو القوالب.ضعه حيثما تفضل .
الكود:
<div class="photos-walll">
<div class="Comment-photos">
الصور المفضلة
</div>
<div class="Favorite-photos">
</div>
</div>JavaScript
العنوان : كما تحبالمكان : في جميع الصفحات
الكود:
$(document).ready(function() {
// قم بإضافة عنصر النجمة إلى الجسم
$('body').append('<div class="star">★</div>');
// تحديد نمط النجمة
$('.star').css({
'position': 'absolute',
'display': 'none',
'font-size': '24px',
'color': '#E91E63',
'cursor': 'pointer',
'z-index': 77000, // تأكد أن النجمة فوق جميع العناصر الأخرى
'transition': 'top 0.3s ease, left 0.3s ease', // تأثير الانزلاق
});
// وظيفة لعرض الصور المفضلة من الذاكرة
function loadFavoritePhotos() {
var favoritePhotos = $('.Favorite-photos');
var favorites = JSON.parse(localStorage.getItem('favoritePhotos')) || [];
favoritePhotos.empty(); // امسح الصور السابقة
favorites.forEach(function(src) {
favoritePhotos.append('<img src="' + src + '" style="width: 50px; height: 50px; margin: 5px;">');
});
}
// استدعاء وظيفة تحميل الصور المفضلة عند تحميل الصفحة
loadFavoritePhotos();
// عند التمرير فوق الصورة
$(document).on('mouseenter', 'img', function(event) {
var $img = $(this);
// الحصول على إحداثيات الصورة
var offset = $img.offset();
var width = $img.outerWidth();
var height = $img.outerHeight();
// تحقق إذا كانت هناك عناصر (مثل الجدول) في الجزء العلوي من الصورة
var topSpaceAvailable = offset.top > $(window).scrollTop(); // تحقق من وجود مساحة في الأعلى
if (topSpaceAvailable) {
// وضع النجمة في أعلى يسار الصورة إذا كانت المساحة متاحة
$('.star').css({
'top': offset.top - 20, // تعديل للظهور في أعلى الصورة
'left': offset.left + 10, // المسافة بين الصورة والنجمة من اليسار
}).show().data('target-img', $img);
// إضافة تأثير الانزلاق من الأسفل (وكأن النجمة معلقة بخيط)
$('.star').css({
'top': offset.top - 30, // بداية الانزلاق من الأسفل
'transition': 'top 0.5s ease-out' // التأثير الانزلاقي
});
} else {
// إذا كانت المساحة في الأعلى مغطاة، وضع النجمة في أسفل يسار الصورة
$('.star').css({
'top': offset.top + height - 30, // أسفل الصورة مع رفع النجمة قليلاً لأعلى
'left': offset.left + 10, // المسافة بين الصورة والنجمة من اليسار
}).show().data('target-img', $img);
}
// تعيين وظيفة النقر على النجمة
$('.star').off('click').on('click', function() {
var imgSrc = $img.attr('src');
var favoritePhotos = $('.Favorite-photos');
var favorites = JSON.parse(localStorage.getItem('favoritePhotos')) || [];
if (favorites.indexOf(imgSrc) === -1) {
favorites.push(imgSrc);
localStorage.setItem('favoritePhotos', JSON.stringify(favorites));
favoritePhotos.append('<img src="' + imgSrc + '" style="width: 50px; height: 50px; margin: 5px;">');
}
// إخفاء النجمة بعد النقر
$('.star').hide();
});
}).on('mouseleave', 'img', function() {
// إخفاء النجمة عند مغادرة الصورة فقط إذا لم يكن هناك نقر على النجمة
var $star = $('.star');
$(document).one('click', function(event) {
if (!$(event.target).closest('img').length && !$(event.target).is('.star')) {
$star.hide();
}
});
});
// منع إخفاء النجمة عند النقر عليها
$(document).on('click', '.star', function(event) {
event.stopPropagation();
});
});
document.write('<style type="text/css">
span.star {
display: inline-block !important;
}
.photos-walll span.star {
display: none !important;
}
.Comment-photos {
text-align: center;
background: #1e88e5;
color: white;
padding: 7px;
}
.Favorite-photos img {
width: 100px;
height: 100px;
display: inline-block;
margin: 5px;
border: solid #9c27b069 2px;
}
.photos-walll {
box-shadow: 0 2px 3px rgb(0 0 0 / 0%), 0px 2px 11px 2px rgb(11 12 12 / 27%);
border-radius: 4px;
font-family: Open Sans;
background-color: #fff;
border: solid #9e9e9e7d 1px;
}
</style>');لا تنسى الضغط على قدم
---------------------------
آمل أن تعجبكم هذه النافذة الصغيرة الرائعة للصور المفضلة!
________________________________
تم كتابة هذا البرنامج بواسطة كونان2000 بالذكاء الاصطناعي
