(function() {
window.fa_img_resizer = {
max_width: 400, // maximum image width (400px)
max_height: 250, // maximum image height (250px)
selector: '.post-content > div:not(.user):not(.postprofile):not(.post-signature) img, .mod_news img, .message-text img,.post-content img[src*="https://"]', // where images should be resized
options: {
bar: true, // resized image options bar
toggler: true, // Enlarge / Reduce Image
full_size: true, // Show full size
download: true, // Download image link
lightbox: true // lightbox effect
},
// texts
lang: {
full_size: '<i class="fa fa-external-link"></i> العرض بحجم كامل',
enlarge: '<i class="fa fa-search-plus"></i> تكبير الصورة',
reduce: '<i class="fa fa-search-minus"></i> تصغير الصورة',
download: '<i class="fa fa-download"></i> تحميل الصورة',
tooltip: 'إضغط للعرض بالحجم الكامل'
},
// resize all images inside the "resizeIn" elements
resize: function() {
for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
if (!a[i].longdesc) {
const imgWidth = a[i].naturalWidth || a[i].width;
const imgHeight = a[i].naturalHeight || a[i].height;
if (imgWidth > fa_img_resizer.max_width || imgHeight > fa_img_resizer.max_height) {
a[i].className += ' fa_img_reduced';
// make the image a "link" if it's not wrapped with one
if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
a[i].style.cursor = 'pointer';
a[i].title = fa_img_resizer.lang.tooltip;
a[i].onclick = function() {
fa_img_resizer.lightbox(this);
};
}
// create the resize bar
if (fa_img_resizer.options.bar) {
const resizerDiv = document.createElement('div'); // إنشاء عنصر جديد
resizerDiv.className = 'fa_img_resizer';
resizerDiv.style.width = fa_img_resizer.max_width + 'px'; // تطبيق العرض الأقصى على شريط الخيارات
resizerDiv.innerHTML =
(fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '') +
(fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '') +
(fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '');
(a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentElement('beforebegin', resizerDiv);
}
}
}
}
},
// toggle between enlarged and reduced image sizes
toggle: function(that) {
var img = that.parentNode.nextSibling;
if (img.tagName == 'A') {
img = img.getElementsByTagName('IMG')[0];
}
if (/fa_img_reduced/.test(img.className)) {
that.innerHTML = fa_img_resizer.lang.reduce;
that.className = 'fa_img_reduce';
img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
} else {
that.innerHTML = fa_img_resizer.lang.enlarge;
that.className = 'fa_img_enlarge';
img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
}
that.parentNode.style.width = img.width - 8 + 'px';
},
// lightbox effect
lightbox: function(that) {
var frag = document.createDocumentFragment(),
overlay = $('<div id="fa_img_lb_overlay" />')[0],
img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
overlay.onclick = fa_img_resizer.kill_lightbox;
img.onclick = fa_img_resizer.kill_lightbox;
frag.appendChild(overlay);
frag.appendChild(img);
document.body.appendChild(frag);
document.body.style.overflow = 'hidden';
img.style.marginTop = '-' + (img.height / 2) + 'px';
img.style.marginLeft = '-' + (img.width / 2) + 'px';
},
// kill the lightbox
kill_lightbox: function() {
var overlay = document.getElementById('fa_img_lb_overlay'),
img = document.getElementById('fa_img_lb_image');
overlay && document.body.removeChild(overlay);
img && document.body.removeChild(img);
document.body.style.overflow = '';
}
};
// write styles into the document head
document.write(
'<style type="text/css">'+
fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
'.fa_img_enlarged,.emotiuser_icon { max-width:100% !important; max-height:100% !important; }'+
'.fa_img_resizer {border: solid 1px #bbbbbb; background: #dddddd;font-size: 16px;line-height: normal;}'+
'.fa_img_resizer a { margin:0 3px; }'+
'.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
'#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
'#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
'</style>'+
(!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
);
// begin modifying images when the page is loaded
$(window).load(fa_img_resizer.resize);
// kill forumactif's image resizer
if (window.resize_images) {
window.resize_images = function() {
return false;
};
}
}());
1, 2
Facebook
Twitter
Youtube
