Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Problem ze zrobieniem nawigacji w sliderze
Forum PHP.pl > Forum > Przedszkole
lamcpp
7.09.2011, 13:40:59
Witam, skrypt slidera, który podaje poniżej. Skrypt działa dobrze poza przyciskami next i previous,
kod odpowiedzialny za te przyciski to:

[HTML] pobierz, plaintext 
  1.            $("#button a#next").click(function(event){
  2.             var pos = $(.menuItem).prevAll('.menuItem').length;
  3. 	    $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450).next();
  4.             event.preventDefault();
  5.           });
  6.  
  7.           $("#button a#previous").click(function(event){
  8.           var pos = $(.menuItem).prevAll('.menuItem').length;
  9. 	  $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450).prev();
  10.             event.preventDefault();
  11.           });
[HTML] pobierz, plaintext


Jednak kod ten nie działa w odniesieniu do całości kodu. Zasada działania tego kawałka kodu powinna być taka, że po kliknięciu przycisku next bądź previous przez użytkownika, do zmiennej "pos" przypisany zostanie numer pozycji, dzięki ktorej w następnej linice, będziemy ustawiac dany slajd o ileś px w lewo (margin-left) dzięki czemu slajdy będą się zmmieniały po sobie. Niestety przyciski next i previous nie działają


html:
[HTML] pobierz, plaintext 
  1. <div id="main">
  2.  
  3. <div id="gallery">
  4.  
  5. <div id="slides">
  6.  
  7. <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
  8. <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
  9. <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>
  10.  
  11. </div>
  12.  
  13. <div id="menu">
  14.  
  15. <ul>
  16. <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
  17. </ul>
  18.  
  19. </div>
  20. div id="button">
  21.               <a href="#" id="previous">previous</a>
  22.               <a href="#" id="next">next</a>
  23.             </div>
  24.  
  25. </div>
  26.  
  27. </div>
[HTML] pobierz, plaintext


Css:
[HTML] pobierz, plaintext 
  1. body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
  2. 	/* Page reset */
  3. 	margin:0px;
  4. 	padding:0px;
  5. }
  6.  
  7. body{
  8. 	/* Setting default text color, background and a font stack */
  9. 	color:#444444;
  10. 	font-size:13px;
  11. 	background: #f2f2f2;
  12. 	font-family:Arial, Helvetica, sans-serif;
  13. }
  14.  
  15. /* Gallery styles */
  16.  
  17. #gallery{
  18. 	/* CSS3 Box Shadow */
  19. 	-moz-box-shadow:0 0 3px #AAAAAA;
  20. 	-webkit-box-shadow:0 0 3px #AAAAAA;
  21. 	box-shadow:0 0 3px #AAAAAA;
  22.  
  23. 	/* CSS3 Rounded Corners */
  24.  
  25. 	-moz-border-radius-bottomleft:4px;
  26. 	-webkit-border-bottom-left-radius:4px;
  27. 	border-bottom-left-radius:4px;
  28.  
  29. 	-moz-border-radius-bottomright:4px;
  30. 	-webkit-border-bottom-right-radius:4px;
  31. 	border-bottom-right-radius:4px;
  32.  
  33. 	border:1px solid white;
  34.  
  35. 	background:url(img/panel.jpg) repeat-x bottom center #ffffff;
  36.  
  37. 	/* The width of the gallery */
  38. 	width:920px;
  39. 	overflow:hidden;
  40. }
  41.  
  42. #slides{
  43. 	/* This is the slide area */
  44. 	height:400px;
  45.  
  46. 	/* jQuery changes the width later on to the sum of the widths of all the slides. */
  47. 	width:920px;
  48. 	overflow:hidden;
  49. }
  50.  
  51. .slide{
  52. 	float:left;
  53. }
  54.  
  55. #menu{
  56. 	/* This is the container for the thumbnails */
  57. 	height:45px;
  58. }
  59.  
  60. ul{
  61. 	margin:0px;
  62. 	padding:0px;
  63. }
  64.  
  65. li{
  66. 	/* Every thumbnail is a li element */
  67. 	width:60px;
  68. 	display:inline-block;
  69. 	list-style:none;
  70. 	height:45px;
  71. 	overflow:hidden;
  72. }
  73.  
  74. li.inact:hover{
  75. 	/* The inactive state, highlighted on mouse over */
  76. 	background:url(img/pic_bg.png) repeat;
  77. }
  78.  
  79. li.act,li.act:hover{
  80. 	/* The active state of the thumb */
  81. 	background:url(img/active_bg.png) no-repeat;
  82. }
  83.  
  84. li.act a{
  85. 	cursor:default;
  86. }
  87.  
  88. .fbar{
  89. 	/* The left-most vertical bar, next to the first thumbnail */
  90. 	width:2px;
  91. 	background:url(img/divider.png) no-repeat right;
  92. }
  93.  
  94. li a{
  95. 	display:block;
  96. 	background:url(img/divider.png) no-repeat right;
  97. 	height:35px;
  98. 	padding-top:10px;
  99. }
  100.  
  101. a img{
  102. 	border:none;
  103. }
