1. Tudásbázis
  2. Modulok használata
  3. jCarousel start - stop

jCarousel start - stop

Beküldte Pál úr - 2012. május 6. 15.54
Pál úr képe

Üdv!

Számomra megoldhatatlannak tűnő jQuery problémába futottam bele.

Van a jCarousel modul. Egy oldalon van 3 "carousel", mindhárommal kitűnően működik.

Egy funkciót nem tudok megvalósítani: van egy -- mondjuk egyszerűség kedvéért -- blokk, amiben van 6 link. Ebből 3-nak van egy-egy id-je, ami egy-egyre a caroussel-ek közül mutat. Tehát van egy <a href="#" id="foto">Fotó</a>, ami a "foto" azonosítójú caroussel-re mutat. Azt kellene megvalósítani, hogy ha a foto linkre kattintok, akkor a "foto" caroussel kezdje el a benne lévő képeket autoScroll-lal léptetni.

Eddig így próbáltam:

		$('.views-row-3 .content .field-item p a').click(function() {
			var target = $(this).attr('id');
 
			$($(this).parent().siblings()).each(function() {
				var _target = $($(this)).children().attr('id');
				if(_target != '' && $(this).hasClass('selected')) {
					$('.'+_target).jcarousel({
						autostart: true,
						scroll: 1,
						auto: 0,
						wrap: 'circular'
					});
				}
			});
 
			$(this).parent().siblings().removeClass('selected');
 
			$($(this).parent()).addClass('selected');
 
			if(target != '') {
				$('.'+target).jcarousel({
					autostart: true,
					scroll: 1,
					auto: 2,
					wrap: 'circular'
				});
			}
		});

Az eredmény az, hogy arra képes, hogy elindítsa az autoScroll-t, illetve, ha egy másik elemre kattintok, akkor meg is állítsa, de ha visszakattintok egy már korábban kattintott elemre, akkor nem indul újra a léptetés.

Hogyan lehetne ezt megoldani?

Köszönöm előre is.

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
jcarousel
Drupal verzió: 
7.x
Fórum: 
Modulok használata
Pál úr képe

Beküldte Pál úr - 2012. május 10. 19.20 

  1. <html>
  2. <head>
  3. <link href="style.css" rel="stylesheet" type="text/css" />
  4. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  5. <script type="text/javascript" src="js/jquery.jcarousel.js"></script>
  6. <script type="text/javascript">
  7.  
  8. jQuery(document).ready(function() {
  9. 	function carousel_initCallback(carousel)
  10. 	{
  11. 		var boxid = this.boxid;
  12.  
  13. 		$('.controll').bind('click', function() {
  14. 			if($(this).hasClass(carousel.options.boxid) && (carousel.options.auto == 0)) { // amire kattintottam és áll
  15. 				carousel.startAuto(2); // ez a másodpercérték, ami a léptetést szabályozza
  16. 			} else if(!$(this).hasClass(carousel.options.boxid) && (carousel.options.auto != 0)) {  // amire nem kattintottam és megy
  17. 				carousel.startAuto(0); // megáll
  18. 			} else if ($(this).hasClass(carousel.options.boxid) && (carousel.options.auto != 0)) { // amire kattintottam és megy
  19. 				carousel.startAuto(0);
  20. 			}
  21. 		});
  22.  
  23. 		// Disable autoscrolling if the user clicks the prev or next button.
  24. 		carousel.buttonNext.bind('click', function() {
  25. 			carousel.startAuto(0);
  26. 		});
  27.  
  28. 		carousel.buttonPrev.bind('click', function() {
  29. 			carousel.startAuto(0);
  30. 		});
  31.  
  32. 		// Pause autoscrolling if the user moves with the cursor over the clip.
  33. 		carousel.clip.hover(function() {
  34. 			carousel.stopAuto();
  35. 		}, function() {
  36. 			carousel.startAuto();
  37. 		});
  38. 	};
  39.  
  40. 	// a carousel-ek inicializálása
  41. 	$('#first-carousel').jcarousel({
  42.         	auto: 0,
  43.         	wrap: 'circular',
  44. 		boxid: 'first',
  45.         	initCallback: carousel_initCallback
  46.     	});
  47.  
  48. 	$('#second-carousel').jcarousel({
  49.         	auto: 0,
  50.         	wrap: 'circular',
  51. 		boxid: 'second',
  52.         	initCallback: carousel_initCallback
  53.     	});
  54.  
  55. });
  56.  
  57. </script>
  58.  
  59. </head>
  60. <body>
  61. 	<div id="wrap">
  62. 	<p><a href="#" class="controll first">Első</a> -- <a href="#" class="controll second">Második</a></p>
  63. 	<ul id="first-carousel" class="first first-and-second-carousel jcarousel-skin-tango">
  64. 		<li><img src="img/kep_1_1.jpg" width="75" height="75" alt="" /></li>
  65. 		<li><img src="img/kep_1_2.jpg" width="75" height="75" alt="" /></li>
  66. 		<li><img src="img/kep_1_3.jpg" width="75" height="75" alt="" /></li>
  67. 		<li><img src="img/kep_1_4.jpg" width="75" height="75" alt="" /></li>
  68. 		<li><img src="img/kep_1_5.jpg" width="75" height="75" alt="" /></li>
  69. 		<li><img src="img/kep_1_6.jpg" width="75" height="75" alt="" /></li>
  70. 	</ul>
  71.  
  72. 	<hr size="1"/>
  73.  
  74. 	<ul id="second-carousel" class="second first-and-second-carousel jcarousel-skin-ie7">
  75. 		<li><img src="img/kep_2_1.jpg" width="75" height="75" alt="" /></li>
  76. 		<li><img src="img/kep_2_2.jpg" width="75" height="75" alt="" /></li>
  77. 		<li><img src="img/kep_2_3.jpg" width="75" height="75" alt="" /></li>
  78. 		<li><img src="img/kep_2_4.jpg" width="75" height="75" alt="" /></li>
  79. 		<li><img src="img/kep_2_5.jpg" width="75" height="75" alt="" /></li>
  80. 		<li><img src="img/kep_2_6.jpg" width="75" height="75" alt="" /></li>
  81. 	</ul>
  82. 	</div>
  83. </body>
  84. </html>

A megoldás kulcsa az, hogy minden carousel inicializálásakor be kell vezetni egy boxid értéket. A későbbiekben ezzel lehet hivatkozni rájuk. A mozgatást vezérlő linkekben nálam a class hivatkozik arra, hogy melyik képsor mozgatását kell megoldani.

2
0