Joomla.it Forum
Joomla! 3 => I Template di Joomla! 3 => : joomla_fan 27 Aug 2013, 10:06:15
-
Buongiorno a tutti.
Ho inserito una immagine di sfondo sul template myprotostar (duplicato di protostar) utilizzando il jQuery plugin "backstretch".
Ora vorrei rendere tale immagine cliccabile, ma proprio non ci riesco!
Una cosa che mi incuriosisce: se analizzo la pagine con firebug trovo, alla fine dopo il footer, una div con class=backstretch; ma nel sorgente della pagina non ce ne traccia!
Sarà forse per questo che lo script non trova la classe?
Qualcuno ha una soluzione?
Grazie.
PS - Se nello script inserisco un'altra class (p.e. body) funziona.
-
Ciao joomla_fan,
Il modulo backstretch è commerciale, e inclusa nel prezzo c'è l'assistenza (che invece non è prevista su questo forum, per prodotti commerciali), per cui la cosa migliore che puoi fare e aprire un ticket. In ogni caso, non sono sicura di aver capito bene il problema.
Dici che:
se analizzo la pagine con firebug trovo, alla fine dopo il footer, una div con class=backstretch; ma nel sorgente della pagina non ce ne traccia!
Ma in che senso ? Nel codice sorgente (cioè il codice generato per la pagina) la div calss="backstretch" c'è, così come la vede Firebug. Se non ci fosse, non si vedrebbe l'immagine di sfondo (che viene aggiunta proprio con l'aggiunta di questa div in position:absolute).
Inoltre:
PS - Se nello script inserisco un'altra class (p.e. body) funziona.
Anche questo non mi è chiaro. Se lo sviluppatore ha previsto che tu possa associare un link all'immagine di sfondo, e per qualche motivo non riesci a farlo, allora sicuramente devi aprire un ticket di assistenza, vedrai che ti risolvono il problema.
Se invece questa funzionalità non è prevista, devi andare a vedere come javascript genera il codice della div backstretch, e modificarlo aggiungendo un tag <a>[/url] all'immagine. Ovvio che così facendo poi ogni volta che vorrai cambiare il link dovrai mettere mano al codice.
-
Ciao joomla_fan,
Il modulo backstretch è commerciale, e inclusa nel prezzo c'è l'assistenza (che invece non è prevista su questo forum, per prodotti commerciali), per cui la cosa migliore che puoi fare e aprire un ticket. In ogni caso, non sono sicura di aver capito bene il problema.
Ciao Dieda12.
Io non ho installato nessuno modulo commerciale.
Ho inserito nella index del template uno script che ho scaricato gratuitamente (jquery.backstretch.js) e poi richiamato la funzione.
Tu mi stai parlando di un'altra cosa.
-
Ops, scusa, pensavo ti riferissi all'omonimo plugin (commerciale) per Joomla!
Se hai aggiunto tu il codice allora io proverei a fare così:
1) De-minify il codice, vedi qui: http://jsbeautifier.org/ (http://jsbeautifier.org/)
2) Aggiungi una classe all'immagine, cioè, dopo riga 127 (prima di "return b") aggiungi
b.$img.addClass("myClass");
3) Punta alla classe appena creata per "avvolgere" (funzione wrap di jQuery) la img nel tuo tag a. Dopo riga 75 (non l'ho testato, è una prima prova) aggiungi:
$('.myClass').wrap('<a href="www.tuolink.it" />');
4) Ri-minify il codice.
Come ti dicevo non l'ho testato, ma dovrebbe essere un inizio.
-
ciao, grazie per la risposta
Ora sono con il cellulare e non posso provare i tuoi suggerimenti, però potresti chiarirmi meglio i punti 1) e 4) ?
Grazie ancora.
-
Non ho guardato quale file .js hai incluso, ma ho guardato direttamente il foglio distribuito dal programmatore.
I punti 1 e 4 servono solo se hai incluso il file jquery.backstretch.min.js.
Se hai incluso il file "non-minified" jquery.backstretch.js quei punti non sono necessari.
Ti copio il blocco di righe dopo le quali dovresti aggiungere la funzione wrap (l'ultima riga corrisponde alla mia 75):
this.isBody || (c = this.$container.css("position"), b = this.$container.css("zIndex"), this.$container.css({
position: "static" === c ? "relative" : c,
zIndex: "auto" === b ? 0 : b,
background: "none"
}), this.$wrap.css({
zIndex: -999998
}));
this.$wrap.css({
position: this.isBody && l ? "fixed" : "absolute"
});
-
Ciao nuovamente.
Ho seguito con attenzione tutti i tuoi suggerimenti, ma non sono venuto a capo del problema.
Dato che non é una cosa che mi serve ma era solo per fare esperienza, per il momento lascio perdere;
troppa fatica per le mie misere conoscenze!!
Ti ringrazio per il tempo che mi hai dedicato.
PS - Ora, con firebug, il codice nella pagina risulta così:
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px;
padding: 0px; height: 405px; width: 1263px; z-index: -999999; position: fixed;">
<a target="_blank" href="http://www">
<img class="myClass" style="position: absolute; margin: 0px; padding: 0px; border:
medium none; width: 1263px; height: 947.25px; max-height: none; max-width: none;
z-index: -999999; left: 0px; top: -271.125px;"
src="http://www">
[/url]
</div>ma l'immagine non é cliccabile
-
Va beh, avevo detto che lasciavo perdere ...
Ho solo fatto una ulteriore prova, senza modificare il codice:
- con Firefox e Chrome, non funziona
- con IE 8, funziona
-
Il codice generato è corretto, è un problema di z-index.
Hai degli elementi sovrapposti alla div backstretch (ad esempio la div class="body").
Se fai una prova grezza e assegni alla backstretch una z-index:2000, invece che -999999 vedrai che il link appare.
Probabilmente IE intuisce le tue intenzioni (a esser buoni :-)) e non rispetta le sovrapposizioni.
Aggiusta gli z-index in modo che la backstretch stia dietro i tuoi contenuti ma SOPRA a tutto ciò che è sfondo (body, div class="body" e non so se c'è altro).
-
Grazie ai preziosi suggerimenti di Dieda12 sono riuscito a risolvere il mio problema (per me ad uso esclusivamente didattico).
Volevo inserire una immagine di sfondo - ridimensionabile automaticamente - e che fosse "cliccabile" per richiamare una url, partendo dal template Protostar di default sulla 3.1.5
Questa la procedura seguita:
- Duplicazione del template (credo sia importante, essendo protostar un template di default, in caso di aggiornamenti si perderebbero le modifiche e poi é sempre meglio lavorare su una copia)
- Per inserire l'immagine di sfondo ho utilizzato il plugin jquery "jquery.backstretch.js", quindi dopo averlo scaricato ho eseguito alcune piccole modifiche:
riga 91, modificato z-index: -1000;
riga 103, modificato z-index: -1000;
dopo la riga 266, inserita nuova riga -- > self.$img.addClass('imgClk');
- Incluso il file js nella index del template all'interno del tag <head>
<?php $doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js'); ?>
- Inserito sempre nella index del template all'interno del tag <body>
<script type="text/javascript">
jQuery(document).ready(function() { jQuery.backstretch("path_della_immagine_di_sfondo");
});
jQuery(document).ready(function() {
jQuery('.imgClk').wrap('<a href="url_del_collegamento" target="_blank">[/url]');
});
</script>
- Modificato nel file css/template.css la seguente classe:
body.site {
position: relative;
z-index: -5000;
border-top: 3px solid #0088cc;
padding: 20px 100px;
background-color: #f4f6f7;
}
Spero di non essermi dimenticato nulla.
Ciao.
-
Grazie per aver postato la soluzione completa (molto interessante) :-)
Tra l'altro, se qualcun altro fosse interessato, faccio presente che il sopracitato (da me) omonimo plugin commerciale NON offre la possibilità di inserire un link sull'immagine di sfondo.
Magari metti [RISOLTO] nel titolo :-) [Edit: ops, efficientissimo, l'hai già fatto]
Elena