Помогите, как реализовать эффект приближения миниатюр

#1 30 сентября 2014 в 18:51
Здравствуйте, подскажите как можно к примеру в модуле новые статьи сделать эффект приближения миниатюр, в инете искал, много где реализовано, но там плагинами все в основном, для инстанта не нашел.
Нашел саму схему как это делается и пример, но как сделать это на инстанте не пойму, так как еще не особо дружу с CSS и HTML. Может кто знает как это сделать для InstantCMS 1.10.3, думаю не только мне данная функция пригодится...
Фот сам пример и способ di-grand.com/css/105-effekt-priblizheniya-zum-na-css-dlya-kartinok.html
#2 30 сентября 2014 в 20:41
Там же абсолютно всё написано.
Что ж вам ещё надо?
#3 30 сентября 2014 в 20:55
убежал от 1-ой ветки, но имея в запасе миниатюру и не только реализация обречена на победу. Отдаем в шаблоне большую фото в JS и радуемся.
#4 30 сентября 2014 в 20:58
а зачем плагины то, учите css3 код примерно такой
  1.  
  2. .list-material .thumb img {
  3. transition: all 300ms ease-out 0s;
  4. }
  5. .list-material .thumb:hover img {
  6. transform: scale(1.1);
  7. }
  8.  
покажите сайте, скажу конкретный код для вашего сайта.
#5 30 сентября 2014 в 21:23
maxisoft, html5 и ccs3 очень хорошо, но ведь ни все видят
#6 30 сентября 2014 в 21:27
maxisoft, кстати… можно одно-страничный (ну почти) инстант зарядить… думки были… но не скоро реализация… есть возможность? пользуйтесь идеей!
#7 30 сентября 2014 в 21:35

maxisoft, html5 и ccs3 очень хорошо, но ведь ни все видят

PIN
И кто же не видит IE6, IE7? старый добрый раритет.
#8 30 сентября 2014 в 21:47
К движку это не имеет отношения, хоть инстант, хоть друпал.
Эффект приближения это не функция, а элемент дизайна.
Открываете шаблон модуля (/templates/_ваш_шаблон_/modules/mod_latest.tpl) и файл стилей (/templates/_ваш_шаблон_/css/styles.css), далее — пошагово выполняете инструкцию. В инструкции всё необходимое уже описано.
#9 30 сентября 2014 в 21:56
много чего чего-то не поддерживает, ну ни мне же вам объяснять ))
цитирую: В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3, взял здесь.
но это так… сам закрываю на это глаза
#10 17 октября 2014 в 00:04
PIN, ишак не поддерживает потому что к самой ОСи связан напрямую.
Фронткодеры ставят заплатки и костыли. Хотя это не всегда эффективно.
Но ишак и js криво выполняет, так что в любом случае:

.list-material .thumb img {
transition: all 300ms ease-out 0s;
}
.list-material .thumb:hover img {
transform: scale(1.1);
}

maxisoft
#11 17 октября 2014 в 00:34
эффект приближения возможен путём простого применения css-transitions, вы же сами привели ссылку в первопосте… а что до старых "осликов", таки кто на них внимание обращает? имхо, чем грузить сайт лишними скриптами, лучше забыть про ИЕ )))
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.