» »

Картинка - спойлер (Spoiler Alert) на jQuery

Картинка - спойлер (Spoiler Alert) на jQuery
Роль этого материала является скрытие спойлеров на изображение, если они есть, то для этого можно подключить этот скрипт, что обезопасит от просмотра. Так как по умолчанию мы видим не само изображение, а по вверх его идет темный фон, на котором написано, что вероятно или как вы сами напишите, вообще на картинке может быть спойлер к фильму или другому материалу.

Вообще он изначально предупреждает гостей и пользователей, но кому нужно посмотреть, то стоит навести курсор, как картинка появится в оригинальном виде, но стоит курсор убрать, как она автоматически скрывается.

Боитесь что ваш сайт зальёт волна гневных комментариев, после того как вы добавите картинку, которая является для других спойлером?
Предупредите их о возможности спойлера и вам уже легче будет.

Но как предупреждать каждого пользователя о спойлере?

Есть решение!

Данный скрипт, поможет вам пометить картинку через html или bb-код, а дальше сделает всю работу за вас.

Материал работает с библиотекой:

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

HTML

Код
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiwgrJeAJN-7lcy92N51uP7XzccK_p-fTSJNCXPLPSVih8wqPf" spoiler>

CSS

Код
img[spoiler=''], img[spoiler='true']{
opacity: 0;
}

.thisSpoiler{
position: relative;
overflow: hidden;
}

.thisSpoiler > img{
display: block;
opacity: 1;
z-index: 1;
border: 0;
}

.thisSpoiler::before, .thisSpoiler::after{
position: absolute;
left: 0;
right: 0;
transition: opacity .3s linear;
pointer-events: none;
}

.thisSpoiler::before{
content: '';
display: block;
width: 100%;
height: 100%;
background: #000;
z-index: 2;
top: 0;
bottom: 0;
}

.thisSpoiler::after{
content: 'Это изображение содержит в себе спойлер!0aНаведите, чтобы посмотреть.';
display: inline-block;
max-width: 100%;
max-height: 100%;
text-align: center;
font-size: 12px;
color: #fff;
white-space: pre-line;
z-index: 3;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.thisSpoiler:hover::before, .thisSpoiler:hover::after, .thisSpoiler:active::before, .thisSpoiler:active::after{
opacity: 0;
}

JS

Код
// конверт bb-кода из текста определённого тега (в моём случае div с классом .message), нужный img с атрибутом для работы спойлера.
// Важно, если будете применять данный код, то используйте его выше, чем код ниже. Лучше в <head>
function SpoilerAlerBB(elem) {
  let reg = /\[img-spoiler\]((?:http|https):\/\/\S+(?:jpg|jpeg|png|gif))\[\/img-spoiler\]/gi;
  if(elem.length>0) {
  elem.each(function(){
  let html = $(this).html();
  if(html.match(reg)) $(this).html(html.replace(reg, '<img src=\"$1\" spoiler>'));
  reg = reg;
  });
  }
}
SpoilerAlerBB($('.message'));

// Сам код скрипта. Лучше расположить его в конце тега <body>
$(window).on('load', function(){
  $('img[spoiler=""], img[spoiler="true"]').each(function(){
  let style = 'display: '+($(this).css('display') == 'inline' ? 'inline-block' : $(this).css('display'))+';\
  width: '+$(this).css('width')+';\
  height: '+$(this).css('height')+';';
  $(this).wrap('<div class=\"thisSpoiler\" style=\"'+style+'\">');
  });
});

На этом установка закончена, ниже присутствует ссылка на demo страницу, где реально можно оценить функционал материала, и безусловно его работу.

Демонстрация

Источник: pandora.clan.su
Автор: Denis Minov (CbIPoK2513)
2019-08-19 Загрузок: 2 Просмотров: 357 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 3
-SAM-
-SAM- 2019-08-20 06:351
0
CbIPoK2513, я смотрю вас не смущает никак, что атрибута такого "spoiler" в html не существует (значит не заботитесь, чтобы было валидным оно... но это же никак не значит, что другие ставить будут себе на сайт такого рода скрипты - не должны этого делать). В общем, кто себе ставит - просто скрипт переписывайте, чтобы срабатывал по прописанному классу в изображение... или писать data-spoiler (со значениями "true" или "false" соответственно).

UPD.:
CbIPoK2513
CbIPoK2513 2019-08-20 21:522
0
Я поставил `spoiler` только потому, чтобы было похоже на аналогичные, типо `selected`, `disabled` и т.п.
Никто не запрещает менять на другой атрибут, хоть тот же `data-spoiler`.
CbIPoK2513
CbIPoK2513 2019-08-24 09:303
0
По поводу кастомных атрибутов, хочу сказать одну вещь, ничего страшного в этом нет, кроме не пройденной валидации.

Да, не спорю, когда-то атрибут `spoiler` может войти в html как специальный, но шанс это мал.

----

По поводу действия скрипта, да не спорю, такое уже есть, но я не видел этого в свободном доступе, а саму идею взял со Steam.
avatar