Back to top

Autore Topic: Inserire immagini negli articoli con effetto lightbox al clic  (Letto 91339 volte)

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Ho scritto un articolo dove faccio la recensione di una coppia di plugin per inserire immagini in miniatura nei nostri articoli, che si ingrandiscono al clic con un gradevole effetto light-box.

Link all'articolo: http://www.joomla.it/articoli-della-community/3611-inserire-immagini-con-effetto-light-box.html

Posto qui il codice da inserire nel testo dell'articolo:
Codice: [Seleziona]
{limage}tuaimmagine.jpg{/limage}
nel punto dove volete far apparire la miniatura dell’immagine tuaimmagine.jpg che dovrà essere messa dentro la cartella indicata nei parametri o, se avete lasciato in bianco, dentro la cartella images/stories.

Aggiungo il codice da incollare con l’editor lato codice dentro un articolo di joomla in modo da far apparire la miniatura con l’allineamento voluto.

Per centrarla:

Codice: [Seleziona]
<div align="center"  style="width:300px">{limage} tuaimmagine.jpg{/limage}<br /></div>
Ma in alcuni template questo non funziona. Allora provate con questo che dovrebbe essere infallibile:

Codice: [Seleziona]
<div style="width:300px; margin:auto">{limage} tuaimmagine.jpg{/limage}</div>
Preciso che la larghezza di width sarà quella della vostra miniatura.

Per allinearla a sinistra:

Codice: [Seleziona]
<div style="float: left; margin:5px">
{limage} tuaimmagine.jpg{/limage}
</div>

Oppure a destra cambiando il float così:
Codice: [Seleziona]
<div style="float: right; margin:5px">
{limage} tuaimmagine.jpg{/limage}
</div>
« Ultima modifica: 25 Giu 2009, 10:46:45 da ste »
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline cupra

  • Esploratore
  • **
  • Post: 130
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #1 il: 25 Giu 2009, 16:58:38 »
Grazie! Veramente simpatico ed accattivante
Amici del trekking e della natura
www.noielamontagna.net

Offline ventus85

  • Instancabile
  • ******
  • Post: 6538
  • Sesso: Femmina
  • Affetta da Joomlaite
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #2 il: 25 Giu 2009, 18:27:32 »
Accidenti, i miei problemi di internet mi hanno impedito di leggerlo, ora rimedio subito!
Se volete aiuto non mandate messaggi privati, ma usate la funzione Cerca e postate sul forum, grazie!

Born in the wind, born to be wild!

Offline floyd1616

  • Appassionato
  • ***
  • Post: 497
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #3 il: 26 Giu 2009, 09:58:45 »
Ciao Tonicopi
a me non soddisfa granchè questo plugin perchè non ci sono le frecce per scorrere le immagini; per richiamare 3 immagini, ad esempio, si deve scrivere ogni volta il nome di ognuna; se ce ne fossero 100? :) meglio, secondo me, Symple image gallery oppure, avendo lo stesso ed identico effetto con il tuo esempio, un plugin che si installa a parte in JCE editor.
saluti
Floyd

Offline evangelis

  • Esploratore
  • **
  • Post: 62
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #4 il: 26 Giu 2009, 10:26:18 »
monto bellino ;)

Offline Gabryecho

  • Nuovo arrivato
  • *
  • Post: 6
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #5 il: 26 Giu 2009, 12:56:37 »
Molto belli, complimenti.

Se qualcuno avesse l'esigenza (Per un X motivo)che la cartella per le immagini non fosse in "images/stories" ma nella images oppure nella cartella "xy" potrei inserire un minitutorial per effettuare questa modifica. Interessa a qualcuno? :P :P :P

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #6 il: 26 Giu 2009, 13:44:13 »
Ciao Gabryecho e benvenuto nel forum. Si pubblica questo minitutorial, più cose ci mettimao qui dove parliamo di questo plugin meglio è.  :)

@floyd1616 L'abbondanza delle scelte in Joomla! è uno dei punti di forza! io uso talvolta simple image gallery ma mi pare che mi desse problemi con IE6. Adesso magari la riprovo. Quanto la plugin per JCE vuoi segnalarne il nome, magari ci semplifica la vita. Io non lo conosco...  :)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline Gabryecho

  • Nuovo arrivato
  • *
  • Post: 6
  • Sesso: Maschio
    • Mostra profilo
