Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]Problem z s3Slider
.rmvb's
post
Post #1





Grupa: Zarejestrowani
Postów: 37
Pomógł: 0
Dołączył: 26.09.2012

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
john-johnson
post
Post #2





Grupa: Zarejestrowani
Postów: 10
Pomógł: 1
Dołączył: 5.01.2013

Ostrzeżenie: (0%)
-----

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


Ten post edytował john-johnson 5.01.2013, 19:38:47
Go to the top of the page
+Quote Post

Posty w temacie
- .rmvb's   [JavaScript]Problem z s3Slider   4.01.2013, 18:37:51
- - lobopol   Pokaż kod.   4.01.2013, 19:49:00
- - .rmvb's   Tutaj mam funkcję z tego właśnie slidera(dodałem d...   4.01.2013, 20:05:02
- - Gość   ustaw inne wartości dla timeOut   4.01.2013, 21:57:10
- - .rmvb's   nic to nie pomogło kod wykonuje się w jednym okni...   5.01.2013, 17:37:20
- - lobopol   Pokaż to może online, nie znam tej biblioteki, a n...   5.01.2013, 18:09:56
- - john-johnson   Ten przykład działa, postaraj się na nim wzorować ...   5.01.2013, 19:37:15

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 17.10.2025 - 13:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn