» »

Информер рекомендую к просмотру для uCoz


Информер рекомендую к просмотру для 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 стиля, первый отвечает за умолчание, второй при наведение, настроены уже, если кому по другому нужно, то это не очень сложно и все сделаете, не понимаете, напишите в комментариях.

Что по номеру информер, то его копируем и ставим там где нужно, не нужно кого заключать не в какие коды, как центр или другое.
12.02.2016 Просмотров: 665 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
AnTron
AnTron 12.02.2016 22:551
0
Но так если посмотреть на сайте, то нормально смотрится, и главное, что их немного, это 3 или 4 в самый раз, чем много но мелкие.
Сопрано
Сопрано 12.02.2016 22:562
0
Мне как то старые больше нравились, хоть и не читал, но по дизайну подходили.
tsakonter
tsakonter 12.02.2016 23:003
0
Trantel, ты просто насмешил, не читал, так и ставят для того чтоб читали и больше времени на сайте были, здесь теперь картинками идет, и в любом случай увидят.
YaVi
YaVi 12.02.2016 23:534
0
Классный скрипт, позже себе нас сайт поставлю) cool
ucozmental
ucozmental 13.02.2016 00:125
0
Тоже хотел это написать, а как его можно разделить на 4 в ряда?
Kosten
Kosten 13.02.2016 00:166
0
Все делается в информер, выставляем сколько нужно и сколько рядов. Но это своими словами.
Tergran
Tergran 13.02.2016 00:337
0
Но такие, где много материала в изображение, можно найти на кино сайте, на этой тематике не нужен, это явно, а вот такой подойдет.
А_С
А_С 14.02.2016 20:218
0

Стиль в 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>

Информер ваш понравился, воодушевил собрать свой.
Kosten
Kosten 14.02.2016 20:269
0
Вот только титле, нужно в операторы, то название может быть большое.
А_С
А_С 14.02.2016 20:3410
0
Цитата Kosten
Вот только титле, нужно в операторы, то название может быть большое.

Кому нужно, пример сверху. Я думаю разберутся. Спасибо за дельный совет.
avatar