Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: zmiana zdjecia co okreslony czas
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
michal47
16.05.2014, 22:16:27
witam

cwicze nad projektem ktory wyswietla slajd ze zdjeciam co okreslony czas
sa 3 moduly slajdow
a) slajd z przykladowymi zdjeciami ktore sie zmieniaja co kilka sekund i zdjecje menu dla sniadan ktore jest widoczne caly czas podczas slajdu a
cool.gif slajd z przykladowymi zdjeciami ktore sie zmieniaja co kilka sekund i zdjecje menu dla obiadow ktore jest widoczne caly czas podczas slajdu b
c) slajd z przykladowymi zdjeciami ktore sie zmieniaja co kilka sekund i zdjecje menu dla kolacji ktore jest widoczne caly czas podczas slajdu c

chcialbym napisac to tak zeby od godziny np : 8 rano do 11 wyswietlal sie slajd a
od 11 do 15 slajd b
i od 15 do np 22 slajd c


myslalem zeby zrobic to w petli i inkrementowac liczbe co kilka sekund i a gdy przekroczy dana wartosc poprostu ja wyzerowac ale to chyba zbyt kiepskie rozwiazanie

moje pytanie :
czy jest jakas mozliwosc pobrania godziny systemowej zeby to zautomatyzowac i w jaki sposob moglbym to zaimplementowac waszym zdaniem?
a moze to nie wykonalne i macie jakies lepsze pomysly?

funkcja wyswietlajaca zdjecia

[HTML] pobierz, plaintext 
  1. var swiper;
  2.  
  3.  
  4.  
  5. var app = {
  6.  
  7. 	init : function(){
  8. 		swiper = new Swiper('.swiper-container',{
  9. 			visibilityFullFit:true,
  10. 			momentumBounce:false,	
  11.  
  12.  
  13.  
  14. 				onSlideChangeEnd: function(){
  15.  
  16. 				app.nextSlide($('.swiper-slide-active'));
  17. 				alert('test');
  18. 		    }
  19. 		});
  20. 		app.initPlaylists($('body'));
  21. 		app.initPlaylists($('.swiper-slide-active'));		
  22. 		app.nextSlide($('.swiper-slide-active'));
  23.  
  24. 	},
  25.  
  26.  
  27.  
  28. 	nextSlide: function(currentSlide){
  29. 		app.delay(function(){
  30. 			if(swiper.swipeNext(1000) === true){
  31. 				console.log('d');
  32. 			}
  33. 			else{
  34. 				swiper.swipeTo(0,1000);
  35. 			}
  36. 		},currentSlide.data("time")*1000);
  37. 	 },
  38.  
  39.  
  40.  
  41. 	startDiapo : function(currentPlaylist){
  42. 		// if(!currentPlaylist.hasClass('active')){
  43. 		// 	return false;
  44. 		// }
  45. 		// else{
  46. 		app.nextDiapo(currentPlaylist.find('.diapo:first-child'));
  47. 		// }
  48. 	   },
  49.  
  50.  
  51.  
  52. 	nextDiapo : function(currentDiapo){
  53. 		app.delay(function(){
  54. 			currentDiapo.css('z-index',1).siblings().css('z-index',0);
  55. 			if(currentDiapo.next().index() !== -1){
  56. 				currentDiapo.next().show();
  57. 				currentDiapo.fadeOut();
  58. 				app.nextDiapo(currentDiapo.next());			
  59. 			}
  60. 			else{
  61. 				console.log(currentDiapo.siblings().first());
  62. 				currentDiapo.siblings().first().fadeIn();
  63. 				currentDiapo.fadeOut();
  64. 				app.nextDiapo(currentDiapo.siblings().first());
  65. 			}
  66. 		},currentDiapo.data("time")*1000);
  67.  
  68. 	   },
  69. 	initPlaylists : function(currentPage){
  70. 		$('.playlist').removeClass('active');
  71. 		$('.playlist', currentPage).addClass('active');
  72. 		$('.playlist', currentPage).each(function(index, item){
  73. 			app.startDiapo($(item));
  74. 		});
  75. 	},
  76. 	delay : (function(){
  77. 		var timer = 0;
  78. 		return function(callback, ms){
  79. 			clearTimerout=timer;
  80. 			timer = setTimeout(callback, ms);
  81. 		};
  82. 	})()
  83. };
  84. $(document).ready(function(){
  85. 	app.init();
  86. });
  87.  
  88.  
  89.  
  90.  
