Информер рекомендую к просмотру для uCoz
 | |
| Очень хороший информер, который выводит материал, как вы настроите. Ставят его основном вид материала и комментариев к нему и 4 или 5 изображение. Нашел его в интернете и он реально был разрушен и не чего не выводил по сути, только дублирующий картинку, которая у него есть, если нет такого материала. Пришлось прописать ему условные операторы и настроить правильно. То по сути код в размерах был и стили такие же размеры выставлял и нужно было выбрать стили, чтоб код только по своему работал. Теперь установил на сайт и пока нормально, возможно кому пригодиться. Установка: Выбираем модуль в информер и ставим или на случайный вид или на похожие, одна колонка а вот 3 картинка. [ Каталог файлов · Материалы · В случайном порядке · Материалы: 3 · Колонки: 1 ] Код <div class="tumb"> <a href="$ENTRY_URL$"> <?if($IMG_URL1$)?><img src="$IMG_URL1$" width="236" height="130"><?else?><img src="http://i.imgur.com/Rqbo07E.png" width="236" height="130"><?endif?> <br><?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>....<?else?>$TITLE$<?endif?></a> </div> В этом коде будете выставлять ширину и длину. Теперь CSS сайта: Код .tumb { float:left; width:150; margin:10px; height:150; text-align:center; text-align:center;background: #E8E8E8; padding:5px;border: 2px solid #A09F9F; border-radius: 5px;} .tumb:hover { float:left; width:150; margin:10px; height:150; text-align:center;background: #DCDCDC; padding:5px;border: 2px solid #C7C7C7; border-radius: 5px;} Тут 2 стиля, первый отвечает за умолчание, второй при наведение, настроены уже, если кому по другому нужно, то это не очень сложно и все сделаете, не понимаете, напишите в комментариях. Что по номеру информер, то его копируем и ставим там где нужно, не нужно кого заключать не в какие коды, как центр или другое. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
 Стиль в CSS Код .zitem { width:185px; height:185px; border:4px solid #222; margin:5px 5px 5px 0; /* required to hide the image after resized */ overflow:hidden; /* for child absolute position */ position:relative; /* display div in line */ float:left; } .zitem .caption { width:185px; height:30px; background:#000; color:#fff; font-weight:bold; /* fix it at the bottom */ position:absolute; bottom:-1px; /* fix IE issue */ left:0; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=70); /* ie */ -moz-opacity:0.7; /* old mozilla browser like netscape */ -khtml-opacity: 0.7; /* for really really old safari */ opacity: 0.7; /* css standard, currently it works in most modern browsers like firefox, */ } .zitem .caption a { text-decoration:none; color:#fff; font-size:12px; /* add spacing and make the whole row clickable*/ padding:5px; display:block; } Вниз страницы перед </body> Код <script> $(document).ready(function() { //move the image in pixel var move = -15; //zoom percentage, 1.2 =120% var zoom = 1.2; //On mouse over those thumbnail $('.zitem').hover(function() { //Set the width and height according to the zoom percentage width = $('.zitem').width() * zoom; height = $('.zitem').height() * zoom; //Move and zoom the image $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200}); //Display the caption $(this).find('div.caption').stop(false,true).fadeIn(200); }, function() { //Reset the image $(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100}); //Hide the caption $(this).find('div.caption').stop(false,true).fadeOut(200); }); }); </script> Информер Каталог файлов · Материалы · В случайном порядке · Материалы: 3 · Колонки: 1 Ставить $MYINF_0$где хотите видеть. Код <div class="zitem"> <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="" title="" width="203" height="150"/></a> <div class="caption"> <a href="" title="">$TITLE$</a> </div> </div> Информер ваш понравился, воодушевил собрать свой. | |
