Форум русской поддержки Joomla!® CMS
05.12.2016, 00:27:52 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Кто-то знает как сделать такого рода отображение материалов на Joomla 2.5

 (Прочитано 469 раз)
0 Пользователей и 1 Гость смотрят эту тему.
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« : 24.08.2015, 20:48:09 »

Вот нашел на 3-й джемле интересное отображение контента. Оно довольно стандартное http://www.templatemonster.com/ru/demo/53146.html

Но как его реализовать тут не понятно http://funagcy.com/creative-lab.html Перерыл миллиарды модулей, все не о чем. К2 - тоже что-то не могу собрать в кучу там все.

Кто-то может знает? Может атм все каким-то кодом решить можно? По типу вместо картинки до "подробнее" вставить?
Записан
Ilhom666
Живу я здесь
******

Репутация: +155/-0
Offline Offline

Сообщений: 1335



« Ответ #1 : 25.08.2015, 00:44:03 »

Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?
Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #2 : 25.08.2015, 13:00:47 »

Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?

Подскажите, пожалуйста. Куда кидать вот этот код для анимации картинки

Цитировать
img {
   width: 100%;
}

figure {
   margin: 0;
   padding: 0;
   height: 300px;
   position: relative;
   display: block;
   cursor: pointer;
   overflow: hidden;
   border: 3px solid #fff;
}

figure:hover figcaption {
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0;
}

figcaption {
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   filter: alpha(opacity=0);
   opacity: 0;
   position: absolute;
   height: 100%;
   width: 100%;
   top: 250px;
   background: rgba(0,0,0,.5);
   color: #fff;
   -webkit-transition: all .9s ease;
   -moz-transition: all .9s ease;
   -o-transition: all .9s ease;
   -ms-transition: all .9s ease;
   transition: all .9s ease;
   -webkit-transition-delay: .5s;
   -moz-transition-delay: .5s;
   -o-transition-delay: .5s;
   -ms-transition-delay: .5s;
   transition-delay: .5s;
}

figcaption h3 {
   font-family: 'Open sans';
   font-weight: 400;
   color: #f3b204;
   padding: 10px 20px;
   margin-bottom: 0;
   position: relative;
   righ: 100%;
   margin-top: 37px;
   font-size: 30px;
   -webkit-transition: all .9s ease;
   -moz-transition: all .9s ease;
   -o-transition: all .9s ease;
   -ms-transition: all .9s ease;
   transition: all .9s ease;
}

figcaption p {
   font-family: 'Open sans';
   padding: 10px 20px;
   margin-bottom: 0;
   margin-top: 20px;
   position: relative;
   left: 100%;
   font-size: 13px;
   -webkit-transition: all .9s ease;
   -moz-transition: all .9s ease;
   -o-transition: all .9s ease;
   -ms-transition: all .9s ease;
   transition: all .9s ease;
}

figure:hover h3,figure:hover p {
   left: 0;
}

figcaption a {
   color: #fff;
   border: 2px solid #fff;
   padding: 4px 10px;
   text-decoration: none;
}

figcaption a:hover {
   color: #4f5856;
   background: #fff;
}
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #3 : 25.08.2015, 13:36:16 »

По приведенному примеру все проще, есть два блока, вложенные в родителя
Код
<div class="item_content">
 <figure class="item_img img-intro img-intro__none">
 <div class="item_content_inner">
</div>

Суть в том, что item_content позиционирован как position: relative (и фигура тоже), а блок item_content_inner - абсолютно с прозрачностью 0 opacity: 0
Так же у блока item_content_inner заданы транзишны transition: all 0.2s linear 0s; для плавности трансформации
И соответственно теперь отрабатываем ховер
Код
.item_content:hover .item_content_inner {opacity: 1;}

Все, ну а оформление item_content_inner опять же можно посмотреть на этом примере
Код
.item_content_inner {
   background: rgba(0, 0, 0, 0) url("../images/template/double-carBg.png") repeat scroll 0 0;
   height: 100%;
   left: 0;
   opacity: 0;
   position: absolute;
   text-align: center;
   top: 0;
   transition: all 0.2s linear 0s;
   width: 100%;
}
Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #4 : 25.08.2015, 14:12:11 »