[HTML] pobierz, plaintext


i najważniejsze czyli kod jquery:
[XML] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	/* This code is executed after the DOM has been completely loaded */
  3.  
  4. 	var totWidth=0;
  5. 	var positions = new Array();
  6.  
  7. 	$('#slides .slide').each(function(i){
  8. 		/* Loop through all the slides and store their accumulative widths in totWidth */
  9. 		positions[i]= totWidth;
  10. 		totWidth += $(this).width();
  11.  
  12. 		/* The positions array contains each slide's commulutative offset from the left part of the container */
  13.  
  14. 		if(!$(this).width())
  15. 		{
  16. 			alert("Please, fill in width & height for all your images!");
  17. 			return false;
  18. 		}
  19. 	});
  20.  
  21. 	$('#slides').width(totWidth);
  22.  
  23. 	/* Change the cotnainer div's width to the exact width of all the slides combined */
  24.  
  25. 	$('#menu ul li a').click(function(e){
  26.  
  27. 		/* On a thumbnail click */
  28. 		$('li.menuItem').removeClass('act').addClass('inact');
  29. 		$(this).parent().addClass('act');
  30.  
  31. 		var pos = $(this).parent().prevAll('.menuItem').length;
  32.  
  33. 		$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
  34. 		/* Start the sliding animation */
  35.  
  36. 		e.preventDefault();
  37. 		/* Prevent the default action of the link */
  38. 	});
  39.  
  40.            $("#button a#next").click(function(event){
  41.             var pos = $(.menuItem).prevAll('.menuItem').length;
  42. 	    $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450).next();
  43.             event.preventDefault();
  44.           });
  45.  
  46.           $("#button a#previous").click(function(event){
  47.           var pos = $(.menuItem).prevAll('.menuItem').length;
  48. 	  $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450).prev();
  49.             event.preventDefault();
  50.           });
  51.  
  52. 	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
  53. 	/* On page load, mark the first thumbnail as active */
  54. });
[XML] pobierz, plaintext
erix
7.09.2011, 14:45:27
Wstaw to gdzieś działające albo nie licz na odzew.
Rid
7.09.2011, 15:01:17
Nie Masz otworzonego diva brakuje " <" powinno być:
[HTML] pobierz, plaintext 
  1. </div>
  2. <div id="button">
  3. <a href="#" id="previous">previous</a>
  4. <a href="#" id="next">next</a>
  5. </div>
[HTML] pobierz, plaintext


poza tym akcje ustawiasz na przciski <a> to po co w jquery $("#button a#next") nie wystarczy $("#next")?
bulias
7.09.2011, 15:01:23 
[HTML] pobierz, plaintext 
  1. line 20 
  2. div id="button">
[HTML] pobierz, plaintext

To co rzuciło mi się po przejrzeniu źródła to temu znacznikowi brakuje, 
[HTML] pobierz, plaintext 
  1. <
[HTML] pobierz, plaintext
czyli 
[HTML] pobierz, plaintext 
  1. <div id="button">
[HTML] pobierz, plaintext

oraz
[PHP] pobierz, plaintext 
  1. var pos = $('.menuItem').prevAll('.menuItem').length;
  2. ...
  3. ...
  4. var pos = $('.menuItem').prevAll('.menuItem').length;
[PHP] 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.