Witam posiadam na stronie player, który pobiera ostatnie 50 rekordów z bazy danych w wyświetla je w formie obrazków.
Problem w tym że player odtwarza od najnowszego pliku (rekordu) z bazy danych. Jak zrobić aby odtwarzanie było od tyłu czyli np. od rekordu 500 do 550.
Kolejny problem to jak mogę dodać tekst pobrany z bazy danych na tych obrazkach? Chodzi mi o godzinę z jakiej pogodzi dany rekord.
Kod pliku z odtwarzaczem
<?php
include ("../warunki/db.php");
?>
<html>
<head>
<link rel="stylesheet" href="./css/jquery.imageplayer.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.imageplayer.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
font-family:arial, helvetica, sans-serif;
font-size:9pt;
}
#container {
width:650px;
padding:20px;
background:#fff;
margin:30px auto 0 auto;
text-align:left;
box-shadow: 0px 0px 300px #ccc;
}
#footer {
margin:20px 0 0 0;
padding:20px 0 0 0;
text-align:right;
color:#777;
border-top:1px solid #ccc;
}
h1 {
font-size:38pt;
padding-bottom:10px;
margin:0 0 10px 0;
border-bottom:1px solid #ccc;
font-family: 'Lobster', cursive;
text-shadow: 0.05em 0.05em #999, 0.1em 0.1em #CCC, 0.15em 0.15em #EEE;
}
h3 { font-size:24pt; font-family: 'Lobster', cursive; text-shadow: 0.05em 0.05em #999, 0.1em 0.1em #CCC, 0.15em 0.15em #EEE;}
pre {
border:1px solid #ccc;
padding:10px;
background:#eee;
}
a {
color:#d00;
}
a:hover { color:#fff; background-color:#333; }
.tlo {
background: url(images/m1.png) no-repeat;
width: 537px;
height:614px;
}
.tloo {
position: absolute; left: 145px; top: 185px;
font-family:Tahoma;
font-size: 24px;
font-weight:900;
text-shadow: 1px 2px 0px #5b5b5b;
color: #e9d31b;
}
.tlo1 {
width: 537px;
height:614px;
opacity: 0.8;
-moz-opacity:0.8;
}
.hover img {display:none; border:none;}
.hover {position: relative;}
.hover:hover img {display: block; position: absolute; top: 0em; left: 0;}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30057581-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="">
<ul id="image_player2">
<li>
<?php
echo "<div class='tlo'>"; echo "<div class='tlo1'><img src='http://brzanek.webd.pl/radaropady/".$row['data']."'></div>"; echo "<div class='tloo'>".$row['dzien']."</div>"; }
?>
</li>
</ul>
</div>
<script type="text/javascript">
$('#image_player').imagePlayer();
$('#image_player2').imagePlayer({
autoStart: false,
stageWidth:537,
stageHeight:614,
captions: { // starting in frame 1, ideally you'd set a caption per frame
1: "test",
2: "test2"
},
delay: 2/9 // 12 frames per second
});
</script>
</body>
</html>
Strona
http://brzanek.webd.pl/opadyradar/index.php