[HTML] pobierz, plaintext







plik xml

[XML] pobierz, plaintext 
  1. <screen>
  2. 		    				<name>Ecran portrait</name>
  3. 		    				<display></display>
  4. 		    				<width>1080px</width>
  5. 		    				<height>1920px</height>
  6. 		    				<update></update>
  7. 		    				<sync>20140418114246</sync><item client="1" master="1"><pages id="271" time="60" width="18" height="32" page_px="0" page_py="0">
  8.     						<name>1</name><main_media/><item client="1" master="1"><pages id="273" time="1" width="18" height="32" page_px="1" page_py="1">
  9.     						<name>1</name><main_media/><playlist id="20"><name>sample_fullhd_portrait</name><media id="72" type="picture" time="5">
  10. 		    			 							<media_name>1370591661095.jpg</media_name>
  11. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/1370591661095.jpg</src>
  12. 		    			 							<htmlblock></htmlblock>
  13. 		    			 						</media><media id="73" type="picture" time="5">
  14. 		    			 							<media_name>La-Maison-du-Whisky-whisky-on-the-rocks-683x1024.jpg</media_name>
  15. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/La-Maison-du-Whisky-whisky-on-the-rocks-683x1024.jpg</src>
  16. 		    			 							<htmlblock></htmlblock>
  17. 		    			 						</media><media id="75" type="picture" time="5">
  18. 		    			 							<media_name>rougeaux.jpg</media_name>
  19. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/rougeaux.jpg</src>
  20. 		    			 							<htmlblock></htmlblock>
  21. 		    			 						</media></playlist><item client="1" master="1"></item></pages></item></pages><pages id="272" start="33" end="15" time="60" width="18" height="32" page_px="0" page_py="0">
  22.     						<name>1</name><main_media/><item client="1" master="1"><pages id="274" time="1" width="9" height="6" page_px="1" page_py="11">
  23.     						<name>1</name><main_media/><playlist id="18"><name>plats</name><media id="58" type="picture" time="5">
  24. 		    			 							<media_name>plat1.jpg</media_name>
  25. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/plat1.jpg</src>
  26. 		    			 							<htmlblock></htmlblock>
  27. 		    			 						</media><media id="59" type="picture" time="5">
  28. 		    			 							<media_name>plat2.jpg</media_name>
  29. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/plat2.jpg</src>
  30. 		    			 							<htmlblock></htmlblock>
  31. 		    			 						</media><media id="60" type="picture" time="5">
  32. 		    			 							<media_name>plat3.jpg</media_name>
  33. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/plat3.jpg</src>
  34. 		    			 							<htmlblock></htmlblock>
  35. 		    			 						</media><media id="61" type="picture" time="5">
  36. 		    			 							<media_name>plat4.jpg</media_name>
  37. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/plat4.jpg</src>
  38. 		    			 							<htmlblock></htmlblock>
  39. 		    			 						</media></playlist><item client="1" master="1"></item></pages><pages id="275"  time="1" start="1000" reversible="false" width="18" height="10" page_px="1" page_py="1">
  40.     						<name>1</name><main_media/><playlist id="17"><name>entete</name><media id="52" type="picture" time="5">
  41. 		    			 							<media_name>header1.jpg</media_name>
  42. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/header1.jpg</src>
  43. 		    			 							<htmlblock></htmlblock>
  44. 		    			 						</media><media id="53" type="picture" time="5">
  45. 		    			 							<media_name>header2.jpg</media_name>
  46. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/header2.jpg</src>
  47. 		    			 							<htmlblock></htmlblock>
  48. 		    			 						</media></playlist><item client="1" master="1"></item></pages><pages id="276" time="1" start="1000" reversible="false" width="18" height="4" page_px="1" page_py="29">
  49.     						<name>1</name><main_media id="51">
  50.     									<media>footer.jpg</media>
  51.     									<type>picture</type>
  52.     									<src>ks359714.kimsufi.com/easypubdata//medias/1/footer.jpg</src>
  53.     									<htmlblock></htmlblock>
  54.     								</main_media><item client="1" master="1"></item></pages><pages id="277" time="1"  start="1000" reversible="false" width="9" height="6" page_px="1" page_py="17">
  55.     						<name>1</name><main_media/><playlist id="16"><name>soiree</name><media id="50" type="picture" time="5">
  56. 		    			 							<media_name>cong4.jpg</media_name>
  57. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/cong4.jpg</src>
  58. 		    			 							<htmlblock></htmlblock>
  59. 		    			 						</media><media id="54" type="picture" time="5">
  60. 		    			 							<media_name>night1.jpg</media_name>
  61. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/night1.jpg</src>
  62. 		    			 							<htmlblock></htmlblock>
  63. 		    			 						</media><media id="56" type="picture" time="5">
  64. 		    			 							<media_name>night3.jpg</media_name>
  65. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/night3.jpg</src>
  66. 		    			 							<htmlblock></htmlblock>
  67. 		    			 						</media></playlist><item client="1" master="1"></item></pages><pages id="278" time="1" width="9" height="6" page_px="1" page_py="23">
  68.     						<name>1</name><main_media/><playlist id="19"><name>congres</name><media id="47" type="picture" time="5">
  69. 		    			 							<media_name>cong1.jpg</media_name>
  70. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/cong1.jpg</src>
  71. 		    			 							<htmlblock></htmlblock>
  72. 		    			 						</media><media id="48" type="picture" time="5">
  73. 		    			 							<media_name>cong2.jpg</media_name>
  74. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/cong2.jpg</src>
  75. 		    			 							<htmlblock></htmlblock>
  76. 		    			 						</media><media id="49" type="picture" time="5">
  77. 		    			 							<media_name>cong3.jpg</media_name>
  78. 		    			 							<src>ks359714.kimsufi.com/easypubdata//medias/1/cong3.jpg</src>
  79. 		    			 							<htmlblock></htmlblock>
  80. 		    			 						</media></playlist><item client="1" master="1"></item></pages><pages id="279" time="1" width="9" height="18" page_px="10" page_py="11">
  81.     						<name>1</name><main_media id="46">
  82.     									<media>Hello</media>
  83.     									<type>text</type>
  84.     									<src>ks359714.kimsufi.com/easypubdata//medias/1/Hello</src>
  85.     									<htmlblock><br />
  86. <br />
  87. <br />
  88. <br />
  89. <br />
  90. <br />
  91. <br />
  92. <br />
  93. <br />
  94. <br />
  95. <br />
  96. <br />
  97. <br />
  98.  
  99. <p style="text-align: center;"><span style="font-family: 'lucida sans unicode', 'lucida grande', sans-serif; font-size: 48px;">La carte du</span></p>
  100.  
  101.  
  102. <p style="text-align: center;"><font face="lavanderia sturdy"><span style="font-size: 72px;">Spiaggia</span></font></p>
  103. <br />
  104. <br />
  105.  
  106.  
  107. <br />
  108. <br />
  109. <br />
  110.  
  111.  
  112. <p style="text-align: center;"><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong>Le Filet jaune poęlé</strong></span></span><br />
  113. céleri rave et cčpes bouchon au jus de rôti</p>
  114.  
  115.  
  116. <p style="text-align: center;"><strong><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><span style="font-size:20px;">Le coeur de filet de boeuf aux girolles</span></span></strong><br />
  117. écrasé de pomme de terre et tomate grappe</p>
  118.  
  119. <p style="text-align: center;"> </p>
  120.  
  121. <p style="text-align: center;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><span style="font-size:20px;">Risotto</span></strong></span><br />
  122. retour du marché</p>
  123.  
  124. <div> </div>
  125.  
  126. <div>
  127. <p style="text-align: center;"><span style="font-size: 20px;"><span style="font-family: 'lucida sans unicode', 'lucida grande', sans-serif;"><strong>Salade César</strong></span></span><br />
  128. de volaille lard croustillant</p>
  129.  
  130. <p style="text-align: center;"> </p>
  131.  
  132. <p style="text-align: center;"><font face="lucida sans unicode, lucida grande, sans-serif"><span style="font-size: 20px;"><b>Salade Niçoise</b></span></font><br />
  133. revisitée au thon mi-cuit</p>
  134.  
  135. <p style="text-align: center;"> </p>
  136.  
  137. <p style="text-align: center;"><span style="font-family: 'lucida sans unicode', 'lucida grande', sans-serif;"><strong><span style="font-size: 20px;">Tartare de boeuf</span></strong></span><br />
  138. au couteau préparé ŕ votre table</p>
  139.  
  140. <p style="text-align: center;"> </p>
  141.  
  142. <p style="text-align: center;"><span style="font-size:20px;"><strong><span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Saumon fume ecossais</span></strong></span><br />
  143. creme epaisse et ciboulette, toasts croustillants</p>
  144. </div>
  145.  
  146. <p> </p>
  147. </htmlblock>
  148.     								</main_media><item client="1" master="1"></item></pages></item></pages></item></screen>