По приведенному примеру все проще, есть два блока, вложенные в родителя
Код
<div class="item_content">
 <figure class="item_img img-intro img-intro__none">
 <div class="item_content_inner">
</div>

Суть в том, что item_content позиционирован как position: relative (и фигура тоже), а блок item_content_inner - абсолютно с прозрачностью 0 opacity: 0
Так же у блока item_content_inner заданы транзишны transition: all 0.2s linear 0s; для плавности трансформации
И соответственно теперь отрабатываем ховер
Код
.item_content:hover .item_content_inner {opacity: 1;}

Все, ну а оформление item_content_inner опять же можно посмотреть на этом примере
Код
.item_content_inner {
   background: rgba(0, 0, 0, 0) url("../images/template/double-carBg.png") repeat scroll 0 0;
   height: 100%;
   left: 0;
   opacity: 0;
   position: absolute;
   text-align: center;
   top: 0;
   transition: all 0.2s linear 0s;
   width: 100%;
}


Так вот, а куда мне это все устанавливать?

Я хочу, чтобы тут так отображались ссылки с контентом... http://funagcy.com/creative-lab.html

Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #5 : 25.08.2015, 14:12:57 »

Посмотрите здесь например - CSS-Transitions (CSS3), примеры внизу по ссылкам "Тег transition Эффекты при наведении для фото с использованием CSS3". Или это вы про постепенную подгрузку картинок при скролле?

Спасибо, тут как-то все с рамками. А мне бы хотелось без рамок... просто наводить на фото и чтобы они затемнялись
« Последнее редактирование: 25.08.2015, 14:24:11 от shmi » Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #6 : 25.08.2015, 14:15:44 »

Ну блоки с контентом прописать в шаблон блога templates\шаблон\html\com_content\category\blog_item.php, стили - в файл стилей
Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #7 : 25.08.2015, 14:21:23 »

Ну блоки с контентом прописать в шаблон блога templates\шаблон\html\com_content\category\blog_item.php, стили - в файл стилей

Нет, я не хочу менять все блоки с контентом.
Я хочу вставлять код как фото в разделе портфолио. То есть, чтобы только в этом разделе был такой стиль.
Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #8 : 25.08.2015, 14:23:09 »

Вот это самый идеальный вариант - в 1-м стиле или 4-м.

http://www.internet-technologies.ru/articles/article_2082.html

Не понимаю, какой код куда вставлять.
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #9 : 25.08.2015, 14:25:05 »

Нет, я не хочу менять все блоки с контентом.
Я хочу вставлять код как фото в разделе портфолио. То есть, чтобы только в этом разделе был такой стиль.
не очень понял, но никто не мешает создать отдельный шаблон блога, в котором прописать скрытый блок с текстом и затемнением и назначить его как тип только данного пункта меню. Как переопределить шаблон блога - ссылок масса и на форуме и в Google

Не понимаю, какой код куда вставлять.
Вам что - готовый код нужно дать?
Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #10 : 25.08.2015, 14:27:33 »

не очень понял, но никто не мешает создать отдельный шаблон блога, в котором прописать скрытый блок с текстом и затемнением и назначить его как тип только данного пункта меню. Как переопределить шаблон блога - ссылок масса и на форуме и в Google
Вам что - готовый код нужно дать?

Нет)) код же есть. Просто понять куда его вставлять.

http://www.internet-technologies.ru/articles/article_2082.html

Да, но если я изменю тип страницы только на одной странице, изменится вид меню.
Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #11 : 25.08.2015, 14:36:30 »

Да, но если я изменю тип страницы только на одной странице, изменится вид меню.
нет, надо создать отдельный вывод материалов типа блог, вот куча материалов
После этого в настройках пункта меню выбрать новый тип.
И в этом своем шаблоне добавлять нужную разметку, для получения скрытого до ховера блока
Записан
shmi
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 15



« Ответ #12 : 25.08.2015, 14:53:01 »

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

Все запутанно, ничего не понятно...
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet