Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][MySQL][PHP]Player z obrazkami
Forum PHP.pl > Forum > Przedszkole
brzanek
2.03.2016, 12:12:24
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] pobierz, plaintext 
  1. <?php
  2. include ("../warunki/db.php");
  3. ?>
  4.  
  5. <html>
  6. <head>
  7. <link rel="stylesheet" href="./css/jquery.imageplayer.css">
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  9. <script type="text/javascript" src="./js/jquery.imageplayer.js"></script>
  10. <style type="text/css">
  11.   body {
  12.     margin:0;
  13.     padding:0;
  14.     font-family:arial, helvetica, sans-serif;
  15.     font-size:9pt;
  16.   }
  17.   #container {
  18.     width:650px;
  19.     padding:20px;
  20.     background:#fff;
  21.     margin:30px auto 0 auto;
  22.     text-align:left;
  23. 	box-shadow: 0px 0px 300px #ccc;
  24.   }
  25.   #footer {
  26.     margin:20px 0 0 0;
  27.     padding:20px 0 0 0;
  28.     text-align:right;
  29.     color:#777;
  30.     border-top:1px solid #ccc;
  31.   }
  32.   h1 {
  33.     font-size:38pt;
  34.     padding-bottom:10px;
  35.     margin:0 0 10px 0;
  36.     border-bottom:1px solid #ccc;
  37. 	font-family: 'Lobster', cursive;
  38. 	text-shadow: 0.05em 0.05em #999, 0.1em 0.1em #CCC, 0.15em 0.15em #EEE;
  39.   }
  40.   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;}
  41.   pre {
  42.     border:1px solid #ccc;
  43.     padding:10px;
  44.     background:#eee;
  45.   }
  46.   a {
  47.     color:#d00;
  48.   }
  49.   a:hover { color:#fff; background-color:#333; }
  50.  
  51. .tlo {
  52. 	background: url(images/m1.png) no-repeat;
  53. 	width: 537px;
  54. 	height:614px;
  55. }
  56. .tloo {
  57. position: absolute; left: 145px; top: 185px;
  58. font-family:Tahoma;
  59. font-size: 24px;
  60. font-weight:900;
  61. text-shadow: 1px 2px 0px #5b5b5b;
  62. color: #e9d31b;
  63. }
  64. .tlo1 {
  65. 	width: 537px;
  66. 	height:614px;
  67. 	opacity: 0.8;
  68. 	-moz-opacity:0.8;
  69. }
  70. .hover img {display:none; border:none;}
  71. .hover {position: relative;}
  72. .hover:hover img {display: block; position: absolute; top: 0em; left: 0;}
  73. </style>
  74. <script type="text/javascript">
  75.  
  76.   var _gaq = _gaq || [];
  77.   _gaq.push(['_setAccount', 'UA-30057581-1']);
  78.   _gaq.push(['_trackPageview']);
  79.  
  80.   (function() {
  81.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  82.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  83.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  84.   })();
  85.  
  86. </script>
  87. </head>
  88. <body>
  89.   <div id="">
  90.     <ul id="image_player2">
  91.         <li>
  92. <?php
  93. $result = mysql_query("SELECT * FROM radar ORDER BY id DESC LIMIT 50") or die(mysql_error());  
  94. while($row = mysql_fetch_array($result)) {		
  95. echo "<div class='tlo'>";
  96. echo "<div class='tlo1'><img src='http://brzanek.webd.pl/radaropady/".$row['data']."'></div>";
  97. echo "<div class='tloo'>".$row['dzien']."</div>";
  98. echo "</div>";
  99. }
  100. ?>		
  101. 		</li>
  102.     </ul>
  103.   </div>
  104. 	<script type="text/javascript">
  105.         $('#image_player').imagePlayer();
  106.         $('#image_player2').imagePlayer({
  107.             autoStart: false,
  108.             stageWidth:537,
  109.             stageHeight:614,
  110. 			captions: { // starting in frame 1, ideally you'd set a caption per frame	
  111. 				1: "test",
  112. 				2: "test2"
  113. 			},
  114.             delay: 2/9 // 12 frames per second
  115.         });
  116. 	</script>
  117. </body>
  118. </html>
[PHP] pobierz, plaintext


Strona
http://brzanek.webd.pl/opadyradar/index.php
Wazniak96
2.03.2016, 13:33:31
97 linijka. Znasz podstawy SQL?
[SQL] pobierz, plaintext 
  1. SELECT * FROM radar ORDER BY id ASC LIMIT 50
[SQL] pobierz, plaintext


Pytanie nr. 2.
Albo nakładasz na obraz datę przez np. PHP GD edytując samą grafikę albo bawisz się w CSS nakładając na obrazek div z napisem/robisz z obrazka tło div i w nim div z datą.
brzanek
2.03.2016, 13:44:05
Wazniak96 tyle to ja wiem że ta linia odpowiada za pobieranie odpowiednich rekordów z bazy danych. Ale w tej tabeli mam ponad 2000 rekordów a ja potrzebuję pobrać ostatnie 50 w takiej kolejności.
1950
1951
1952
1953
... i tak dalej.
Tak wygląda moja tabele z danymi.

Potrzebuję nałożyć na obrazek daty z tabeli dzien.
Zaznaczam jednak że data powinna zmieniać się wraz z obrazkiem.
Napiszę jeszcze jak to jest złożone.
Mam mapę

Na nią nałożony jest obraz radarowy z tytułem z bazy danych np.

Na to wszystko potrzebuję nałożyć jeszcze datę.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.