Jump to content
php.lv forumi

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


beater
 Share

Recommended Posts

Sveiki wink.png

 

 

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ā wink.png

Link to comment
Share on other sites

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 by xPtv45z
Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...