Twitter Bootstrap Carousel utilizzando Joomla e il suo Mootools

Question

Sto lavorando su un modello per Joomla 2.5.x, utilizzando Twitter Bootstrap. Voglio anche usare il plug-in Carousel Bootstrap per quel modello.

Ho riscontrato un problema quando il Carousel viene utilizzato con l'implementazione Mootools di Joomla. Lo stile dell'elemento Carousel viene modificato con un margine negativo, rendendolo invisibile all'utente. Per mostrarti esattamente cosa sta succedendo, ho preparato per te un jsfiddle http://jsfiddle.net/U2pHH/11/.

Il carosello è fare ogni seconda immagine non visibile all'utente causa delle mutate caroselli attributo di stile, ma l'utente dovrebbe vedere ogni diapositiva.

ho guardato già nel codice sorgente del plugin Carousel e Mootools file JS ma purtroppo couldnt capire la causa del problema. Ho pensato che forse era un problema di denominazione di funzioni/classi tra jQuery e Mootools, ma non ci sono stati problemi.

Spero che tu possa aiutarmi qui.

Modifica: ho capito che ha qualcosa a che fare con la classe Fx.Slide di mootools-more.js, eliminando la classe dal codice sorgente risolto il problema. Ma questo non è ancora una soluzione, qualsiasi aiuto è ancora molto apprezzato.

Answer 1

Il problema è che Mootools più è in conflitto con Twitter bootstrap, è per questo che il suo comporta in modo strano la giostra. Ti suggerisco di usare solo jQuery o solo Mootools. C'è un bootstrap implementazione Mootools qui: https://github.com/anutron/mootools-bootstrap

Answer 2

Avere lo stesso problema. Sto usando un plugin chiamato JB Library (http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin) e questo ha le opzioni per rimuovere Mootools e/o Mootools More dall'amministratore. Dopo aver spento "Mootools" Il problema con il Carousel è più "corretto". Potrebbe essere una soluzione più facile che commentare le novità riguardo agli aggiornamenti. A meno che non sia necessario mootools-more.js per altre cose sul sito, ovviamente.

Speriamo che una soluzione migliore arrivi presto.

Answer 3

avuto lo stesso problema: Bootstrap giostra non funzionava in frontend registrato, dal momento che MooTools-more.js caricati.

La mia soluzione: Il plug-in Jquery Easy (http://www.simplifyyourweb.com/index.php/downloads/category/8-loading-jquery) con l'opzione "Rimuovi Mootools quando possibile" in Opzioni avanzate.

Answer 4

Ecco la correzione specifico per Joomla e MooTools più,

aggiungere questo codice dopo la chiamata JQ, si può essere in qualsiasi js file di

aggiungere

if (typeof jQuery != 'undefined') { 
(function($) { 
     $(document).ready(function(){ 
     $('.carousel').each(function(index, element) { 
       $(this)[index].slide = null; 
       }); 
     }); 
})(jQuery); 
} 

Answer 5

Un'altra implementazione dello stesso cosa che Benn ha fornito è

if (typeof jQuery != 'undefined' && typeof MooTools != 'undefined') { 
    Element.implement({ 
     slide: function(how, mode){ 
      return this; 
     } 
    }); 
} 

Quello che ho finalmente finito con - I creato personalizzatoMootools Altro build senzaFx.Far scorrere

Answer 6

(function($) 
{ 
    $(document).ready(function(){ 
     var bootstrapLoaded = (typeof $().carousel == 'function'); 
     var mootoolsLoaded = (typeof MooTools != 'undefined'); 
     if (bootstrapLoaded && mootoolsLoaded) { 
      Element.implement({ 
       hide: function() { 
        return this; 
       }, 
       show: function (v) { 
        return this; 
       }, 
       slide: function (v) { 
        return this; 
       } 
      }); 
     } 
    }); 
})(jQuery);