Личные сообщения

Ваши переписки

Логотип сайта
главная правила форум опубликовать полезные сервисы услуги
вход или регистрация обратная связь

Мир шаблонов » Полезности, хаки DLE » Изображение в topnews для DLE
1

Изображение в topnews для DLE

Изображение в topnews для DLE


Простой и интерестный хак показывает изображение и новости при наведении на заголовок в Topnews.

В фаил стилей своего шаблона (styles.css) последней строкой вставляем:

/*Всплывающее изображение*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
visibility: visible;  
top: 0;  
left: 60px; /*position where enlarged image should offset horizontally */  
}  
/*---------------------*/


В файле шаблона topnews.tpl:

(если шаблон показывает только заголовок, без изображения) находим
<a href="{link}">{title}</a>


заменяем на
<a class="thumbnail" href="{link}">{title}<span><img src="{image-1}" alt="{title}" width="250px" /></span></a>



width="250px" меняем по своему усмотрению.

(если шаблон показывает миниатюру изображения новости)находим
<img src="{image-1}" alt="{title}" />


заменить на (примерно должно получиться такое):
<a class="thumbnail"><img src="{image-1}" alt="{title}" /><span><img src="{image-1}" alt="{title}" width="350px" /></span></a>


соответственно width="350px" устанавливаем свой параметр.

Внимание! Если Ваш img изначально в шаблоне взят в div class, то возможен конфликт классов.
В данном случае доробатывайте свой класс.
Поделиться: Понравилась новость? Расскажи друзьям. Поблагодари проект!


Уважаемый посетитель нашего сайта! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!

Тегидля dle, хаки dle
Публикацию посмотрели 1893 раз(а) и написали 10 комментариев.

Похожие публикации

 Эффект прозрачности для изображений 
Возможно Вы когда либо видели, что счетчики на сайте сделаны как бы более прозрачными или тусклыми а при наведении на них курсором приобретают начальные свойства. Мне всегда это нравилось, но я не задумывался а как это делается…...
 Шаблон СSS Template 2.0 для DLE 9.8 [Оригинал] 
Дорогие друзья. После длительного перерыва, команда Российской школы CSS и GZweb Interfaces готова представить Вам обновление шаблона CSS Template 2.0. Он позволит не только изучить современные приемы верстки страниц и разработки сайтов, но и...
 DataLife Engine v.9.8 Nulled & Retail (скачать DLE 9.8) 
Представляем вам новую версию нашего скрипта DataLife Engine v.9.8. В данном релизе вас ожидает новая система, c помощью которой, ваши посетители могут делиться интересной информацией на вашем сайте с другими людьми, а также в социальных сетях,...
 Красивый вид атача для DLE 9.8 
Еще один из видов attachment (скачивание файлов с сервера) для DLE 9.8 версии....
 Кнопка вверх для DLE 
Кнопка на верх работает на всех сайтах где подключен кверти последней версии, так же по совместительству работает на DLe движку. Точнее сказать в шаблонах Data Life Engine....
Фото

Группа: Посетители
Комментариев: 2
Публикаций: 0
Зарегистрирован: 12.06.2013
 

Комментарий #1 написал: tonik (15 июня 2013 15:28)

Советую обновить хак до следующей версии...
Фото

Группа: Посетители
Комментариев: 4
Публикаций: 0
Зарегистрирован: 5.05.2014
 

Комментарий #2 написал: indexphp (5 мая 2014 11:06)

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

Группа: Администраторы
Комментариев: 270
Публикаций: 1184
Зарегистрирован: 14.04.2013
 

Комментарий #3 написал: seriy99 (5 мая 2014 17:49)

Цитата: indexphp
Спасибо за хак, но хотелось бы узнать как сделать так, чтобы картинки не загружались сразу все. Так как например в текстовых ссылках популярных новостей выводится 200 штук и совсем не хочется, чтобы 200 картинок под хайдом загружались.

А вы устанавливали? что тянет картинки ? по идее ж одну вытягивает и все
Фото

Группа: Посетители
Комментариев: 4
Публикаций: 0
Зарегистрирован: 5.05.2014
 

Комментарий #4 написал: indexphp (5 мая 2014 19:10)

Цитата: seriy99
Цитата: indexphp
Спасибо за хак, но хотелось бы узнать как сделать так, чтобы картинки не загружались сразу все. Так как например в текстовых ссылках популярных новостей выводится 200 штук и совсем не хочется, чтобы 200 картинок под хайдом загружались.

А вы устанавливали? что тянет картинки ? по идее ж одну вытягивает и все


Извините может я чего-то не понимаю. При загрузке страницы загружаются все картинки, но их не видно, а при наведении уже вылазит одна? правильно?
Фото

Группа: Администраторы
Комментариев: 270
Публикаций: 1184
Зарегистрирован: 14.04.2013
 

Комментарий #5 написал: seriy99 (5 мая 2014 19:14)

Цитата: indexphp
Цитата: seriy99
Цитата: indexphp
Спасибо за хак, но хотелось бы узнать как сделать так, чтобы картинки не загружались сразу все. Так как например в текстовых ссылках популярных новостей выводится 200 штук и совсем не хочется, чтобы 200 картинок под хайдом загружались.

