CSS, затронутый Javascript для EasySlider 1.7 - PullRequest
Новая
       3

CSS, затронутый Javascript для EasySlider 1.7

4 голосов
/ 09 июля 2010

Я пытаюсь получить хороший эффект наложения, используя слайдер EasySlider 1.7.Это должно включать не только изображения, но и текст, представляющий изображение.Теперь у меня проблемы с выравниванием текста на странице, где мне это нужно.

http://intranet.streamflame.com

Это домашняя страница. Раздел, где вы видите черное наложение на главном изображении с прокруткой, - это место, где должен находиться текст.Теперь, если я избавлюсь от кода для прокрутки текста, текст будет находиться там, где он должен.Однако, как только я добавляю скрипт для одновременной прокрутки текста, кажется, что текст исчезает.

Вот мой код.
HTML: 

<div class="filler">
   <div class="filler-picture">
   <div class="filler-img">
   <ul>{% for project in rotations %}
        <li><img src="{% thumbnail project.key_image.get_absolute_url 559x361 crop,upscale %}" width="559" height="361" alt="{{ project.title }}" /></li>
     {% endfor %}
 </ul>
</div>
<div class="filler-mask">
 <img src="{{ MEDIA_URL }}img/filler.png"  alt="filler" />
</div>
<div class="filler-text">
 <ul>
 <li>
  <span class="filler-text-left">WaterTiger</span>
     <span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
 </li>
 <li>
  <span class="filler-text-left">Dragonfly</span>
     <span class="filler-text-right">Project Dragonfly is a test project whilst we get all the site together, call it a filler if you must, there is no project dragonfly your only dreaming.</span>
 </li>
 <li>
  <span class="filler-text-left">Spacemunch</span>
     <span class="filler-text-right">Project Spacemunch is a test project whilst we get all the site together, call it a filler if you must, there is no project Spacemunch your only dreaming.</span>
 </li>
</ul>

CSS: 

.filler {

     position: relative;
      margin-left:20px;
      height:361px;
      width:559px;
      float:left;

}

.filler-mask {
    position: absolute;
    left:0; top:0;
    height:361px;
    width:559px;
    z-index: 100;
}

.filler-img{
    position: absolute;
    left:0; top:0;
    height:361px;
    width:559px;
    z-index: 50;

}

.filler-text {

      width: 558px;
      height: 68px;
      position: absolute;
      z-index: 200;
      color: #fff;

}

.filler-text li {

      list-style-type: none;
      z-index: 1000;

}

.filler-text-left {

      width: 169px;
      float: left;
      height: 48px;
      padding: 10px;
      font-size: 18pt;
      font-weight: 100;

}
.filler-text-right {

          width: 340px;
      float: right;
      height: 48px;
      padding: 10px;
      font-size: 10pt;
}

EasySlider Javascript: 

<script type="text/javascript">
       $(document).ready(function(){ 
        $(".filler-text").easySlider({
         auto: true,
         continuous: true,
         speed: 1800,
         pause: 5000,
         nextId: "next2",
         prevId: "prev2"
        });
        $(".filler-img").easySlider({
         auto: true,
         continuous: true,
         speed: 1800,
         pause: 5000,
         nextId: "next2",
         prevId: "prev2"
        });

       });
</script>

Примечание: Я попытался поместить скрипт для текста под скрипт для изображения, это не меняетвнешний вид.
Надеясь, что кто-то может помочь.

1 Ответ

1 голос
/ 13 июля 2010

Добавление эффекта ползунка к тексту заполнителя устанавливает его свойства с помощью jquery

Это результат того, что ваш текст внутри текста заполнителя не принимает его высоту.Поэтому первое решение состоит в том, чтобы заставить li принять высоту, добавив clearfix в расширенном режиме или просто: 

<div style="clear: both;"></div>

после каждого 

<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>

Так это выглядит так: 

<span class="filler-text-left">WaterTiger</span>
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span>
<div style="clear: both;"></div>

И, наконец, управляйте верхней позицией вашего наполнителя-текста

...