Re: Cambiare cartella di salvataggio
« Risposta #7 il: 26 Giu 2009, 15:02:53 »
Premessa: La modifica della cartella di destinazione comporta la modifica del codice php quindi prestare massima attenzione alla Sintassi, un errore potrebbe causare il malfunzionamento del plugin

Punto 1: spacchettare il file zip "protos.lightbox.zip", all'interno troverete due file "protos.lightbox.xml" e "protos.lightbox.php". L'ultimo di questi, ovvero il PHP è quello che ci interessa e che modificheremo.

Punto 2: Aprite il suddetto file con un editor web, ma anche un qualsiasi editor di testi va bene.
Non spaventatevi, non è così complicato!

Punto 3: Guardate il codice,
Codice: [Seleziona]
// load plugin params info è un commento, in generale
 le righe singole precedute da
Codice: [Seleziona]
//
o da
Codice: [Seleziona]
/*
e chiuse da
Codice: [Seleziona]
*/
sono commenti. Bene, fate scorrere il codice fino a quando non troverete
Codice: [Seleziona]
// load plugin params info
$plugin =& JPluginHelper::getPlugin('content', 'protos.lightbox');
$pluginParams = new JParameter( $plugin->params );

$pluginParams->def('folder', '');
$pluginParams->def('width', '107');
$pluginParams->def('height', '120');

$limage = '<span><a id="thumb1" href="images/stories/'.$pluginParams->get('folder').'/'.$plightbox.'" class="highslide" onclick="return hs.expand(this, {captionId: \'caption1\'})"><img src="images/stories/'.$pluginParams->get('folder').'/'.$plightbox.'" alt="" title="" height="'.$pluginParams->get('height').'" width="'.$pluginParams->get('width').'" /></a></span>';
return $limage;

Punto4: Come potete vedere nella riga che definisce il link (Quindi con tag "<a>") c'è il percorso al quale deve puntare il link, più precisamente è scritto in questa maniera
Codice: [Seleziona]
$limage = '<span><a id="thumb1" href="images/stories/'.Voi dovete intervenire su questa parte e cancellare stories/ se volete che la cartella di partenza sia  images, altrimenti cambiate path a vostro piacimento ma ricordate che deve essere giusta, altrimenti le vostre immagini non verranno visualizzate!Nota1.

Punto 5: bisogna modificare path anche più avanti nel codice, e più precisamente qui
Codice: [Seleziona]
<img src="images/stories/'.$plugi....inserite lo stesso percorso di prima, attenzione proprio lo stesso eh?!? ;D ;D ;D

Punto 6: salvate le vostre modifiche e ricompattate tutto per procedere all'installazione.

Pratica:Mettiamo che io voglia inserire le immagini in images/pippo/pluto
il mio codice modificato sarà
Codice: [Seleziona]
$limage = '<span><a id="thumb1" href="images/pippo/'.$pluginParams->get('folder').'/'.$plightbox.'" class="highslide" onclick="return hs.expand(this, {captionId: \'caption1\'})"><img src="images/pippo/'.$pluginParams->get('folder').'/'.$plightbox.'" alt="" title="" height="'.$pluginParams->get('height').'" width="'.$pluginParams->get('width').'" /></a></span>';
e successivamente nella pagina d'impostazione del plugin inseriro "pluto" nello spazio destinato al nome della cartella.

Nota 1: la cartella impostata dal pannello amministrativo deve trovarsi nel nuovo percorso che abbiamo inserito. Quindi NON inserite subito la cartella dove intendete salvare le immagini. Andrà inserita dal pannello amministrativo.

Nota importante: questa modifica del codice non è da ritenersi modifica funzionale ma una banale personalizzazione, per cui non rientra tra le violazioni della licenza GNU-GPL e il sottoscritto non si assume responsabilità per il malfunzionamento. Sconsiglio vivamente a chi non abbia idea di cosa sia il linguaggio HTML o PHP dall'eseguire la modifica sopra-descritta

