Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Problem z s3Slider
Forum PHP.pl > Forum > Przedszkole
.rmvb's
4.01.2013, 18:37:51
Witam,
Mam problem, otóż nie mogę poradzić sobie z zagnieżdzeniem s3 slidera w trzech divach jednocześnie, aby te wykonywały się w ten samym momencie.
Z jednym divem daje rade ale dwa lub trzy na raz, to kod wariuje. Nawet jeśli zmieniam nazwy divów, i ich odwołania, to kod wykona się najpierw w jednym oknie, później przejdzie do kolejnego i kolejnego.
Prosiłbym o pomoc, aby kod mógł się wykonywać równolegle w trzech oknach w jednym czasie.

Link do slidera: http://www.serie3.info/s3slider/

Przypuszczam, że slider znany, więc nie powinno być problemów smile.gif
lobopol
4.01.2013, 19:49:00
Pokaż kod.
.rmvb's
4.01.2013, 20:05:02
Tutaj mam funkcję z tego właśnie slidera(dodałem drugiego diva, którego nie czyta):
[PHP] pobierz, plaintext 
  1. $(document).ready(function() {
  2.         $('#slider').s3Slider({
  3.             timeOut: 3000
  4.         });
  5. 		$('#slider1').s3Slider({
  6.             timeOut: 3000
  7.         });
  8.     });
[PHP] pobierz, plaintext

natomiast tutaj fragment html'a:
[HTML] pobierz, plaintext 
  1. <div class="obrazSlider" style="margin-right: 75px;">
  2.  
  3. 			<div class="home_slider">
  4. 			    <div id="slider">
  5. 					<ul id="sliderContent">
  6. 						<li class="sliderImage">
  7. 							<img src="images/slider1/1.png" alt="1" />
  8. 							<span class="bottom"><strong></strong><br /></span>
  9. 						</li>
  10. 						<li class="sliderImage">
  11. 							<img src="images/slider1/2.png" alt="4" />
  12. 							<span class="bottom"><strong></strong></span>
  13. 						</li>
  14. 						<div class="clear sliderImage"></div>
  15. 					</ul>
  16. 				</div>
  17. 			</div>
  18.  
  19. 		</div>
  20. 		<div class="obrazSlider" style="margin-right: 75px;">
  21. 			<div class="home_slider">
  22. 			    <div id="slider1">
  23. 					<ul id="sliderContent">
  24. 						<li class="sliderImage">
  25. 							<img src="images/slider2/1.png" alt="1" />
  26. 							<span class="bottom"><strong></strong><br /></span>
  27. 						</li>
  28. 						<li class="sliderImage">
  29. 							<img src="images/slider2/2.png" alt="4" />
  30. 							<span class="bottom"><strong></strong></span>
  31. 						</li>
  32. 						<div class="clear sliderImage"></div>
  33. 					</ul>
  34. 				</div>
  35. 			</div>
  36.  
