Mootools e slimbox in Joomla 1.5

La galleria di immagini a cui sto lavorando (e che spero di mettere a vostra disposizione al più presto) si basa, come dicevo nel post precedente, sullo script di slimbox, il quale, a sua volta, utilizza le ormai onnipresenti librerie mootools.

Come sapete, Joomla 1.5 utilizza nativamente le librerie mootools. La versione attualmente istallata è la 1.11 (da ricordare). Ma come fare ad utilizzarle?

E, infine, come fare a inserire nel proprio sito lo script di slimbox in modo da rendere gradevoli le proprie gallerie di immagini?

Prima di tutto, bisogna visualizzare l’origine HTML della vostra pagina e cercare all’interno dell’heading del documento, il seguente tag:

<script type=”text/javascript” src=”<?php echo $this->baseurl; ?>/media/system/js/mootools.js”></script>

se il tag non è presente, allora è necessario, dal pannello di amministrazione, andare a modificare il codice HTML del template:

  1. andate sul menu Estensioni
  2. selezionate Gestione template
  3. selezionate il tema che state utilizzando per modificarlo
  4. cliccate su Modifica HTML nella barra degli strumenti

quindi inserire, prima del tag di chiusura </head>, il codice

<script type=”text/javascript” src=”<?php echo $this->baseurl; ?>/media/system/js/mootools.js”></script>

Fatto. Ora la libreria è pronta per essere utilizzata.

Una delle possibili applicazioni di mootools è offerta dallo script slimbox, che crea un effetto dinamico nello zoom delle immagini.

Ovviamente, slimbox non è presente in Joomla, per questo visogna caricarlo manualmente.

Prima di tutto, scaricate il pacchetto. Prima di scegliere quale file scaricare, ricordate che la versione delle librerie mootools, indispensabile al funzionamento, è la 1.11. Pertanto la versione di slimbox da scaricare è la 1.53.

Poi decomprimete il file zip in una cartella (chiamatela slimbox per chiarezza) e caricatela sul server col vostro client FTP. Io ho pensato di caricare la cartella all’interno della directory media/system.

Fatto questo, bisogna solo dire al template di caricare lo script all’apertura della pagina. Andate a modificare il template, seguendo gli stessi passi fatti per le librerie mootools e inserite, prima del tag </head>, il seguente tag:

<script type=”text/javascript” src=”<?php echo $this->baseurl; ?>/media/system/slimbox/js/slimbox.js”></script>

Ultimo passaggio: bisogna inserire il file css. Sempre nel template, richiamate il file css di slimbox:

<link rel=”stylesheet” href=”<?php echo $this->baseurl; ?>/media/system/slimbox/css/slimbox.css” type=”text/css” media=”screen” />

Finito. Ora potete creare nel vostro sito joomla un gradevolissimo effetto zoom sulle immagini, semplicemente aggiungendo, nel tag <a> che linka alla vostra immagine, i seguenti attributi:

rel=”lightbox” title=”mio titolo”

Se, invece di singole immagini, volete creare delle vere e proprie gallerie, allora l’attributo rel diventa:

rel=”lightbox[miagalleria]”

In ogni caso, per quanto riguarda la corretta configurazione della galleria, consiglio di leggere attentamente la guida di slimbox.

Buon divertimento 😉

Annunci

