ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте
Стать модераторомОтзывы

Предложения
В честь дня рождения ForumD объявляется праздничная 12-ти дневка. Не пропустите! Ваша активность будет лучшим подарком!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио » Разворачивание картинок до полного размера


Разворачивание картинок до полного размера

Сообщений 1 страница 6 из 6

1

[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Разворачивание картинок до полного размера">
  <div id="icon"></div>
  <img src="https://forumuploads.ru/uploads/0007/e3/f7/2/768397.jpg" class="postimg">
</a>

<div id="cover-block">
Дата: 26.11.2017<br>
Автор: <a href="/profile.php?id=6774" target="_blank">satsana</a><br>
Бесплатный скрипт<br>
Описание: По клику на картинку, она разворачивается до полного размера, повторный клик возвращает обратно к посту с ужатой картинкой.
</div>

</div>

<div id="port-block2" class="free">

<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="картинка в посте до разворота"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2/455473.png" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="развернутая картинка"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2/632095.png" class="postimg"></a></section>

</div>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]

скрипт и описание

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

- не требует изменений в коде страницы;
- автоматически обрабатывает изображения, "ужатые" стилем форума.

HTML низ:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрипт работает не только на платформе майбб для картинок в постах, но и любых других площадках и html-страницах.
Достаточно добавить к картинке класс postimg:

<img width="200px" src="http://gerda.moy.su/_bl/0/40006864.jpg" class="postimg">

+2

2

Чего то не работает (вчера пробовал, сработало 1 раз и усе, больше не работает)

0

3

ACT3255 написал(а):

Чего то не работает (вчера пробовал, сработало 1 раз и усе, больше не работает)

где можно посмотреть?

на этом форуме работает (например в табличке первопоста этого топика можно посмотреть).

проблемы возникают там, где идет долгая загрузка страницы или проблемы с другими скриптами.
например, злополучный скрипт превью картинок на странице топика в портфолио: Портфолио - тут работает через раз из-за глюков второго скрипта.
стоит попробовать поставить этот скрипт ВЫШЕ других скриптов, связанными с картинками.

0

4

Герда
Даже на тестовом не работает, там скриптов вообще нет

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

5

ACT3255
1. как я уже написала, развернуть картинки в дохлом скрипте - это странное занятие. нет ни малейшего смысла искать в чем косяк и исправлять его, когда сам скрипт отправляется на свалку.

Герда написал(а):

например, злополучный скрипт превью картинок на странице топика в портфолио: Портфолио - тут работает через раз из-за глюков второго скрипта.

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

2. на картинках есть loading="lazy", что мне говорит, о том, что что-то явно картинки трогает.
у нас скрипт выводит картинку в таком коде:

Код:
<div class="prev-pic"><img src="http://gerda.moy.su/MyBB_files/FD/_scripts/lang_1.jpg" class="postimg"></div>

3. проверяй картинку в посте чтобы работал разворот, нужно, чтобы картинка была БОЛЬШЕ чем пост или "ужималась" стилем.
втавь в объяву что-то типа:
<img src="http://gerda.moy.su/MyBB_files/FD/_scripts/lang_1.jpg" class="postimg" width="200px">

+2

6

Герда
Сообщаю, после "ремонта" скрипта "Превью первой картинки топика", данный скрипт стал корректно работать в "списке тем форума" превьюхи открывает как и хотелось.

+3

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио » Разворачивание картинок до полного размера