[HTML] pobierz, plaintext
Gość
4.01.2013, 21:57:10
ustaw inne wartości dla timeOut
.rmvb's
5.01.2013, 17:37:20
nic to nie pomogło sad.gif
kod wykonuje się w jednym oknie, po czym przerwa i przechodzi do kolejnego i kolejnego :/
Nie wiem jak zrobić, zeby wykonał się równolegle we wszystkich sad.gif
lobopol
5.01.2013, 18:09:56
Pokaż to może online, nie znam tej biblioteki, a na oko powinno działać.
john-johnson
5.01.2013, 19:37:15
Ten przykład działa, postaraj się na nim wzorować - również na stylach CSS. Musisz jednak zauważyć, że z tym skryptem jest coś nie tak. Gdy przesuniesz suwak przeglądarki, lub cokolwiek, to slidery automatycznie łapią "opóźnienia" i przestają wykonywać prace jednocześnie. Chociaż nie zawsze tak jest. U mnie zupełnie losowo, raz działają jednocześnie raz przestają. Nie znam się na JS ale pewnie to rozwiązanie twojej zagadki - wina skryptu.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" class="inner">
  3. 	<head>
  4. 		<title>Serie3 - Pages</title>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. 	<link rel="stylesheet" type="text/css" href="http://www.serie3.info/css/reset.css" />
  8. 	<link rel="stylesheet" type="text/css" href="http://www.serie3.info/css/style.css" />
  9. 		<script type="text/javascript" language="javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  10.  
  11. 	</head>
  12. 	<body style="background: #fff;">
  13.  
  14. 		<!-- CSS -->
  15. 		<link href="http://www.serie3.info/css/s3Slider/s3Slider.css" rel="stylesheet" type="text/css" media="screen" />
  16.                <!-- JavaScripts-->
  17. 		<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
  18. 		<script type="text/javascript">
  19. 		    $(document).ready(function() {
  20. 			$('#slider0').s3Slider({
  21. 			    timeOut: 3000
  22. 			});
  23. 			$('#slider1').s3Slider({
  24. 			    timeOut: 3000 
  25. 			});
  26. 			$('#slider2').s3Slider({
  27. 			    timeOut: 3000 
  28. 			});
  29. 		    });
  30. 		</script>
  31.  
  32.  
  33.                <h4>Example 1</h4>
  34.                <p>This example shows the layer appears on top or bottom.</p>
  35.                 <div id="slider0">
  36.                     <ul id="slider0Content">
  37.                         <li class="slider0Image">
  38.                             <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/1.jpg" />
  39.                             <span class="top"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
  40.  
  41.                         </li>
  42.                         <li class="slider0Image">
  43.                             <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/410/2.jpg" />
  44.                             <span class="top"><strong>Praesent</strong><br />Maecenas est erat, aliquam a, ornare eu, pretium nec, pede.</span>
  45.                         </li>
  46.  
  47.                         <div class="clear slider0Image"></div>
  48.                     </ul>
  49.                 </div>
  50.                 <!-- // slider0 -->
  51. 				<br />
  52.  
  53.                 <h4>Example 2</h4>
  54.                 <p>This example shows the layer appears on left or right.</p>
  55.  
  56.                 <div id="slider1">
  57.                     <ul id="slider1Content">
  58.                         <li class="slider1Image">
  59.                             <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/1.jpg" width="650" height="271" />
  60.                             <span class="left offset"><strong>Morbi malesuada</strong><br />Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor.</span>
  61.                         </li>
  62.                         <li class="slider1Image">
  63.                             <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/2.jpg" width="650" height="271" />
  64.  
  65.                             <span class="right"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
  66.                         </li>
  67.                         <div class="clear slider1Image"></div>
  68.                     </ul>
  69.                 </div>
  70.                 <!-- // slider1 -->
  71.                 <br />
  72.  
  73.                 <h4>Example 3</h4>
  74.                 <p>This example shows the layer appears on all sides (left, right, bottom or top).</p>
  75.  
  76.                 <div id="slider2">
  77.                     <ul id="slider2Content">
  78.                         <li class="slider2Image">
  79.                             <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/5.jpg" width="650" height="271" />
  80.                             <span class="top"><strong>Morbi malesuada</strong><br />Vivamus molestie leo sed justo. In rhoncus, enim non imperdiet feugiat, felis elit ultricies tortor.</span>
  81.                         </li>
  82.                         <li class="slider2Image">
  83.                             <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/4.jpg" width="650" height="271" />
  84.                             <span class="left offset"><strong>Lorem ipsum dolor</strong><br />Consectetuer adipiscing elit. Donec eu massa vitae arcu laoreet aliquet.</span>
  85.                         </li>
  86.  
  87.                         <div class="clear slider2Image"></div>
  88.  
  89.                     </ul>
  90.                 </div>
  91.                 <!-- // slider2 -->	
  92.  
  93. 	</body>
  94.  
  95. </html>
[HTML] pobierz, plaintext
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.