Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как реализовать такую идею для картинок в полной новости?

Как реализовать такую идею для картинок в полной новости?

     15.05.2018    Общие вопросы по вёрстке, Стили (CSS)    1138

вопрос
вообщем (у меня по русскому языку двойка, я не знаю, что в русском языке не существует слова вообщем) надоели большие картинки в fullstory, но маленькие не смотрятся. Задумка такая:

Раскрывать картинку как спойлер по клику.
В начале
Как реализовать такую идею для картинок в полной новости?


По клику картинка выезжает сдвигая контентик в ниже.

Как реализовать такую идею для картинок в полной новости?


И вот вопрос, как такое реализовать!?

Ответа пока нет

 

6 комментариев

BYMERPRO
Юзер

BYMERPRO - 15 мая 2018 21:22 -

к второй картинке забыл .png добавить.
maks
Юзер

maks - 15 мая 2018 22:06 -

В чем вопрос то? Спойлеров в инете куча, бери любой, какой понравится. Градиент после спойлера поставить, либо с отрицательным margin-top или position:absolute как лучше подойдёт.
BYMERPRO
Юзер

BYMERPRO - 16 мая 2018 10:28 -

Есть доля правды, в поиске важно правильно сформулировать вопрос, спасибо за наводку.
Jeka778
Юзер

Jeka778 - 18 мая 2018 09:07 -

html:
<div class="post_assets post_assets-ovh">
<!-- Изображение -->
<img src="site.ru/image.png" class="post_assets-img">
</div>

css:
.post_assets{
transition: all .5s ease;
}
.post_assets-ovh{
cursor: pointer;
max-height: 100px; /* высота отображаемой картинки, после загрузки страницы */
overflow: hidden;
}

js (jquery):
$(document).ready(function(){
$('.post_assets-ovh').click(function(){
$('.post_assets').css({"max-height": "1000px"});
setTimeout(function() { $('.post_assets').removeClass('post_assets-ovh'); }, 500); // 500 - задержка времени в ms = задержке .5s заданной в css-файле
});
});
Jeka778
Юзер

Jeka778 - 18 мая 2018 09:19 -

Немного отредактировал.
https://jsfiddle.net/d101pz9o/
BYMERPRO
Юзер

BYMERPRO - 21 мая 2018 00:03 -