А вы устанавливали? что тянет картинки ? по идее ж одну вытягивает и все


Извините может я чего-то не понимаю. При загрузке страницы загружаются все картинки, но их не видно, а при наведении уже вылазит одна? правильно?

Да нет, я то этим хаком не пользовался,(рассчитан на те шаблоны у которых не реализовано вывод картинки а просто заглавие новости) но это приблизительно единтично тому, как у нас тут на сайте, он должен ну и тянет только заголовок (одну, первую картинку), разве не так у вас?
Фото

Группа: Посетители
Комментариев: 4
Публикаций: 0
Зарегистрирован: 5.05.2014
 

Комментарий #6 написал: indexphp (5 мая 2014 19:26)

Ну вот посмотрите, вот я поставил у себя на сайте rip-film(точка)com (Меню там где сериалы, когда на название сериала наводишь)

А вот допустим на сезонваре seasonvar(точка)ru
У них при наведении подгружается картинка с описанием, так как если все их загружать под hidden,то страница будет вечность грузится.

Извините, если я тут бред несу)
Фото

Группа: Администраторы
Комментариев: 270
Публикаций: 1184
Зарегистрирован: 14.04.2013
 

Комментарий #7 написал: seriy99 (5 мая 2014 20:19)

Цитата: indexphp
Ну вот посмотрите, вот я поставил у себя на сайте rip-film(точка)com (Меню там где сериалы, когда на название сериала наводишь)

А вот допустим на сезонваре seasonvar(точка)ru
У них при наведении подгружается картинка с описанием, так как если все их загружать под hidden,то страница будет вечность грузится.

Извините, если я тут бред несу)

))) ну бред, не бред иногда люди и час общаются и друг друга понять не могут... Не ну у вас все ж вроде правильно, картинка подгружается та, что нужно. Ну а вот на втором примере сайта, там у них по другому реализовано. Я так понимаю вы хотите так же реализовать и боитесь (думаете) что оно будет подгружать много картинок, что не красиво и т.д. + нагрузка на сайт... Допилите этот хак и проверьте, конкретно ответить на ваш вопрос я не могу. Но в любом случае во втором примере идет минимум плюс один запрос к базе данным. Даже видно при наведении . У вас на сайте быстро "перещелкивается" и просматривается там же чуть "туговатей". Ну и плюс тут уже дело каждого "любящего" себя вебмастера - к примеру в первом примере если это сериал притом и я его смотрю, мне не обезательно уже знать описание этого сериала достаточно названия и картинки , во втором же примере расчитано больше на новичка, который зашел и не знает, что посмотреть... Может и я вас не правильно понял ))), но максимально попробывал прокомментировать
Фото

Группа: Посетители
Комментариев: 4
Публикаций: 0
Зарегистрирован: 5.05.2014
 

Комментарий #8 написал: indexphp (5 мая 2014 20:28)

Спасибо. Пока так пускай постоит посмотрим будет давать нагрузку.
Фото

Группа: Посетители
Комментариев: 2
Публикаций: 0
Зарегистрирован: 18.01.2015
 

Комментарий #9 написал: JohnSurnet (18 января 2015 09:30)

ребята подскажите как рамку с картинкой подвинуть в право!!! всё перерыл не могу найти( спасибо!
Фото

Группа: Администраторы
Комментариев: 270
Публикаций: 1184
Зарегистрирован: 14.04.2013
 

Комментарий #10 написал: seriy99 (19 января 2015 08:15)

Цитата: JohnSurnet
ребята подскажите как рамку с картинкой подвинуть в право!!! всё перерыл не могу найти( спасибо!

Средствами СSS не пробовали?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
разделы сайта

последние комментарии
  • Стас2056 25.11.2016
    ВИДЖЕТПАК 3.0 - 150 лучших вид ... (17)
    Стас2056-фото
    Настоящий адекватный ресурс, где админы и пользователи как одна команда! [right][/right]Спасибо!
  • seriy99 25.11.2016
    Factor - Multipurpose Landing ... (2)
    seriy99-фото
    Цитата: face2005
    архив весь битый

    Ничего не может быть бито! Смотря чем вы распаковуете и учитывайте длину - для этого достаточно переименовать папку с архивом шаблона например на 1 - перед тем как распаковуете, чтоб длина символов не влияла на распаковку, так как в архиве много папок и подпапок.
  • DenJo 24.11.2016
    OpenCart шаблон "StoreFlex" (3)
    DenJo-фото
    хороший шаблон, уже успел с ним поработать. layout builder полезная штука и моим клиентам понравились clients categories.
    жду апдейта)
  • face2005 24.11.2016
    Factor - Multipurpose Landing ... (2)
    face2005-фото
    архив весь битый
  • seriy99 21.11.2016
    Megatron - Responsive MultiPur ... (2)
    seriy99-фото
    Цитата: vikula
    А почему вместо Megatron на загрузке шаблон для OpenCart aquacart202 ???

    Исправлено. Megatron v2.2 – Responsive MultiPurpose WordPress Theme
поддержать проект
подписаться на новости
OpenCart
Подписаться на канал RSS Добавить сайт в закладки
популярные публикации
партнеры сайта

рекомендуем
Hosting Ukraine
© 2013-2016 mirshablonov.com