15.05.13, 20:14
0 комментарий
  DLE Хаки

Вывод изображения новости при наведении на заголовок или изображение в 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

Напишите своё мнение