Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : GinoG 16 Jan 2013, 18:56:06
-
Ciao a tutti! Spesso guardando un sito realizzato con joomla mi è capitato di chiedermi quali fossero le plugin/componenti utilizzate dal web master e di conseguenza mi sono chiesto se esiste un qualche software per l'analisi delle componenti di un sito joomla. Cioè esiste un analizzatore dei siti tipo firebug ma per le componenti? Troppo bello per essere vero? ::) Grazie a tutti in anticipo.
-
solitamente nel codice ci sono riferimenti alle cartelle in cui sono contenuti i file dell'estetnsione. con un po di esperienza vedrai che comincerai a riconoscerle. Non esistono tool infallibili ma qualche estensione per ff riesce a riconoscere se sono stati utilizzati i framework più diffusi.
mi pareva che uno si chiamasse wrapperize o qualcosa del genere
-
ciao giovi, grazie per la risposta. Si, infatti leggendo qualche articolo qua e là si diceva proprio che bisogna prestare attenzione ai riferimenti delle cartelle delle estensioni. Proverò comunque il software che mi hai suggerito per vedere fin dove "arriva" :P . Grazie ancora ;) .
PS. Lascio il thread aperto ancora per un pò nel caso qualcuno voglia aggiungere qualcosa.
-
ciao giovi, cercando un pò in rete come parola chiave wrapperize plugin per firefox non riesco a trovare nulla che sia collegabile a ciò che sto cercando se non un plugin di nome activex wrapper...ti riferivi a questo? penso comunque nn fosse questo perchè le discussioni in cui è mensionato sono datate anno 2004 e oggi sembra fuori produzione...boh ???
Ti ricordi qualche altro nome? So che ti chiedo di ricordare qualcosa che forse hai solo sfiorato, visto che grazie alla tua esperienza riesci a riconoscere le componenti "a naso" ;) , ma per un neofita come me questi applicativi potrebbero essere utili. Grazie in anticipo.
-
eccolo qui, ma ti ripeto che è un plugin che si limita a riconoscere solo i framework maggiori, difficilmente un'estensione può controllare con certezza se è stato o meno utilizzato un componente specifico piuttosto che un altro, soprattutto dal momento che questi variano continuamente!
ecco il link per il download per firefox: https://addons.mozilla.org/it/firefox/addon/wappalyzer/
-
ok grazie per l'aiuto, intanto vedrò com posso utilizzare questo addon per firefox ;)
-
Se ti interessa l'estensione esiste anche per Chrome, che personalmente ritengo il browser migliore ;)
-
Buono a sapersi! ;)
-
Ah ok grazie anche a te cereal_killer ;) visto che uso entrambi lo installarò anche su Chrome
-
Resta comunque il fatto che wappalyzer ti dice solo qual'è il framework utilizzato, quali sono le librerie caricate e il sistema che gira sul server su cui il sito risiede...
Per capire quali componenti o plugin sono installati su un sito joomla, vai di "analizza elemento" (l'equivalente di firebug in Crome) e cerchi di capire dai nomi delle classi css e/o dagli eventuali commenti tra il codice html il nome degli sviluppatori delle varie parti del sito... Poi vai di google e cerchi il loro sito...
-
Si, Ceral_killer ho constatato che l'estensione rilascia poche informazioni anche se utili....volendo tramutare in pratica la tua spiegazione tu come procederesti per riuscire a capire che estensione viene utilizzata in questo sito:http://demo.acyba.com/ (http://demo.acyba.com/) per creare quei "fumetti" che compaiono quando scorri sulle scritte "Custom field" o ""Popupe module"?
Analizzando un po con firebug ottengo questo: <p class="acymailing-mootoolsintro"... e se provo a salvare l'immagine mi viene fuori questo indirizzo:http://demo.acyba.com/templates/rhuk_milkyway/images/bubble_left.png (http://demo.acyba.com/templates/rhuk_milkyway/images/bubble_left.png)
mi dice il nome del template? milkyway? è il nome del componente o del plugin tu come proveresti a trovarlo? grosso modo so già di che tipo di plugin si tratta ma se volessi proprio quello del sito?
-
Ora ricordo, mi avevi già fatto questa domanda :) :P
-
si si ;D Giovi, e mi avevi anche detto che si tratta di tooltips ::) .
Però sono rimasto colpito da quell'effetto in particolare e vorrei "clonarlo" sul mio sito.... sai e poi mi fa bene andare un pò più in fondo, almeno faccio un pò di pratica
-
se cerealkiller riesce a darti una risposta benvenga :) Ma secondo me lo realizzi senza troppo grattacapi semplicemente applicando quell'immagine di sfondo a qualunque estensione per tooltips ;)
Comunque considera anche che non sempre viene utilizzata un'estensione esterna: a volte si tratta di funzionalità integrate nei template o in caso di utenti più esperti (come può essere il caso del sito acyba) se le realizzano da soli con una sputazza di codice o una bella libreria javascript!
-
Si, penso che tu abbia perfettamente ragione infatti continuando a cercare in rete attraverso le info che ho ricavato precedentemente riesco al massimo a trovare dei template per cui comincio a credere anch'io che sia una funzionalità integrata. :-\ Se proprio non riesco a trovare il plugin "fotocopia" in tempi brevi, penso che farò come mi hai suggerito e applicherò l'immagine ad un tooltip che poi in fin dei conti mi sembra anche più sbrigativo ;) . Grazie ancora per l'aiuto. :-X
-
Si, rhuk_milkyway (http://demo.acyba.com/templates/rhuk_milkyway/images/bubble_left.png) è il template; infatti è una sottocartella contenuta dentro templates;
L'immmagine non ha nulla a che fare con la funzionalità, in quanto viene solo richiamata dal css associato alla classe dell'elemento html che racchiude il testo del balloon.
In questo caso dalle classi non ricavi nulla; quindi ho analizzato l'header del sorgente della pagina; queste funzionalità sono realizzate in javascript; le più comuni librerie sono jquery o mootools;
nell'header trovo l'inclusione delle librerie mootools, degli script caption.js, modal.js (crea effetti lightbox), uno script di acymailing, componente per newsletter, e uno script per esteso scritto diretto nel codice che inizializza squeezebox, un effetto accordion utilizzato dal modulo subscribe;
La cattiva notizia è che, la libreria mootools utilizzata nel sito è stata compilata (un modo che consente maggiore efficienza), di conseguenza non è possibile analizzarne il contenuto; sono propenso a credere che il codice che crea il balloon si trovi al suo interno perché non ci sono altri script nella pagina (e il nascondere o mostrare un elemento html può esser fatto solo da uno script);
da quanto sopra, non credo abbiano usato un modulo o un plugin, ma piuttosto del codice integrato ad hoc nel sito.
Come suggerito da Giovi, puoi riprodurre l'effetto con poca difficoltà usando anche tu l'integrazione di uno script e poco codice nell'articolo o nel modulo che deve avere l'effetto...
Un esempio è questo:
http://file.urin.take-uma.net/jquery.balloon.js-Demo.html (http://file.urin.take-uma.net/jquery.balloon.js-Demo.html)
che si basa su jquery (quindi non dimenticare, oltre al pochissimo codice necessario a farlo funzionare, di integrare nel sito anche jquery; per quest'ultima operazione sconsiglio di inserire manualmente nell'header il link a jquery, ma di usare invece un modulo per joomla come jquery integrator, che tiene le librerie sempre aggiornate e supporta anche noconflict mode in caso di script multipli)
-
Ok, Ceral_killer grazie per l'esaustiva risposta, ;D
sai se tramite questo script è possibile immettere un immagine di sfondo all'effetto? vorrei inserire quella specifica immagine di cui ho postato il link prima...
-
Certo che sì, nella stessa maniera utilizzata sul sito che hai postato tu: col css...
Se ti guardi i demo della pagina che ti ho mandato e analizzi un balloon, vedi che il testo del balloon è contenuto in un div, con classe "balloon"... Nel css del tuo template basta poi aggiungere la classe balloon e metterci tutti gli attributi che vuoi, nel caso li puoi pure copiare da quel sito di acymailing, e scaricare la loro immagine di sfondo...
-
ok grazie sei stato gentilissimo, domani provero e poi faccio sapere. buon proseguimento. ;)
-
Allora, dato che ho ricevuto la tua richiesta di aiuto in privato, ti faccio qui un breve tutorial su come inserire il plugin jQuery da me consigliato nel tuo sito per creare i balloon.
PREMESSA: avendo a che fare con un plugin jQuery, la prima cosa da fare è:
- scaricarsi il file jquery
- creare una pagina html in locale, inserire nell'header le librerie jquery e lo script scaricato
- leggere la documentazione nella pagina e provare a farlo funzionare
DOPO che funziona in locale su una pagina HTML semplice di prova, basta trasportare il risultato sul proprio sito;
al fine di fornirti le indicazioni più precise, ho integrato io stesso la funzionalità un uno dei miei siti, tanto mi torna utile;
TUTORIAL:
---------------------------------------
Ti fornirò di seguito le indicazioni per realizzare un balloon del tipo 7-1 (mi riferisco alla pagina dei demo che ti avevo linkato in precedenza), dato che è il tipo con stile css; a partire da questo, cambiando gli stili css con quelli del balloon che piaceva a te (occhio che aveva una immagine di sfondo, che devi salvarti e linkare nello stile css col giusto percorso) puoi realizzare l'effetto desiderato;
1 - hai già installato jQuery integrator; assicurati che sia abilitato e attiva anche noconflict mode;
non mi dilungo sull'argomento perché trovi vasta documentazione in rete, ma noconflict mode serve per evitare che script multipli sulla stessa pagina vadano in conflitto.
Per far funzionare uno script in noconflict mode, basta sostituire ovunque si trovi il carattere "$" con "jQuery".
2 - Scarica dal sito che ti avevo linkato la libreria jquery.balloon.js, aprila con un editor e sostituisci ovunque (usando la funzione trova e sostituisci) il carattere "$" con "jQuery" (per il noconflict mode; se avessi altri script nel mio sito, dovrei fare questa procedura anche su di loro).
Dato che l'ho già fatto per metterlo nel mio sito, avrei voluto allegarti il file modificato, ma 'sto accidenti di forum si pianta appena tento di allegare un file anche da pochi Kb, quindi nada, te lo devi fare...
-
3 - carica sul sito tramite FTP il file jquery.balloon.js; ti consiglio di metterlo in una sottocartella della cartella del template che usi sul sito, ad esempio tuotemplate/js
4- integra la libreria nel tuo sito: vai sul pannello di amministrazione di joomla, gestione->template->template, apri il tuo template in quella pagina dove puoi modificare i css e il codice e clicchi su "modifica la pagina principale del template"
Nel codice, all'interno della sezione HEAD (ovvero prima del tag di chiusura </head>) ci metti la riga:
<script type="text/javascript" src="js/jquery.balloon.js"></script>
(ovviamente il percorso è relativo alla cartella principale del tuo template, quindi a seconda di dove lo carichi con FTP devi cambiare qui il percorso)
-
A questo punto i balloon sono pronti a funzionare, basta attivarli negli articoli in cui servono (o dove servono);
5 - Apri un articolo (non so che editor usi, ma in ogni caso mettiti in modalità di modifica del codice sorgente in modo da poter inserire dell'HTML)
Come si legge sul sito dei demo, l'attivazione del ballon è data dallo script:
jQuery('selettore').balloon(opzioni);
Nel mio esempio io intendo attivare i balloon sopra a tutti gli hyperlink (tag HTML a) che si trovano dentro uno scecifico DIV che ha come ID "prova1"
Per prima cosa apro il DIV "Prova1":
<div id="prova1">
poi inserisco lo script di attivazione:
<script type="text/javascript">
jQuery(function() {
jQuery('#prova1 a').balloon({
tipSize: 24,
css: {
border: 'solid 4px #5baec0',
padding: '10px',
fontSize: '150%',
fontWeight: 'bold',
lineHeight: '3',
backgroundColor: '#666',
color: '#fff'
}
});
});
</script>
Come si nota il codice va inserito dentro jQuery(function(){...codice...}
In questo esempio non ho usato il codice base jQuery(#prova1 a).balloon(), ma al suo interno ho messo anche le opzioni, e nella fattispecie, lo stile CSS personalizzato; dentro css: { ...regole... } ci puoi mettere tutte le regole css che vuoi, una per riga e che finiscono con la virgola; nel tuo caso qui devi mettere le regole che copi dal balloon che volevi riprodurre;
Da notare che il selettore per l'attivazione è "#prova1 a", cioé tutti i link (a) del contenitore con id=prova1 (#prova1); i selettori da metter qui vanno costruiti come si fa per i CSS, su cui trovi ampia documentazione online;
poi proseguo inserendo il mio testo, e infine ci metto un iperlink, che produrrà il balloon:
<a href="www.cheneso.it" title="prova">Link di prova[/url]
e poi chiudo il div "prova1":
</div>
Da notare che la libreria usa come testo del balloon (se non diversamente specificato), l'attributo title; pertanto il codice sopra produrrà un link che ha come testo "Link di prova", su cui passandoci col mouse apparirà un balloon con dentro scritto "prova";
E' tutto, da qui in avanti ti lascio alla pagina dei demo, che riporta tutti gli esempi possibili e prima di ognuno il codice di attivazione necessario, e spero di esser stato chiaro nello spiegone
-
Puoi dare un'occhiata al risultato qui sul sito delle mie Guide Alpine:
http://www.globalmountain.it/
si attiva sulle immagini di Adriano e Andrea dell'articolo in home page
(io ho cambiato il colore del bordo del balloon)
-
Ciao Cereal_killer hai fatto un lavoraccio ;D grazie mille ;) . Dopo aver letto la spiegazione ed aver avuto un mancamento durato qualche secondo, in seguito al quale mi sono fortunatamente ripreso 8) , leggendo e rileggendo (e ri e ri e ri e rileggendo) la tua spiegazione ho (forse) cominciato a capire cosa dovevo fare.
Arrivato ad un certo punto, però, non so più come muovermi; Ti dico fin dove sono riuscito ad arrivare:
1)Ho installato il plugin jquery integrator abilitando la non conflict mode;
2)Ho scaricato il file jquery.balloon.js (in cui ho sostituito tutti i simoboli "$" con "jQuery");
3)Ho caricato il file nella cartella js del template che uso
4)Nella sezione "modifica la pagina principale del template" e prima della chiusura dell' HEAD ho inserito il comando <script type="text/javascript" src="js/jquery.balloon.js"></script>
5)Arrivati a questo punto quando i baloon dovrebbero essere pronti a funzionare non so in che <div> inserire il comando. Mi spiego meglio: Ho cercato di far comparire un ballon per la descrizione di un immagine (come hai fatto tu per il tuo sito) ma non ci sono riuscito forse perchè non sono riuscito ad individuare il <div> adeguato.
Premetto che in quest'ultima fase in cui ho cercato di inserire il comando:
<script type="text/javascript">
jQuery(function() {
jQuery('#item column-2').balloon({
tipSize: 24,
css: {
border: 'solid 4px #5baec0',
padding: '10px',
fontSize: '150%',
fontWeight: 'bold',
lineHeight: '3',
backgroundColor: '#666',
color: '#fff'
}
});
});
</script>
ho utilizzato firebug senza andare ad intaccare l'html originale ed ho inserito lo script nel <div class="item column-2"> che credo sia il div su cui lavorare,
Provando a collocare il comando dello script in diverse posizioni in questo div ancora sul sito non è comparso nessun ballon (solitamente quando fai delle modifiche con firebug su html o css si vedono in contemporanea al comando che dai, ma stavolta non accade nulla. :-\
Quindi adesso SE io volessi inserire un balloon qui: http://abaca.altervista.org (http://abaca.altervista.org) nell'immagine in cui l'agriturismo si vede dall'alto con all'interno del ballon scritto "Vista dall'alto" cosa mi consiglieresti di fare?
Scusa se ti sto "sfruttando" in questo modo e grazie ancora.
-
Allora:
1 - le modifiche fatte con firebug hanno riscontro immediato se si tratta di html o regole css, non funziona con gli script, quindi devi inserirlo nell'articolo (all'interno dell'editor che usi passi in modalità modifica codice sorgente, lo inserisci, poi torni alla modalità normale PRIMA di SALVARE; e poi controlli che abbia effettivamente salvato il tutto correttamente).
2 - il tuo script in ogni caso ha un errore nella terza riga, ovvero il selettore css è errato; tu hai scritto:
jQuery('#item column-2').balloon({
ma come hai specificato tu stesso vuoi attivare il balloon sull'IMMAGINE che ha come CLASSE item column-2. Il prefisso # indica un ID non una CLASSE, che invece ha come prefisso il punto (.); inoltre bisogna anche indicargli che non si deve attivare su tutti gli elementi di classe .item column-2, bensì SOLO SULLE IMMAGINI contenute all'interno dell'elemento che ha classe .item column-2;
quindi la terza riga dello script deve diventare:
jQuery('.item column-2 img').balloon({
Fai le modifiche e salva, in questo modo puoi vedere se va, e se non va noi possiamo vedere di capire il perché; altrimenti nada ;)
-
Riscontro inoltre un altro errore grave che impedirà il funzionamento:
il file jquery.balloon.js non viene trovato, perché col percorso che hai inserito (mea culpa) lo va a cercare in:
http://abaca.altervista.org/js/jquery.balloon.js
Come si vede in questo percorso manca la cartella del template;
di conseguenza, nell'head del template, non mettere questo:
<script type="text/javascript" src="js/jquery.balloon.js"></script>
bensì questo:
<script type="text/javascript" src="templates/nome_del_tuo_template/js/jquery.balloon.js"></script>
(Ovviamente cambia "nome_del_tuo_template" col vero nome della cartella del tuo template (controllalo con l'FTP e ricordati che linux è case-sensitive quindi devi scriverlo giusto rispettando eventuali maiuscole o minuscole nel nome))
-
ciao C_K, stavolta nell’ head ho inserito questo script:
<script type="text/javascript" src="templates/a4joomla-darksunset-free/js/jquery.balloon.js"></script>
Ma anche questa volta andando a cercare la pagina abaca.org/ templates/a4joomla-darksunset-free/js/jquery.balloon.js (http://) mi da ERRORE “404 Not Found” (non penso sia normale).
Per quanto riguarda invece la modifica del codice sorgente con l’editor, io uso jce editor. Cliccando sul tasto “toggle source code” mi fa accedere alla pagina con la porzione di codice dell’articolo:
<p>L'agriturismo "Li Curti" è innanzitutto un'azienda agricola che si occupa della produzione di olive. L'azienda sita nell'agro di Torre S. Susanna è costituita da 25 ettari di terreno su cui si distribuiscono, diverse varità, comunque autoctone, di ulivi.</p>
<p><a class="jcepopup" href="images/agre.jpg" target="_blank"><img src="images/agre.jpg" alt="agre.jpg" title="L'agriturismo visto dall'alto" style="margin: 2px; vertical-align: middle;" border="0" height="210" width="343" /></a>
</p>
<hr id="system-readmore" />
<p> Le olive prodotte "completano" il loro ciclo secondo due strade:</p>
<ul>
<li>diventare olive per il consumo come tal quali (...che buone!);</li>
<li>diventare olio (...e che olio !).</li>
</ul>
<p> Le varietà di ulivo utilizzate per la produzione di olive da mensa sono:</p>
<p> </p>
<p> </p>
<p>Le varietà che invece dedichiamo per la produzione di olio sono:</p>
Quando inserisco lo script:
<script type="text/javascript">
jQuery(function() {
jQuery('.item column-2 img').balloon({
tipSize: 24,
css: {
border: 'solid 4px #5baec0',
padding: '10px',
fontSize: '150%',
fontWeight: 'bold',
lineHeight: '3',
backgroundColor: '#666',
color: '#fff'
}
});
});
</script>
e passo alla visualizzazione “normale” dell’editor, salvando e andando a verificare sul sito non accade nulla.
Inoltre ho notato che se inserisco lo script, per esempio dopo il primo paragrafo <p> </p>, passando dalla visualizzazione “source code” a quella “normale” tutto il codice (e quindi anche la porzione di articolo) che era sottostante allo script inserito sparisce… ho evitato in questo caso di salvare per non perdere quella porzione di articolo che spariva. Cosa continuo a sbagliare?
-
Allora, la libreria è inserita correttamente nell'header, infatti non da errore ed è raggiungibile qui:
http://abaca.altervista.org/templates/a4joomla-darksunset-free/js/jquery.balloon.js
Nel codice che hai riportato manca "altervista" nell'URL; quindi fin qui tutto bene;
Per lo script, se ti elimina qualcosa ritornando alla visualizzazione normale, si vede che JCE fa casino coi tag, a volte succede; io uso comunemente JCE, di norma funziona abbastanza;
Passa a source code e lo script mettilo in cima all'articolo, prima di tutto il resto, tanto la sua posizione importa poco in realtà; quando torni a modalità normale, nell'editor il codice non si deve vedere, ma si deve invece vedere una piccola icona che indica la presenza di uno script
P.s.: vai sul componente JCE dal pannello di amministrazione, e poi su Gestione Profili; apri il profilo dell'editor che è associato al tuo utente; clicca sul tab "Parametri dell'editor" e nella colonna di sinistra sulla voce in fondo (Editor Advanced);
metti tutte le ultime 4 voci su sì (permetti javascritp, permetti CSS, permetti php e permetti script xhtml in linea)
Altrimenti l'editor rimuove in automatico il codice dello script...
Nello spiegone mi son scordato queste impostazioni...
-
ok ho fatto tutto quello che mi ha detto, anche per quanto riguarda lo script e l'editor jce, infatti adesso compare l'concina dello script in cima all'articolo, però ancora non compare nessun ballon.
Ripensandoci, però, mi sono scordato di chiederti una cosa; una volta che ho inserito lo script all'interno dell'articolo dove devo mettere il testo che va all'interno del balloon? Questo passaggio ancora non mi è chiaro...
-
Ok cominciamo a ragionare ;)
in effetti ora lo script è visibile...
Di default il testo nel balloon è quello dell'attributo title dell'elemento html su cui si attiva; nel tuo caso l'immagine ha l'attributo title correttamente inserito; lo script non si attiva, infatti con firebug puoi vedere l'attributo title nel tag img (se lo script si attivasse, preleverebbe il title, che verrebbe rimosso dal tag img))
Secondo me non funziona perché in questo caso l'attivatore è ancora sbagliato, vedo infatti ora che sulle tue immagini è già attivo il jcemediabox, altro script;
in questo caso il modo di procedere sarebbe quello di far attivare il balloon su un elemento più semplice, che non abbia già altri script su di esso, per controllare che funzioni e poi passare a cercare il selettore giusto per l'elemento voluto;
tuttavia prima di passare a questo, farei ancora una prova:
come selettore usa
.jcemediabox-zoom-span
invece di
.item column-2 img
Perchè è un involucro più esterno della tua immagine...
Se non funziona, pubblica nell'articolo un'immagine che non abbia la mediabox attivata su di essa, e metti il selettore dello script su "img" così collaudiamo che lo script vada...
-
sennò mi mandi in privato i dati di accesso al pannello di controllo, che faccio rapidamente le prove per trovare il selettore giusto e poi ti dico cosa c'era che non andava ;)
-
A quanto pare neanche col selettore .jcemediabox-zoom-span sembra funzionare....forse 2 script in contemporanea non riescono a lavorare ....ok no-problem ti invio le credenziali in mp ;)
-
Ok fatto,
il selettore giusto era:
.jcepopup
perché è l'involucro più esterno della tua immagine...
Sostanzialmente l'immagine è un tag img, annidato dentro allo span con classe .jcemediabox-zoom-span il quale a sua volta è dentro al tag a con classe .jcepopup.
Normalmente non ci sarebbero problemi ad attivare lo script balloon su qualunque di questi elementi, ma il fatto è che gli elementi interni nel tuo caso sono soggetti ad altri script che creano la mediabox, quindi va attivato sul link (a) esterno;
Ora devi mettere lo stile sul tuo balloon; se non ti piace la sua posizione (sopra all'immagine) puoi modificarla sempre con gli stili css oppure, invece di assegnare lo stile nello script come abbiam fatto, puoi assegnargli solo una classe e poi mettere lo stile nel css del tuo template (vedi la pagina dei demo, esempio 7-2)
-
Per rispondere alle tue domande che ho ricevuto in privato:
- Il testo all'interno del balloon, è quello inserito nell'attributo "title" del tag che attiva lo script;
Nel caso di quello che ho messo io, il tag è
<a class="jcepopup" href="http://abaca.altervista.org/images/agre.jpg" target="_blank">
(infatti lo script si attiva per .jcepopup); come si nota, questo tag non ha l'attributo title; di conseguenza lo script lo va a prendere dal primo degli elementi annidati al suo interno che ce l'ha (ovvero l'immagine); di norma ti conviene mettere l'attributo title direttamente sul tag che attiva lo script; l'attributo ha la seguente sintassi:
title="testo che vuoi nel balloon"
In assenza di attributo title lo script non si attiva, anche se magari è correttamente configurato;
Nel nostro caso, il tag di attivazione avrebbe dovuto essere:
<a class="jcepopup" title="L'agriturismo visto dall'alto" href="http://abaca.altervista.org/images/agre.jpg" target="_blank">
Tuttavia avevo già messo il title nell'immagine all'interno per cui non ho ripetuto il title anche qui...
Questa cosa l'avevo specificata nei post di spiegazione ;)
Per quanto riguarda l'attivazione sull'immagine a lato, vale la stessa cosa:
hai provato ad attivare lo script sullo span:
<span class="jcemediabox-zoom-image"></span>
Ma non funziona, perché questo span, insieme al tag dell'immagine, è compreso in uno span che lo contiene:
<span class="jcemediabox-zoom-span" style="vertical-align: middle; margin: 0px; padding: 0px; border: 0px none rgb(255, 255, 255); float: none; width: 314px;">il tag dell'immagine e quello che hai provato a usare tu, sono qui dentro</span>
questo span, come valeva per il caso precedente è soggetto allo cript della mediabox, che hai attivato sulle tue immagini, pertanto non può essere (né lui né gli elementi che contiene) oggetto dello script balloon;
L'elemento giusto su cui attivare lo script è, come nel caso precedente, il tag "a" che contiene tutti i tag descritti sopra, ovvero questo:
<a id="Le olive" class="jcepopup" href="http://abaca.altervista.org/images/Fotolia_olive.jpg" target="_blank">
Ma a guardarlo bene, presenta anch'esso la classe "jcepopup", esattamente come l'altra immagine; infatti essendo che le due immagini sono tutte e due oggetto dell'effetto mediabox, le loro strutture sono uguali.
Dato che lo script già si attiva sugli elementi con classe .jcepopup, dal punto di vista dello script sei già a posto; hai anche già messo l'attributo title sull'altra immagine, ma allora perché lo script non si attiva anche su quella?
Semplice, perché lo script si trova all'interno di un altro articolo, quindi reagisce solo all'interno di quell'articolo;
Prendi lo script dal primo articolo, quello dove funziona, taglialo via da lì, salva l'articolo senza script, e incollalo nella pagina principale del template (dove hai messo la chiamata di jquery.balloon.js, subito dopo di quella riga).
Così facendo lo script sarà attivo su tutto il sito, e lavorerà su tutte le parti del sito che hanno classe .jcepopup
Per completezza ti illustro anche l'altra soluzione:
ogni elemento html può avere più di una classe; si potrebbe aggiungere, in ognuno dei due articoli, nel tag "a" che usiamo per attivare lo script balloon, una nuova classe; ad esempio balloon1 e balloon2; le classi aggiuntive vanno separate da spazio;
quindi il tag del primo articolo diverrebbe <a class="jcepopup balloon1".........
e quello del secondo articolo diverrebbe <a class="jcepopup balloon2 ........
Ora in ognuno dei due articoli si può inserire uno script, nel primo articolo che si attivi con selettore .balloon1, nel secondo con selettore .balloon2;
La differenza? Nel primo caso hai uno script attivato sull'intero sito (potrebbe accadere che su alcuni elementi di classe .jcepopup con l'attributo title non si voglia attivare il balloon, ma in questo caso è impossibile, si attiverebbe comunque)
Nel secondo caso hai due script specifici confinati negli articoli, ma hai più codice sul sito; se lo facessi tante volte appesantiresti la struttura...
-
Stavo per inviare un post in cui ti dicevo che anche questa volta i nostri sforzi non erano serviti ma provando a visualizzare per l’ultima volta la pagina (stavolta con Chrome)e “giochicchiando” un po’ con le immagini mi sono accorto che i balloon compaiono…il problema è che per visualizzarli devi posizionarti col mouse sui bordi delle immagini ed in particolare per quella più in alto il bordo sx mentre per le altre due il bordo superiore…(allego immag) mentre con firefox non compaiono per niente. Ho notato poi che comunque in Chrome questo effetto si ha solo sulla home mentre nella altre pagine i balloon non compaiono anche con questo …..non so che dirti… ???
Per quanto riguarda il secondo metodo non ho provato ad eseguirlo perché sapendo che questo script:
<script type="text/javascript">
jQuery(function() {
jQuery('.balloon1).balloon({
tipSize: 24,
css: {
border: 'solid 4px #5baec0',
padding: '10px',
fontSize: '150%',
fontWeight: 'bold',
lineHeight: '3',
backgroundColor: '#666',
color: '#fff'
}
});
});
</script>
e questo:
<script type="text/javascript">
jQuery(function() {
jQuery('.balloon2).balloon({
tipSize: 24,
css: {
border: 'solid 4px #5baec0',
padding: '10px',
fontSize: '150%',
fontWeight: 'bold',
lineHeight: '3',
backgroundColor: '#666',
color: '#fff'
}
});
});
</script>
vanno inseriti nei rispettivi articoli, non ho capito dove andrebbero messi questo comandi di cui avevi parlato:
_per l’articolo 1: <a class="jcepopup balloon1" href="http://abaca.altervista.org/images/agre.jpg" target="_blank">_per l’articolo2: <a class="jcepopup balloon2" href="http://abaca.altervista.org/images/Fotolia_olive.jpg" target="_blank">nell’html? Dove?
Hai qualche altra idea? :-[
[allegato eliminato da un amministratore essendo vecchio più di un anno]
-
Te l'ho sistemato, ho cambiato lo script per reagire alla classe ".ck-balloon" (sempre nel template, così è attivo su tutto il sito);
poi ho studiato questa soluzione che è forse la cosa più semplice:
ho incapsulato tutte le tre immagini nella home page (agendo sul codice nei relativi articoli) dentro uno span con la classe specificata e il title:
<span class="ck-balloon" title="Ecco, i nostri prodotti">
qui dentro ci sono tutti i vari involucri dell'immagine
</span>
(vai dentro uno degli articoli per vedere nel dettaglio)
P.s.: ci tengo a precisare che ti ho aiutato fino a questo punto, perché non mi hai mai chiesto di fare il lavoro al posto tuo, ma al contrario ci hai messo l'impegno per capire e provare; così giunti a questo punto sei in grado di capire il perché delle cose ;) penso che con questo ultimo sistema tu possa finalmente creare i tuoi balloon dove vuoi ;)
-
Ok, grazie C_K, sei stato veramente gentile e disponibile ;) ;D e devo dire che sei l’emblema di questo forum di cui posso solo che parlare bene.
Ultima domanda giusto per capire tutto fino in fondo, e poi ti lascio finalmente in pace ::) da dove deriva la class ck-ballon? Su firebug non è indicata; e poi se si volesse inserire il balloon su un modulo come bisognerebbe agire? E’ veramente l’ultimo disturbo che ti do :-X . Grazie ancora.
-
Entra dal pannello di amministrazione a modificare uno degli articoli, vedrai lo span con la classe ck-balloon che avvolge il tag a con classe jcepopup... (ho aperto il tag span appena prima del tag a, e ovviamente l'ho chiuso subito dopo la chiusura del tag a)
Per quanto riguarda i moduli; esiste una maniera semplicissima SE ti va bene di attivare il balloon sull'intera area occupata dal modulo, e non solo su una parte di esso...
Forse saprai che joomla ha un sistema per richiamare un modulo a seconda della sua posizione;
se ad esempio voglio un modulo all'interno di un articolo, lo pubblico in una posizione che non esiste nel template (es ck-1), poi vado nell'articolo e inserisco il codice:
{loadposition ck-1}
in automatico il codice verrà sostituito col contenuto del modulo;
se volessi attivare il balloon su un modulo, lo pubblicherei in una posizione fittizia (es ck-1); a questo punto creerei un nuovo modulo di tipo "html personalizzato" pubblicato nella posizione che voglio;
al suo interno, in modalità codice scriverei:
<span class="ck-balloon" title="testo del balloon">
{loadposition ck-1}
</span>
Con questo sistema, il modulo html richiama il modulo in posizione ck-1, e lo incapsula nel codice che occorre per attivare il balloon...
-
ok grazie ancora di tutto e buon proseguimento. 8)
-
Se non riesci a far qualcosa non farti problemi...
Cmq col sistema che hai imparato puoi inglobare nel tuo sito qualunque script jQuery che puoi ritenere utile, funzionano sempre così: uno script da scaricare, caricare con FTP sul tuo sito e inglobare nell'head del template, e uno di attivazione da inserire nel codice ;)