>>15695
The NOPE (Blacklist images) I was using before, that includes
(1) blurring out the image using CSS instead of making it completely disappear and
(2) ability to click the blacklisted blurred image and it's removed from the block list & displayed
is this:
/ NOPE /var imageBlacklist = [] ;function loadImageBlacklist() { JSON.parse(localStorage.imageBlacklist || "[]").forEach(addToImageBlacklist); }function saveImageBlacklist() { localStorage.imageBlacklist = JSON.stringify(imageBlacklist); }function addToImageBlacklist(md5) { if (md5 && -1 = imageBlacklist.indexOf(md5)) imageBlacklist.push(md5); }function removeImageFromBlacklist(md5) { var index = imageBlacklist.indexOf(md5); if (-1 ! index) imageBlacklist.splice(index, 1); }function blacklistPostImages(post) { $(post).find('img.post-image').each(function (i, el) { var md5 = el.getAttribute('data-md5'); addToImageBlacklist(md5); $(el).addClass('nope'); }); }function removeBlacklistedImages() { $('img.post-image').each(function (i, el) { if (-1 ! imageBlacklist.indexOf(el.getAttribute('data-md5'))) { $(el).addClass('nope'); } }); }function onNopeClicked(event) { event.preventDefault(); event.stopPropagation(); loadImageBlacklist(); var post = $(event.target).closest('.post'); blacklistPostImages(post); removeBlacklistedImages(); saveImageBlacklist(); }function addNopeButtons() { $('.post').each(function(i, post) { if ($(post).find('.nope').length = 0) { $(post).prepend("<input type='button' class='nope' onClick='onNopeClicked(event)' value='Nope'></input>"); } }) }setInterval(function () { loadImageBlacklist(); removeBlacklistedImages(); addNopeButtons(); }, 1000);$('body').on('click', 'img.nope', function (event) { event.preventDefault(); event.stopPropagation(); $(this).removeClass('nope'); removeImageFromBlacklist(this.getAttribute('data-md5')); saveImageBlacklist(); });/ end NOPE /
and here's the CSS for the above NOPE function, that goes into the THEME section on 8ch options:
img.nope {
filter: grayscale(30%) blur(10px);
overflow: hidden;
max-width: 150px;
max-height: 150px;
}