1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

[РЕШЕНО] При наведении мыши картинка сменяется текстом, как реализовать

Главные вкладки

Аватар пользователя temyshk temyshk 23 августа 2012 в 23:29

Как возможно организовать на Drupal:
Сетка из картинок, при наведении на картинку мыши, она плавно исчезает и появляется текст в ее размер при нажатии на текст переходит на ноду с этим текстом
Пример:
http://www.cinema-group.ru/services/

Комментарии

Аватар пользователя Niklan Niklan 10 ноября 2015 в 11:48

Пара минут и работает без JS. Осталось только нацепить и стили поставить свои какие нужно.
HTML'ка

<!DOCTYPE html>
<html>
<head>
    <title>Тест</title>
    <style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    .boxy {
        width: 238px;
        height: 238px;
        overflow: hidden;
    }
    .boxy-img {
        position: absolute;
        top: 0px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        transition: all 300ms linear;
    }
    .boxy:hover .boxy-img {
        position: absolute;
        top: 238px;
        opacity: 0;
    }
    .boxy-title {
        font-weight: bold;
        text-decoration: none;
        color: #00e000;
        font-size: 14px;
    }
    .boxy-more {
        background: #4fb9e6;
        display: block;
        padding: 5px;
        color: white;
        text-decoration: none;
        width: 50px;
        text-align: center;
        border: 1px solid #eee;
    }
    </style>
</head>
<body>
    <div class="boxy">
        <img src="http://www.cinema-group.ru/u/i/service/3e9c33099ee794ae3333bd12e4442c9c.... alt="Проектирование" class="boxy-img" />
        <a href="#" class="boxy-title">Проектирование</a>
        <p>Cinema Group выполняет проектные работы для частных лиц и организаций. Измерения, расчет и проектирование акустики помещения и звукоизоляции; Измерение, расчет и проектирование, спутникового, эфирного и HDTV телевидения; Анализ, расчет и проектирование кабельных AV сетей; Видеопроекции; Систем управления и контроля - «Умный дом»; Крепежа,…</p>
        <a href="#" class="boxy-more">Далее</a>
    </div>
</body>
</html>
Аватар пользователя temyshk temyshk 24 августа 2012 в 19:13

"HydroBlast" wrote:
Каждый блок это отдельный материал (нода) .
Вывести можно через views .

Это без условно понятно:
1. То есть материал должен иметь две картинки field_image, первая заглавная, вторая картинка - текст
2. Выводим views, в виде сетки, с заглавной картинкой
3. Как сделать что бы при нажатии на картинку она вела на ноду то же понятно.
Вопрос:
Как сделать (какой код и куда вставить во views) что бы при наведении мыши первая картинка плавно сменялась второй
Может есть модуль, похожий на lightbox?
"HydroBlast" wrote:
Эффект изображения на jquery .

Подскажите, пожалуйста хотя бы куда во views вставлять код?

Аватар пользователя Niklan Niklan 24 августа 2012 в 19:19

"temyshk" wrote:

Вы вообще комментарии выше читали? Я вам рабочий пример кинул.

"temyshk" wrote:
вторая картинка - текст

Полный бред, зачем так извращаться?

Мой код подцепите к тизеру нужного типа материала, а затем материалы выводите через views указав что нужно показывать тизеры и все.

Вы с темизацией вообще знакомы? Если нет, то и не сделаете что желаете. Ибо чисто на одних модулях это не сделать, все равно руками поработать нужно.

Аватар пользователя temyshk temyshk 24 августа 2012 в 19:23

"Niklan" wrote:
Пара минут и работает без JS. Осталось только нацепить и стили поставить свои какие нужно.

Niklan, да Вы просто Бог!, а можно еще закомментировать код?, я то я совсем новичок!
Какой кусок кода отвечает за положение, картинки?, она у меня прибивается к верху страницы

По идеи можно создать ноды с такими кодами и выводить views сеткой

Аватар пользователя temyshk temyshk 24 августа 2012 в 19:25

"Niklan" wrote:
Вы вообще комментарии выше читали? Я вам рабочий пример кинул.

Просто поторопился отвечать и ниже не листнул
"temyshk" wrote:
Полный бред, зачем так извращаться?

Это я уже понял!
"Niklan" wrote:
Мой код подцепите к тизеру нужного типа материала, а затем материалы выводите через views указав что нужно показывать тизеры и все.

ДА это гениально
"Niklan" wrote:
Вы с темизацией вообще знакомы?

Чуть чуть

Аватар пользователя temyshk temyshk 24 августа 2012 в 19:36

Убрал из кода position: absolute;

  .boxy-img {
        position: absolute;
        top: 0px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        transition: all 300ms linear;

Картинка встала на место но исчезает резко

Аватар пользователя Niklan Niklan 24 августа 2012 в 19:39

"temyshk" wrote:
Картинка встала на место но исчезает резко

Верните position: absolute;
а сюда добавьте position: relative;

.boxy {
position: relative;
        width: 238px;
        height: 238px;
        overflow: hidden;
    }
Аватар пользователя Niklan Niklan 24 августа 2012 в 19:45

"temyshk" wrote:
а можно еще закомментировать код?, я то я совсем новичок!

а что в нем не ясно? Я просто понятия не имею что можно комментировать в коде из 6 строчек.
Стили так и так буду такими, разве что поменяются размеры блока и все.

P.s. в шестом друпале еще не умел темизировать, поэтому сказать тут ничего не могу.

Основываясь на 7 друпале.
Делаем шаблон node--[node_type].php.tpl
И пишем условие

<?php if($teaser) { ?>
ТУТ МОЙ КОД
<?php } else { ?>
ТУТ КОД ПОЛНОГО МАТЕРИАЛА
<?php } ?>

Аватар пользователя temyshk temyshk 24 августа 2012 в 19:55

"Niklan" wrote:
а сюда добавьте position: relative;

Спасибо все получилось
"Niklan" wrote:
Основываясь на 7 друпале.
Делаем шаблон node--[node_type].php.tpl
И пишем условие

В 6 так же

На сайте Drupal.ru как можно сказать спасибо?

Аватар пользователя Enemy Enemy 25 августа 2012 в 0:59

написать в топике решено, может быть кто-то найдет Ваш пост и скажет спасибо
з.ы. можно налить помощнику Wink

Аватар пользователя Funtik44 Funtik44 29 апреля 2014 в 7:20

Народ, подскажите, а как таким образом выводить новости т.е. не постоянные разделы, а постоянно появляющиеся новости, при этом без тизера?

PS Новости появляются на главной (последние 4 штуки), текст берется из боди (урезанный).

Аватар пользователя Funtik44 Funtik44 29 апреля 2014 в 11:28

"Niklan" wrote:
Пара минут и работает без JS. Осталось только нацепить и стили поставить свои какие нужно.

С точки зрения SEO, это нормальный подход?