Jump to content

jcarousel play pause pogas atkārtojas, ja tiek izmantots varāk kā vienu reizi


DJ Beater
 Share

Recommended Posts

Sveiki ;)

 

 

Daudziem noteikti ir zināms jquery plugins jcarousel un lieta tāda, ka vēlos to papildināt ar play un pause pogām bet...

 

 

problēma rodas tad kad vēlos iekļaut vairāk kā vienu jcarouseli lapā, scripts kā tiek pieliktas klāt šis play pause pogas ir šāds:

 

javascript

<script type="text/javascript"><!--
$('#carousel-0 ul').jcarousel({
vertical: false,
visible: 1,
scroll: 1,
auto: 3,
wrap: 'circular',
initCallback: function(jc, state) {
  if (state == 'init') {
	// Insert a play/pause button between the prev/next buttons
	$('div.jcarousel-prev-horizontal').after('<div class="jcarousel-toggle-horizontal-latest"></div>');
	jc.startAutoOrig = jc.startAuto;
	jc.startAuto = function() {
	  if (!jc.paused) {
		jc.startAutoOrig();
	  }
	}
	jc.pause = function() {
	  $('div.jcarousel-toggle-horizontal-latest')
		.removeClass('jcarousel-toggle-horizontal-play-latest')
		.addClass('jcarousel-toggle-horizontal-pause-latest');
	  jc.paused = true;
	  jc.stopAuto();
	};

	jc.play = function() {
	  $('div.jcarousel-toggle-horizontal-latest')
		.removeClass('jcarousel-toggle-horizontal-pause-latest')
		.addClass('jcarousel-toggle-horizontal-play-latest');
	  jc.paused = false;
	  jc.startAuto();
	};

 jQuery('div.jcarousel-toggle-horizontal-latest').click(function(){
	if (jc.paused) {
			jc.play();
	} else {
			jc.pause();
	}
});
  }
  jc.play();
}
});
//--></script>


<script type="text/javascript"><!--
$('#carousel-10 ul').jcarousel({
vertical: false,
visible: 5,
scroll: 1,
auto: 5,
wrap: 'circular',
	initCallback: function(jc, state) {
  if (state == 'init') {
	// Insert a play/pause button between the prev/next buttons
	$('div.jcarousel-prev-horizontal').after('<div class="jcarousel-toggle-horizontal-recent"></div>');
	jc.startAutoOrig = jc.startAuto;
	jc.startAuto = function() {
	  if (!jc.paused) {
		jc.startAutoOrig();
	  }
	}
	jc.pause = function() {
	  $('div.jcarousel-toggle-horizontal-recent')
		.removeClass('jcarousel-toggle-horizontal-play-recent')
		.addClass('jcarousel-toggle-horizontal-pause-recent');
	  jc.paused = true;
	  jc.stopAuto();
	};

	jc.play = function() {
	  $('div.jcarousel-toggle-horizontal-recent')
		.removeClass('jcarousel-toggle-horizontal-pause-recent')
		.addClass('jcarousel-toggle-horizontal-play-recent');
	  jc.paused = false;
	  jc.startAuto();
	};

	jQuery('div.jcarousel-toggle-horizontal-recent').click(function(){
	if (jc.paused) {
			jc.play();
	} else {
			jc.pause();
	}
});
  }
  jc.play();
}
});
//--></script>


 

 

css

.jcarousel-skin-opencart .jcarousel-toggle-horizontal-play-latest {
position: absolute;
z-index: 99;
bottom: 0px;
right: 440px;
background: rgba(0,0,0,.7);
width: 60px;
height: 30px;
border: 1px solid #fff;
background: url(http://urdt.sytes.net/managulta/catalog/view/theme/default/image/playpause_small.png) 7px -6px;
cursor: pointer;
}
.jcarousel-skin-opencart .jcarousel-toggle-horizontal-pause-latest {
position: absolute;
z-index: 99;
bottom: 0px;
right: 440px;
background: rgba(0,0,0,.7);
width: 60px;
height: 30px;
border: 1px solid #fff;
background: url(http://urdt.sytes.net/managulta/catalog/view/theme/default/image/playpause_small.png) -38px -6px;
cursor: pointer;
}

 

Un ja es paskatos view generated source, tad problēma rodas šijā scritptā:

$('div.jcarousel-prev-horizontal').after('<div class="jcarousel-toggle-horizontal-latest"></div>');

 

Jo tiek ievietotas divas reizes tās pogas, liekas ka problēma varētu būt jquery funkcijā after()

 

 

JSFIDDLE

http://jsfiddle.net/yCwaa/

 

 

 

Paldies, cerams ka tiksim pie vēlamā rezultāta kopā ;)

Labots - DJ Beater
Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share

×
×
  • Izveidot jaunu...