[XML] pobierz, plaintext

kamil4u
16.05.2014, 23:39:17
Wątpię, żeby ktoś siedział na Twojej stronie od rana do wieczora. Lepiej zrobić to w PHP, czyli bez dynamicznej zmiany, a po prostu gdy ktoś w chodzi na stronę to w PHP( czy innym języku po stronie serwera ) patrzysz jaka to godzina i w zależności od tego pokazujesz dany blok. A jeżeli już tak bardzo chcesz taką dynamiczną zmianę to zrób tak:
- pobierasz/ustalasz godzinę zmiany
- już w JS liczysz różnicę między aktualną godziną, a ustaloną
- używasz funkcji setTimeout gdzie jako funkcję masz zmianę slajdu, a jako czas ową różnicę.
michal47
17.05.2014, 08:04:59
masz racje w php zapewne bedzie latwiej to zrobic ale ja jestem jeszcze swieze pieczywo w php
mozesz mnie troche naprowadzic jak bys sie zabral za to w php
ponizej zalaczam moj plik index.php


[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="UTF-8">
  6.   <link rel="icon" type="image/png" href="logo.png" />
  7.   <title>EasyMediaSystems - Player</title>
  8.   <link href="css/reset.css" rel="stylesheet" media="screen">
  9.   <link href="css/lib/swiper.css" rel="stylesheet" media="screen">
  10.   <link href="css/main.css" rel="stylesheet" media="screen">
  11. </head>
  12. <body>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. <?php 
  2.   $xml=simplexml_load_file('data/data.xml');
  3.  $global_width = $xml->width;
  4.  $global_height = $xml->height;
  5.  
  6. ?>
  7.       <div class="swiper-container swiper-parent" style="height:<?php echo $global_height;?> ;width:<?php echo $global_width;?> ;">
  8.         <div class="swiper-wrapper">
  9.        <?php
  10.  
  11.  
  12.  function ratioWidth($width, $global_width){
  13.   $love = ($global_width / 18) * $width;
  14.   return $love;
  15.  }
  16.  function ratioHeight($height, $global_height){
  17.   $love = ($global_height / 32) * $height;
  18.   return $love;
  19.  }
  20.  
  21.  foreach ($xml->item->pages as $key => $page) {
  22.      echo "<div class='swiper-slide' data-time='".$page['time']."'>";
  23.       echo "<div class='content-slide' style='height:".$global_height.";width:".$global_width.";'>"; 
  24.       foreach ($page->item->pages as $key => $block) {
  25.         echo '<div style="';
  26.         /* bug hors grid */
  27.         if($block['page_py']>32){
  28.           $block['page_py'] =1;
  29.         }
  30.         if($block['page_px']>18){
  31.           $block['page_px'] =1;
  32.         }
  33.         echo 'height:'.round(ratioHeight($block['height'],$global_height)).'px;';
  34.         echo 'width:'.round(ratioWidth($block['width'],$global_width)).'px;';
  35.         echo 'top:'.round(ratioHeight($block['page_py']-1,$global_height)).'px;';
  36.         echo 'left:'.round(ratioWidth($block['page_px']-1,$global_width)).'px;';
  37.         echo 'color:white;';
  38.  
  39.         $playlist_count;
  40.         $count;
  41.         foreach($block->main_media as $elem){
  42.           $count= $elem->count();
  43.         }
  44.         if($count === 4 AND $block->main_media->type=='picture'){
  45.           echo 'background-image:url(data/media/'.$block->main_media->media.');';
  46.         }
  47.         echo '"';
  48.         if($count === 4){
  49.           echo 'class="'.$block->main_media->type.' block"';
  50.         }
  51.         else{
  52.             foreach($block->playlist as $elem){
  53.               $playlist_count= $elem->count();
  54.             }
  55.             if($playlist_count>0){
  56.                echo 'class="playlist block"';
  57.             }
  58.         }
  59.  
  60.         echo '>';
  61.           if($count === 4 AND $block->main_media->type=='text'){
  62.            echo  $block->main_media->htmlblock->asXML();
  63.           }
  64.           if($count === 0){
  65.             foreach($block->playlist as $elem){
  66.               $playlist_count= $elem->count();
  67.             }
  68.             if($playlist_count>0){
  69.               foreach($block->playlist->media as $elem){
  70.                  echo '<div class="diapo '.$elem['type'].'" data-time="'.$elem['time'].'" style="';
  71.                  if($elem['type']=='picture')
  72.                   echo 'background-image:url(data/media/'.$elem->media_name.');';
  73.                  echo'">';
  74.                  if($elem['type']=='text'){
  75.                   echo  $elem->htmlblock->asXML();
  76.                  }
  77.                  // echo $elem->media_name;
  78.                  echo '</div>';
  79.               }
  80.             }
  81.  
  82.           }
  83.           // echo round(ratioWidth($block['height'],$global_height)).'**'.round(ratioWidth($block['width'],$global_width));
  84.  
  85.         echo '</div>';
  86.       }
  87.  
  88.       echo "</div>";
  89.      echo "</div>";
  90.  }
  91. ?>
[PHP] pobierz, plaintext 
[HTML] pobierz, plaintext 
  1.  </div>
  2.       </div>
  3.   <script type="text/javascript" src="js/lib/swiper.js?cache=empty"></script>
  4.   <script type="text/javascript" src="js/lib/jquery-1.11.0.min.js?cache=empty"></script>
  5.   <script type="text/javascript" src="js/main.js?cache=empty"></script>
  6. </body>
  7.  
  8. </html>
[HTML] pobierz, plaintext
kamil4u
17.05.2014, 13:07:46
Cytat
mozesz mnie troche naprowadzic jak bys sie zabral za to w php

http://stackoverflow.com/a/8652581/2329255

Teraz musisz dopasować do swojego kodu smile.gif Czyli zamiast echo "..." wyświetlać dany slajd
michal47
17.05.2014, 13:17:57
dzieki wielki
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.