CSS interessato da JavaScript per EASYSLider 1.7

Question

Sto cercando di ottenere un bel effetto di sovrapposizione che va con un cursore usando Easyslider 1.7. Non solo dovrebbe includere immagini, ma anche testo che rappresenta l'immagine. Ora ho problemi al rivestimento del testo sulla pagina dove ne ho bisogno.

http://intranet.streamflame.com

Questa è la home page, la sezione in cui vedi la sovrapposizione nera sull'immagine di scorrimento principale è dove si suppone che il testo sia seduto. Ora se sbaglio del codice per scorrere il testo, il testo si siede dove dovrebbe. Tuttavia, non appena aggiungo lo script per scorrere il testo allo stesso tempo, sembra rendere il testo sparire.

Ecco il mio codice.
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>

.

Nota: Ho provato a mettere lo script per il testo sotto lo script per l'immagine, questo non ha alcuna modifica all'espetto.
Sperando che qualcuno possa aiutare.

Answer 1

Aggiunta di effetto cursore al testo di riempimento imposta le sue proprietà da jquery

È il risultato del tuo Li all'interno del testo-rifornimento che non prende la sua altezza.Quindi la prima soluzione è quella di rendere il Li che prenda la sua altezza aggiungendo clearfix in modalità avanzata o semplice:

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

.

dopo ogni

<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>

.

Quindi sembra:

<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>

.

e infine Gestisci la posizione in alto del tuo file di riempimento