Автор Тема: Картинки слайдера съезжают  (Прочитано 359 раз)

28 Ноябрь 2014, 00:23:44
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Привет еще раз - след проблема:

Слайдер производителей на главной странице.

Вот код

.jcarousel-skin-tango {
    background: #fff;


}
.jcarousel-skin-tango .jcarousel-container { margin:0;  }
.jcarousel-skin-tango .jcarousel-container li { padding: 0 !important;}
.jcarousel-skin-tango .jcarousel-container li a {line-height: 0;}
.jcarousel-skin-tango .jcarousel-container li img {display: block;}
.jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; }
.jcarousel-skin-tango .jcarousel-container-horizontal {
  /*  width: 860px;*/
    padding: 10px 60px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
  /*  width:  880px;*/
 
}
.jcarousel-skin-tango .jcarousel-item {


}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
    margin-right: 20px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 26px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../img/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 26px;
    left: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: -10px;
    background-image: url(../img/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

В общем если здесь .jcarousel-skin-tango .jcarousel-item {} ничего не указывать, то картинки начинают съезжать в несколько строчек. Если же указать длину каждого элемента, даже 1px, то они выстраиваются в ряд. Проблема последнего способа в том, что все картинки разной ширины, поэтому расстояние между ними получается разное. В первом случае расстояние равное, но они почему-то съезжают в несколько рядов.

Помогите пожалуйста.

Съехавшие



С указанной длиной 75px. Как видите, всё равно не хватает. Если сделать больше, совсем некрасиво.

28 Ноябрь 2014, 09:29:43
Ответ #1
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Парни, помогите пожалуйста. Не могу, очень бесит эта проблемка)
28 Ноябрь 2014, 10:23:12
Ответ #2
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Еще немного порылся.

Проблема в том, что в коде откуда-то берется длина в 300px. Всё, что сверху (+240) это отступы, которые я сам задаю. Откуда берется эта длина в 300px не понимаю.



28 Ноябрь 2014, 11:15:29
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 991
  • Репутация: +5/-0
  • Иногда заглядываю
    • Просмотр профиля
    • Помощь патентообладателям по продаже патентов.
Ну наверно из CSS какая версия PS.
Не боги горшки обжигают, не зачем им такой хренью заниматься.
28 Ноябрь 2014, 11:16:50
Ответ #4
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
28 Ноябрь 2014, 11:21:54
Ответ #5
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вот код шаблона

<link rel="stylesheet" type="text/css" href="{$module_dir}css/skin.css"/>
<script src="{$module_dir}js/jquery.jcarousel.min.js" type="text/javascript"></script>
    <script src="{$module_dir}js/slide.js" type="text/javascript"></script>
   
{if $manufacturers}
   <ul id="mycarousel" class="jcarousel-skin-tango">
      {foreach from=$manufacturers item='manufacturer' name=manufacturer}
<li>
<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{$manufacturer.name|truncate:25:'...'|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}tmp/manufacturer_mini_{$manufacturer.id_manufacturer}_1.jpg" alt="{$manufacturer.name|truncate:15:'...'|escape:'htmlall':'UTF-8'}" /></a>
</li>
      {/foreach}
    </ul>
 

{/if}



Вот код skin.css



.jcarousel-skin-tango {
    background: #fff;




}
.jcarousel-skin-tango .jcarousel-container { margin:0;  }
.jcarousel-skin-tango .jcarousel-container li { padding: 0 !important;}
.jcarousel-skin-tango .jcarousel-container ul {width: 300px;}
.jcarousel-skin-tango .jcarousel-container li a {line-height: 0;}
.jcarousel-skin-tango .jcarousel-container li img {display:  block;}
.jcarousel-skin-tango .jcarousel-direction-rtl { direction:rtl; }
.jcarousel-skin-tango .jcarousel-container-horizontal {
  /*  width: 860px;*/
 
    padding: 10px 60px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {

  /*  width:  880px;*/
 
}
.jcarousel-skin-tango .jcarousel-item {




}


.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
    margin-right: 20px;

}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
    margin-right: 0;

}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;

}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 26px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/next-horizontal.png) no-repeat 0 0;

}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../img/prev-horizontal.png);

}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 26px;
    left: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../img/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: -10px;
    background-image: url(../img/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    opacity:0.6
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    opacity:0.6
}

Как я понимаю, дело в этой строчке. Как ее исправить не понимаю.

28 Ноябрь 2014, 11:25:47
Ответ #6
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
.jcarousel-skin-tango .jcarousel-container ul {width: 300px;} Эта строчка моя, извиняюсь, удалил уже.
28 Ноябрь 2014, 12:16:25
Ответ #7
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Начал искать где находится mycarousel из
<ul id="mycarousel" class="jcarousel-skin-tango"> потому что без него логотипы выстраиваются просто в стандартный список в столбик.
Нашел только здесь в js файле.
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 1,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});
Как понял, отсюда вызывается функция jcarousel. Можно здесь как-то задать размеры? В скриптах совсем ничего не понимаю.
28 Ноябрь 2014, 12:22:43
Ответ #8
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Нашел, всем спасибо  :D

28 Ноябрь 2014, 12:59:25
Ответ #9
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86543
  • Репутация: +25419/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Расчет ширины элементов просиходит в файле slide.js.