70 thoughts on “Mootools e slimbox in Joomla 1.5

  1. Grazie mille 🙂
    mi hai risolto un problema che avevo con un sito.

    Anche se non capisco una cosa: nell’editor di joomla nell’inserimento dei collegamenti al tab avanzate esiste per la voce rel l’opzione lightbox, come se fosse già integrata, ma manca il js dello slimbox nel pacchetto base di joomla 1.5, perché ciò??

  2. di sicuro lo slimbox non è integrato in joomla. sinceramente non saprei darti una risposta. può darsi che dipenda dall’editor che hai istallato nel tuo sito. nel tiny mce non mi è sembrato ci fosse questa opzione.

  3. ho l’istallazione base di joomla, 2 siti sia con la 1.5.8 che 1.5.9, con l’editor di default TinyMCE 2.0, come scritto sopra: nella voce “Relazione da pagina a target” nella finestra “inserisci modifica link” -> tab avanzate, la prima opzione è proprio lightbox, mistero di joomla…
    cmq grazie di nuovo 🙂

  4. ecco! non si finisce mai di imparare 🙂
    effettivamente è come dici. probabilmente viene offerta la possibilità di inserire l’attributo rel=”lightbox”, ma il preventivo caricamento dei file è sempre necessario.
    grazie per la segnalazione

  5. ciao ascolta ho seguito alla lettera la ta guida ma alla fine non ho l’effetto sembra che non prenda i css ma non sono molto esperto…puoi aiutarmi??grazie in anticipo

  6. ciao scusa se risp solo ora il sito è http://www.fontanapianello.it
    se riesci ad aiutarmi i sono grato….cmq anche io penso il problema sia nel percorso percvhè sempbra proprio non veda i css….ma poi se controllo il percorso è esatto…anche perchè ho messo la cartella dove hai consigliato tu e poi ho copiato il tuo codice….grazie in anticipo

  7. Salve,
    scusare se mi intrometto, secondo me ci sono 2 errori:
    ci sono delle virgolette strane nel codice: ” che vanno sostituite con ”

    poi sembra che manchi il tag rel sulla foto

    attenzione poi ad altri javascript, su di un mio sito mi andava in conflitto la slimbox con fancybox di morfeoshow

    saluti

  8. @mattia
    come giustamente fa notare michele, manca l’attributo rel=”lightbox” nel tag A della foto
    poi non trovo nemmeno gli script di slimbox
    inoltre, fai attenzione a una cosa: il link alla libreria mootools è già presente. non richiamarlo 2 volte.

  9. è perchè li avevo eliminati…ora li rimetto ma vedrete che non cambia nulla sono disperato…

  10. Ciao Mattia
    le virgolette strane sono ” mentre quelle standard sono “, in alcuni casi potrebbero dare problemi, con l’html non so di preciso, in php di sicuro.

    Ciao

  11. errata corrige: per qualche strano motivo si sono curvate le virgolette corrette, ripeto quelle corrette sono ”

    Ciao

  12. ok scusate per qualche motivo quando inserisco le virgolette si mettono quelle curve, per intenderci sono quelle che si fanno con shift+2

  13. ciao visto che mi avete risolto un poblema volevo chiedervi se potevate darmi una mano oer rislverne un altro che pero non c’entra con slimbox…cioè ….dovrei inserire sempre nel sito joomla un controllo….in poche parole quando carica la pagina se l’immagine è presente la carica altrimenti no….so come fare tutto tranne che vedere se limmagne è presente….tutto in javascript…in pratica lo script è

    function imgpresente()
    {if ***immagineesiste***
    {document.getElementById(“box”).innerHTML=”
    }
    }

    questo è un esempio…grazie in anticipo mattia

  14. mi aveva tagkliato il codice…

    function imgpresente()
    {if ***immagineesiste***
    {document.getElementById(“box”).innerHTML=”
    }
    }

  15. lo taglia….

    ..
    ..function imgpresente()
    ..{if ***immagineesiste***
    ..{document.getElementById(“box”).innerHTML=
    ..”
    ..}
    ..}
    ..
    ..
    ..
    ..
    ..

  16. potresti provare due soluzioni.
    la prima potrebbe essere quella di richiamare lo script dal template, esattamente come hai fatto con la libreria mootools.
    la seconda potrebbe essere quella di usare un plugin come jumi

  17. grazie per la risposta…ma il problema non è richiamare lo script ma come andare a cercare se il file esiste…

  18. allora il problema è ben più complesso. ti ci vuole un po’ di programmazione in php. secondo me sarebbe necessario sviluppare un plugin apposta per lo scopo.
    non credo di averne mai visti in giro

  19. se no sai darmi qualche dritta su come farlo in php…lato pratico…perchè so quasi zero…ghrazie in anticipo

  20. se vuoi lavorare con JS devi usare jumi o un plugin che ti faccia scrivere del codice js nei contenuti (ce ne sono diversi. davi cercare nella directory)
    per creare un plugin, bisogna leggersi un libro 🙂
    la programmazione delle estensioni di joomla è molto laboriosa. però ci sono diversi tutorial in giro. appena trovo i link te li giro

  21. intanto ti scrivo il problema….dal pannello di amministrattore di joomla cliccando su joomfish control panel mi da
    Fatal error: Out of memory (allocated 14155776) (tried to allocate 79 bytes) in /home/ml1606/public_html/libraries/joomla/language/language.php on line 351

  22. Ciao Mattia,
    a me una volta è successo un problema simile, mi riferisco a “(allocated 14155776) (tried to allocate 79 bytes)”, ho dovuto far impostare un paramentro del php.ini: memory_limit aumentandolo di valore, credo che lo puoi fare anche con un file php.ini locale o con una direttiva htaccess, chiedi all’assistenza del tuo host.
    Ciao

  23. Ciao Michele…grazie per la risposta…non è una cosa che posso fare io questa operazione??? tu sai qualcosa in merito all’altro mio quesityo??? quello per l’immagine???Ciao

  24. Ciao Mattia,
    per l’immagine pensavo che se viene caricata dinamicamente forse avrà un tag id, se la metti tu allora puoi assegnare tu il tag html id, quindi con javascript puoi recuperare l’elemento tramite document.getElementById() se risulta vero allora l’immagine è presente, se è vuoto invece l’immagine non c’è.
    Altre soluzioni ora non mi vengono in mente.

    per la modifica del php.ini lo puoi fare tu impostandolo localmente nel sito (va poi messo nella root del sito) il file php.ini è solo un file di testo che deve contenere memory_limit= XXM dove XX è il valore che gli vuoi dare tu, oppure tramite un file htaccess con un comando simile, ora non so di preciso la sintassi, per sapere se usare un file htaccess o php.ini chiedi consiglio al tuo provider di spazio web, dipende anche da come è compilato php, se è cgi o modulo di apache.
    Ciao

  25. ciao Michele….per quanto riguarda l’immagine il problema non è quello…in pratica il propietario di questo sito non capisce ne html ne javascript ne nulla e il problema sorge quando inserisce lui le nuove immagini….perchè non sapendo come si fa e non capendolo non riesce a inserire il tag per il mitico slim box…quindi mi sono dovuto inventare un modo per aggirare l’ostacolo ma penso di esserci piu o meno riuscito,….per joomfish sono ancora fermo….ora sentiro il provider….grazie…guona giornata

  26. ciao scusate se rompo ancora…avrei bisogno di diminuire la dimensione della “colonna del menu a destra” sul mio sito in quanto altrimenti non ci stanno le tabelle….voi sapete come fare a modificare il template??o piu che altro cosa devo modificare..grazie in anticipo…per capire meglio http://www.fontanapianello.it…la colonna dove ci sono le bandiere della lingua

  27. Ciao Mattia,
    devi modificare il css del template che trovi nella omonima del template che usi, per indagare qual è la classe del css ti consiglio di usare firebug (componente di firefox) cmq ho dato uno sguardo e sicuramente dovrei modificare la width delle classi css di sidebar1, content e sidebar2 (questa ultima è la 2° colonna)
    Ciao
    PS: spero che tu abbia un server in locale per fare le tue prove

  28. Grazie mille michele…..fatto…ora va meglio…altra domandina…sai in joomla se e come si può aggiungere una riga ad unja tabella esistente?? dovrebbe essere banale ma non ci riesco

  29. Ciao Mattia
    che intendi aggiungere una riga a una tabella?
    che io sappia ormai i template di joomla sono tutti con div

    Ringraziamo il buon Carlo Daniele che ci ospita, ormai questo post è diventato una pagina di consulenza
    ciao

  30. gia davvero….intendo se io modifico un articolo..e aggiungo una tabella…dopo voglio aggiungere una riga a questa tabella che avevo creato…lo posso fare?

  31. ok, se parli delle tabelle negli articoli ti dico che puoi aggiungere righe (e colonne) e anche eliminarle con facilità, basta usare gli appositi pulsanti nell’editor testuale, quando clicchi all’interno di una tabella si attivono questi pulsanti, facile facile 😉
    oppure se preferisci l’html basta entrare nell’articolo in modalità senza editor, o usare un altro editor come JCE che ti consente di cambiare al volo da “con editor/senza editor”
    Ciao ciao

  32. ciao Michele
    Fino a li c’ero anche io…ma in nessuno di quei pulsanti(proprietà riga o tabella) da la possibilità di aggiungere righe o colonne…..ciao

  33. ciao Mattia
    ohibò… allora mi sa che non ho capito la tua richiesta… magari un esempio più in dettaglio
    ciao

  34. ciao Michele…allora io modifico un articolo e inserisco una tabella…la compilo e la salvo….fra un mese devo aggiungere un elemento alla tabella e quindi aggiungere una riga….non riesco a fare questo…ovviamente lo portei fare in html ma siccome il mio cliente non sa nulla di html…devo trovare come si fa…è impossibile che non ci sia un modo dato da joomla….

  35. Ciao Mattia,
    allora avevo capito bene, è sufficiente che quando riapri l’articolo con la tabella poi piazzi il cursore all’interno di una cella della tabella e quindi clicchi su uno dei pulsanti per inserire una cella o colonna: assicurato o fatto la prova ora, sia con l’editor standard di joomla che con il JCE

  36. ciao…io non riesco….a me non ne da la possibilità….mi puoi dire quale bottone usi??? sto impazendo per una cavolata

  37. ohibò… vediamo: i pulsanti sono quelli in 3° riga dall’11° al 16° nell’editor standard di joomla.
    Poiché non posso mandarti una jpg non so in che altro modo posso indicarteli, cmq devi sempre cliccare all’interno di una cella di una tabella già esistente per farti attivare.
    Ciao

  38. ciao michele…ho gia il menu in modalità estesa…e non me ne da la possibilità….va be…ci sto perdendo troppo tempo…grazie cmq se riesci a spiegarmi quale è il tasto grazie se no grazie lo stesso

  39. Ciao Mattia,
    se mi dai in qualche modo la possibilità di mandarti una jpg dove indicarti i pulsanti tramite email o altro vedo se posso aiutarti.
    Ciao

  40. Ciao Mattia,
    ho provato a inviarti una email, ma mi restituisce Diagnostic-Code: smtp;550 Requested action not taken: mailbox unavailable

  41. GRANDEEEE GUIDAAAA
    Ci sono riuscita anche io ma ora sorge un secondo problema che provo ad esporre… aiutatemi perfavore:

    Il mio Joomla ha uno scorrimento di tipo orizzontale, anzichè verticale… certo un po’ insolito, ma molto carino. Il problema è che quando clicco su un’immagine in miniatura che si trova in fondo a destra di questo joomla a scorrimento orizzontale… l’immagine zoommata si apre in quel che dovrebbe essere il centro del CMS, quindi non sovrapposta all’immagine linkata, cioè centrale a sinistra. Non so se ho reso l’idea ma… esiste un codice per lightbox che ti fa zoommare l’immagine nella posizione che più desideri del tuo cms?

    • se ho ben capito, non è una cosa semplice. Il box che contiene l’immagine ingrandita va sempre al centro della pagina e non tiene conto della posizione della miniatura.

      ovviamente, il codice può essere modificato, ma non credo assolutamente sia un lavoro da poco…

  42. Beh hai capito alla perfezione…

    sto cercando di modificare il seguente codice:

    introducendo all stringa dell’href

    Ma niente… è totalmente inutile… credo debba creare, magari un foglio di stile css proprio per questa operazione…
    che mi faccia inserire il position in: auto, relative… o ancora padding…

    Se solo riuscissi a trovare una guida ma è davvero un’impresa qui sul web… è una settimana orami che cerco senza successo… certo sarebbe una grande cosa anche per quelli che verranno!

    Se puoi io sono qui ^_^
    Kiss

  43. Ma guarda ci sono riuscita… se v uoi contattarmi privato…
    così ti faccio vedere il sito che ora nn posso pubblicare.

    Unico Problema… mi fa lo zoom… e scorrendo in senso orizzontale l’immagine mi segue ma… è totalmente bianca… qualcosa sbaglio nel codice ma non riesco a capire cosa… potresti aiutarmi così poi pubblichiamo tutto su qst splendido blog?

    Saluti

    G -_^

  44. Salve.
    E se volessi caricare un’immagine o un video con questo metodo ma al caricamento della pagina senza cliccare sul linl?

I commenti sono chiusi.