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

[beater]

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ā

[codez]

jsfiddle?

[xPtv45z]

Ja tev ir, teiksim, 30 div`i ar šādu klasi - $('div.jcarousel-prev-horizontal'), kā, tavuprāt, jquery var uzminēt, uz kura tu tieši vēlies, lai viņš izpildās? Tādēļ viņš after un visu pārējo izpildīs uz visiem, kas atbilst nosacījumiem. Tam ir paredzēts, otrais parametrs - http://api.jquery.co...uery/#example-1

Edited May 29, 2012 by xPtv45z

[beater]

jsfiddle?

http://jsfiddle.net/yCwaa/

[beater]

Ja tev ir, teiksim, 30 div`i ar šādu klasi - $('div.jcarousel-prev-horizontal'), kā, tavuprāt, jquery var uzminēt, uz kura tu tieši vēlies, lai viņš izpildās? Tādēļ viņš after un visu pārējo izpildīs uz visiem, kas atbilst nosacījumiem. Tam ir paredzēts, otrais parametrs - http://api.jquery.co...uery/#example-1

 

 

Jā tik tālu es esmu sapratis, bet kāds šeit būtu vislabākais risinājums, lai nebūtu jātaisa kaut kādas n-tas css klases? Kaut kā pats brīnos ka nevaru izdomāt, tāpēc lūdzu palīdzību.

 

Un paldies jau par pirmo atbili ;)

[codez]

Vienkāršā gadījumā būtu norādīt, lai after ir tam elementam, kurš atrodas iekš konkrēta karuseļa:

http://jsfiddle.net/yCwaa/1/

$('#carousel-0 div.jcarousel-prev-horizontal').after(

Ātrumā neatradu instanci, bet, ja būtu pieejama jquery instance, tad varētu arī norādīt to kā kontekstu:

$('div.jcarousel-prev-horizontal', instance).after(

 

Bet pareizā gadījumā, tev būtu jāekstendo pats karuseļa plugins, jo tagad sanāk, ka tu raksti vienu un to pašu n-reizes, kas ir slikta prakse.

[beater]

Vienkāršā gadījumā būtu norādīt, lai after ir tam elementam, kurš atrodas iekš konkrēta karuseļa:

http://jsfiddle.net/yCwaa/1/

$('#carousel-0 div.jcarousel-prev-horizontal').after(

Ātrumā neatradu instanci, bet, ja būtu pieejama jquery instance, tad varētu arī norādīt to kā kontekstu:

$('div.jcarousel-prev-horizontal', instance).after(

 

Bet pareizā gadījumā, tev būtu jāekstendo pats karuseļa plugins, jo tagad sanāk, ka tu raksti vienu un to pašu n-reizes, kas ir slikta prakse.

 

 

Nu liels paldies par tik vienkāršu risinājumu, lieta tāda, ka man nebūs vairāk par 3 karuseļiem vienā lapā, un tajā plugin kodā ir kaut kā grūti iebraukt, tāpēc tagad iztikšu ar to kas, vispār jau jcarousel plugins nāk vēl ar saviem pluginiem kādam gudrākam tik vēl vajadzētu ieviest pie controlēm play pause ;)

 

Paldies ka palīdzēji ;)

[indoom]

jc.container[0] ir instance

$('.jcarousel-clip', jc.container[0]).after('<div class="jcarousel-toggle-horizontal-recent"></div>');