Slider z newsami

2011-01-10 18:03:26 Post #1 gość_ja

 
Witam mam problem z sliderem gdy zmienilem jego wyglad ze pasek jest po calej szerokosci nie zmienia mi napisu tylko sam obrazek
http://transferyligowe.pl/news/
Kod pliku index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script>

$(document).ready(function() {

//Speed of the slideshow
var speed = 5000;

//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-excerpt, #excerpt li').height($('#slider').height());

//Assign a timer, so it will run periodically
var run = setInterval('newsscoller(0)', speed);

$('#excerpt li:first, #gallery li:first').addClass('selected');

//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});

//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});

//Next Slide by calling the function
$('#btn-next').click(function () {
newsscoller(0);
return false;
});

//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
//Put this inside $(document).ready()
//For link/number button
$('#links a').click(function () {
//stop the slide show
clearInterval(run);

//go to the item
goto('.' + $(this).attr('rel'));

//resume the slideshow
run = setInterval('newsscoller(0)', speed);
return false;

});



//Add this function after newslider function
function goto(item) {
$('#mask-gallery').scrollTo(item, 800);
$('#mask-excerpt').scrollTo(item, 800);
$(item).addClass('selected');
}
//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(

function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed);
}
);

});


function newsscoller(prev) {

//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

//if prev is set to 1 (previous item)
if (prev) {

//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

//if prev is set to 0 (next item)
} else {

//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}

//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');

//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');

//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800);

}
</script>

<style>

#slider {

/* You MUST specify the width and height */
width:520px;
height:198px;
position:relative;
overflow:hidden;
}

#mask-gallery {

overflow:hidden;
}

#gallery {

/* Clear the list style */
list-style:none;
margin:0;
padding:0;

z-index:0;

/* width = total items multiply with #mask gallery width */
width:900px;
overflow:hidden;
}

#gallery li {


/* float left, so that the items are arrangged horizontally */
float:left;
}


#mask-excerpt {

/* Set the position */
position:absolute;
bottom:0;
left:0;
z-index:500px;

/* width should be lesser than #slider width */
width:520px;
height:68px;
overflow:hidden;

}

#excerpt {
/* Opacity setting for different browsers */
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;

/* Clear the list style */
list-style:none;
margin:0;
padding:0;

/* Set the position */
z-index:10;
position:absolute;
bottom:0;
left:0;

/* Set the style */
width:520px;
height:68px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:10px;
color:#fff;
}

#excerpt li {
padding:5px;
}



.clear {
clear:both;
}


</style>
</head>

<body>
<div id="debug"></div>

<div id="slider">

<div id="mask-gallery">
<ul id="gallery">
<li class="item1"><img src="http://hempelgoschin.com/wp-content/uploads/2010/12/html5_video_timeline_tutorial-520x198.jpg" width="520" height="198" alt=""/></li>
<li class="item2"><img src="http://hempelgoschin.com/wp-content/uploads/2010/11/html_5_video_player_tutorial1-520x198.jpg" width="520" height="198" alt=""/></li>
<li class="item3"><img src="http://descontamina.cl/blog/wp-content/uploads/2010/06/Poleras-Nike-Mundial-Ecologicas-520x198.jpg" width="520" height="198" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li class="item1">1:18 co sie wtedy stalo?</li>
<li class="item2">Trawa rośnie</li>
<li class="item3">Słabi?</li>
</ul>
</div>

</div>

<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-play">play</a>
<a href="#" id="btn-next">next</a>
</div>
<div id="links">
<a href="#" rel="item1">1</a>
<a href="#" rel="item2">2</a>
<a href="#" rel="item3">3</a>
</div>


<div class="clear"></div>
</body>
</html>

Odpowiedz