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()
Paldies, cerams ka tiksim pie vēlamā rezultāta kopā