I'm trying to get a nice overlay effect going with a slider using EasySlider 1.7. Not only should this include images, but also text that represents the image. Now I'm having trouble lining up the text on the page where I need it.
http://intranet.streamflame.com
That is the home page, The section where you see the black overlay on the main scrolling image is where the text is supposed to sit. Now if I get rid of the code to scroll the text, the text sits where it is supposed to. However as soon as I add the script to scroll the text at the same time, it seems to make the text disappear.
Here's my Code.
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>
Note: I have tried putting the script for the text under the script for the image, this has no change to the look of it.
Hoping someone can help.
Adding slider effect to filler text sets its properties to by jquery
It is the result of your li inside the filler-text not taking its height. so first solution is to make the li take its height by adding clearfix in advance mode or simple:
<div style="clear: both;"></div>
after each
<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>
So it looks like:
<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>
And finally manage the top position of your filler-text