Jeka778,
Огромное спасибо, очень выручил!
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 01.12.2012 Artyom91  Общие вопросы по вёрстке
 05.07.2013 onneuha  Общие вопросы по вёрстке
 16.09.2013 alex01011997  Общие вопросы по вёрстке
 18.05.2014 tullius  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
 13.06.2014 follor  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
 07.07.2014 mixa611  Общие вопросы по вёрстке, jQuery, Модули
 18.02.2015 disazakon  Общие вопросы по вёрстке
 19.04.2015 p4velcc  Общие вопросы по вёрстке, Модули, Хаки
 27.01.2016 hqtexture  Общие вопросы по вёрстке, jQuery
 17.10.2016 Nigativ  Общие вопросы, Общие вопросы по вёрстке, Стили (CSS)
  • izi4 | Вывод тегов - как это делается? 2
    Фото izi4
    izi4
    Вывод тегов - как это делается?
    Сегодня, 10:07
    izi4,
    Забыл добавить, хочу вставить в main.tpl
  • izi4 | Вывод тегов - как это делается? 2
    Фото izi4
    izi4
    Вывод тегов - как это делается?
    Сегодня, 09:54
    <meta property="article:published_time" content="{date=Y-m-d}">
    почему сейчас это не срабатывает? Версия DataLife Engine:17.2
  • TeraMoune | В комментариях неверно выводится чекбокс ... 1
    Фото TeraMoune
    TeraMoune
    В комментариях неверно выводится чекбокс. Как поправить?
    23-03-2025, 15:41
    Поправить можно при помощи CSS, смотреть в стандартном шаблоне либо открыть страницу https://dle-news.ru/templates-changelog.html и посмотреть изменения относительно вашей прошлой версии и тех до которых вы обновиляете. Стили относящиеся этого вопроса находятся в Изменения между версиями 17.2 и 17.3.
  • TeraMoune | Как сменить тему TinyMCE?
    Фото TeraMoune
    TeraMoune
    Как сменить тему TinyMCE?
    17-03-2025, 06:34 
    if( typeof tinymce === 'object' ) {
	tinymce.get().forEach((item) => {

		if( this.isDarkTheme() ) item.contentDocument.activeElement.classList.add('dle_theme_dark');
		else item.contentDocument.activeElement.classList.remove('dle_theme_dark');
	
	});
}


    Вместо this.isDarkTheme() использовать то, что используется у вас для определения или установления факта тёмной темы.

    Для применения тёмной темы панели кнопок необходимо установить html тегу класс dle_theme_dark
  • TeraMoune | Как вывести кнопку добавления статическо ... 1
    Фото TeraMoune
    TeraMoune
    Как вывести кнопку добавления статической страницы на сайт с модерацией ?
    13-03-2025, 16:33
    Таких возможностей не предусмотрено как и модерации этого типа страниц.
  • tarantino1 | Адаптация Kylshop 5.3 для DLE 15 11
    Фото tarantino1
    tarantino1
    Адаптация Kylshop 5.3 для DLE 15
    13-03-2025, 15:35
    помогите плиз, модуль не появился в админке, или как в админку зайти? кто-то выше спрашивал какие теги у него, их нигде в сети нет, но я нашёл его сайт на веб архив и вот основные теги ниже.
    Общие теги
    {cart} - выводит мини-корзину на странице. Данный тег можно не указывать, при этом плагин сам вставит корзину в конец html документа. При этом должен присутствовать обязательный стандартный тег DLE {AJAX}
    По умолчанию стили фиксируют корзину справа вверху. Вы можете переписать стили в своем файле стилей, во избежание затирания стандартных стилей при обновлении плагина.
    {filter} - выводит на страницу фильтр товаров.
    Работает с реальными ценами, без учета скидок. В дальнейших обновлениях сделаю настройку включения или отключения учета скидок.
    {map} - выводит карту, которая отвечает за пункты доставки.
    {balance} - выводит баланс пользователя.
    {addBalance} - выводит форму для пополнения баланса.
    Теги для shortstory.tpl и fullstory.tpl (custom.tpl)
    {add-cart} - выводит кнопку добавления товара в корзину.
    {go-payment} - выводит кнопку моментального перехода на страницу оформления заказа.
    {counter} - выводит поле, для выбора количества шт.
    {product} - выводит содержимое, которое забито в поле (после оплаты | вкладка магазин).
    {price} - реальная цена товара.
    {price-sale} - цена с учетом скидки.
    {sale} - скидка.
    {sale-type} - тип скидки (знак валюты или знак процента).
    {currency} - знак валюты.
    {filter} - выводит свойства (фильтры) данного товара. В дальнейшем это будет называться свойства.
    {count} - выводит количество позиций товара.
    {count-orders} - количество проданных позиций.
    Условные:
    [price] содержимое [/price] - будет выводиться содержимое, если цена задана
    [sale] содержимое [/sale] - будет выводиться содержимое, если скидка задана
    [not-price] содержимое [/not-price] - отобразит содержимое, если цены нет
    [not-sale] содержимое [/not-sale] - отобразит содержимое, если скидки нет
    [related-goods] содержимое [/related-goods] - отображает содержимое, если похожие товары заданы
    [present]<span class="present">+1 в подарок</span>[/present] - отображает label, если сейчас счастливые часы.
    Теги для userinfo.tpl
    {my_goods} - выводит список заказов пользователя в виде таблицы.
    Теги для /kylshop/cart.tpl
    - страница оформления заказа.
    {cart} - корзина выбранных товаров в виде таблицы.
    {total} - контейнер для общей суммы в корзине.
    {without-sale} - контейнер с отображением общей суммы с учетом скидки.
    {method} - выпадающий список (методы).
    {method-total} - цена за метод.
    {without-method} - общая сумма из корзины включая цену за метод.
    {form} - форма заказа созданная в админ-панели плагина.
    {map} - карта с пунктами доставки.
    {promo-code} - поле для ввода промо-кода.
    Дополнительные теги
    { pay="315|Индивидуальный товар" } - выведет кнопку с названием индивидуальный товар с ценой 315.
    { pay="Оплатить" } - выведет поле для ввода суммы и кнопку с названием оплатить.
    Теги выведены с пробелами, потому что они заменяются на кнопки. Вы вводите теги без пробелов.
  • TeraMoune | MySQL установил Dle Forum V.3.5 и бд выд ... 1
    Фото TeraMoune
    TeraMoune
    MySQL установил Dle Forum V.3.5 и бд выдает ошибку,что поправить?
    11-03-2025, 01:23
    Ошибка говорит о том, что ячейки img_id нету в таблице, что в принципе странно поскольку модуль и не создаёт таблицы с именем _forum_images. Ищите другие версии или пишите автору если он еще занимается модулем.
  • LMakc | Ссылка на воспроизведение аудио ? 4
    Фото LMakc
    LMakc
    Ссылка на воспроизведение аудио ?
    9-03-2025, 00:58
    Вариант создать доп. поле [xfvalue_mp3]
  • bycocacola | Ссылка на воспроизведение аудио ? 4
    Фото bycocacola
    bycocacola
    Ссылка на воспроизведение аудио ?
    2-03-2025, 15:02
    Нашел вариант:
    создать доп. поле, например: music
    Тип поля: загружаемый аудио плейлист
    и в нужном месте: [xfvalue_music audio-url="1"]
    Выводит прямую ссылку на .mp3
  • bycocacola | Ссылка на воспроизведение аудио ? 4
    Фото bycocacola
    bycocacola
    Ссылка на воспроизведение аудио ?
    2-03-2025, 10:55
    dle 17.3
наверх