12 июн 2013
Вывод изображения новости при наведении на заголовок или изображение в topnews (улучшенная версия)
tonik Категория: DATALIFE ENGINE » Модули
У нас вы можете скачать бесплатно Вывод изображения новости при наведении на заголовок или изображение в topnews (улучшенная версия)

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Вывод изображения новости при наведении на заголовок или изображение в topnews (улучшенная версия)


Предлагаю вашему вниманию более оригинальный вывод (увеличение) изображения новости в topnews для DLE 9.x
В сравнении с прошлой версией вывод изображений стал более живым и привлекательным.

И так:

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

/*Всплывающий скриншот*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{
    visibility:hidden;
    border: 3px solid orange;
    bottom:200px; /*с какого уровня изображение будет появляться*/
    left:40%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    z-index:99;

    /*background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));*/
    background-color: #eee;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}  
.thumbnail span img{
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{
    bottom:30px; /*до какого уровня изображение будет опускаться*/
    opacity:0.95;
    visibility:visible;
    box-shadow: 0.9em 0.9em 15px #555;/*редактируем тень
    1 сдвиг тени по горизонтали 2 сдвиг по вертикали 3 радиус размытия тени
    4 цвет тени*/
    
/*-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);*/    

/*раскомментировать при желании появления изображения
посредством увеличения*/
}  
/*---------------------*/



В комментариях указано главное

В файле шаблона 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" устанавливаем свой параметр.

Эту же операцию можно использовать и в shortstory

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

ДЕМО можно посмотреть на нашем сайте! Наслаждайтесь! (:

Адаптировал: ToNik









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.