Comunque rimango a disposizione per eventuali chiarimenti, spero di essere stato chiaro ::) ::) ::) ::) e accetto critiche e consigli.

Gabry

Offline Gabryecho

  • Nuovo arrivato
  • *
  • Post: 6
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #8 il: 26 Giu 2009, 15:07:12 »
Symple image gallery

Infatti visualizza un galleria di immagini, mentre se stai scrivendo una recensione e vuoi thumbnail ad ingrandimento per mostrare un particolare di una operazione (es. montaggio smontaggio) inserisci una singola immagine, è per questo che il plugin è stato scritto, per inserire singole immagini, altrimenti perchè richiamare l'immagine per nome in maniera univoca??? ;D ;D ;D ;D ;D ;D

Offline Gabryecho

  • Nuovo arrivato
  • *
  • Post: 6
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #9 il: 26 Giu 2009, 17:29:38 »
Aggiungo il codice da incollare con l’editor lato codice dentro un articolo di joomla in modo da far apparire la miniatura con l’allineamento voluto.
(.......)

In alternativa che ne diresti di usare una tabella?
Ci ho pensato poichè il tag che racchiude le img è una <span> e ho fatto alcune prove....Praticamente al posto del testo di una cella si mette il codice. ::)

Offline mattialori

  • Appassionato
  • ***
  • Post: 412
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #10 il: 26 Giu 2009, 20:01:24 »
è possibile fare in modo che l'immagine venga mostrata cliccando su un testo, invece che sulla miniatura dell'immagine?

garzie

Offline Gabryecho

  • Nuovo arrivato
  • *
  • Post: 6
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #11 il: 27 Giu 2009, 10:24:32 »
è possibile fare in modo che l'immagine venga mostrata cliccando su un testo, invece che sulla miniatura dell'immagine?

garzie

Con le opportune modifiche al codice si.Però poi non potrai più usare immagini, solo testo clikkabile. Forse sarebbe meglio cercare un plugin che lo faccia.
Comunque la risposta è si.....

Offline mattialori

  • Appassionato
  • ***
  • Post: 412
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #12 il: 27 Giu 2009, 15:41:56 »
ok grazie mille

Offline faufer

  • Nuovo arrivato
  • *
  • Post: 14
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #13 il: 29 Giu 2009, 23:30:30 »
lightbox? ma si tratta della libreria Highslide.js vedi highslide.com  esistono decine di plugin e moduli che trattano questo argomento....cosa avete duplicato? tipo ja highslide ecc ecc.....anche gratuiti...vedi pagina http://highslide.com/#implementations....nettamente migliori...saluti

Offline CLOE18

  • Esploratore
  • **
  • Post: 57
  • Sesso: Femmina
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #14 il: 01 Lug 2009, 11:35:27 »
Molto molto carino,
proprio quello di cui avevo bisogno.
Grazie! ;)

Offline corzen

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #15 il: 16 Lug 2009, 23:30:40 »
a me non funziona assolutamente..
non riesco a capire perchè...
non carica l'immagine

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #16 il: 16 Lug 2009, 23:39:29 »
Ciao corzen, segui per bene passo passo le istruzioni dell'articolo. Probabilmente sbagli qualcosa.  ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline corzen

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #17 il: 17 Lug 2009, 12:27:35 »
dici si... riprovo, ho provato più volte ma mi da sempre il solito errore... una cosa non mi è chiara:
l'immagine caricata sulla cartella images/stories può essere di qualsiasi dimensione?

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #18 il: 17 Lug 2009, 16:16:13 »
Si l'immagine può essere di qualsiasi dimensione e se la carichi nella cartella images/stories devi lasciare in bianco la scelta della cartella nei parametri del plugin
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline FraJ

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
Re:Inserire immagini negli articoli con effetto lightbox al clic
« Risposta #19 il: 07 Ott 2009, 13:30:14 »
sarebbe molto interessante per me poter cambiare la cartella delle foto al volo, intendo dire inserendo invece nel codice {limage}cartella/nome_immagine.jpg{/limage}

non c'è la possibilità?

 



Web Design Bolzano Kreatif