Autore Topic: [RISOLTO] griglia immagini con colonna che comprende due righe  (Letto 571 volte)

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Ciao a tutti.
Più facile a vedersi che a spiegarsi...

Potreste dare un'occhiata qui scorrendo sotto la slideshow iniziale noterete una sorta di menu fatto con le immagini.
Dovrei fare in modo che la quarta immagine, quella lunga, comprenda le due righe di immagini quadrate...
Allego un'immagine così forse mi spiego meglio.

Ho provato diverse estensioni, ma anche se ottenevo l'effetto griglia erano troppo "limitate" come personalizzazione. adesso ho creato un modulo con codice personalizzato, ma praticamente ho soltanto inserito delle immagini nell'editor di joomla cercando di comporle manualmente. Questo è il codice:

Codice: [Seleziona]
<p style="text-align: center;">
<a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="la nostra storia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra storia::un cuore" />[/url]

<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="la nostra giornata copia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra giornata::tra preghiera e lavoro" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="il nostro carisma" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="cittadella dell immacolata" width="230" height="460" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]</p>

<p style="text-align: justify;">
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]</p>

Ho provato anche a lavorare con le colonne, ma non sono stata capace  :-[
Grazie a tutti
« Ultima modifica: 23 Feb 2018, 15:17:26 da mariarosaria »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 28930
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:griglia immagini con colonna che comprende due righe
« Risposta #1 il: 21 Feb 2018, 20:04:24 »
Ciao
Dovresti utilizzare bootstrap, fai una riga con 4 colonne, nelle prime tre metti la prima immagine e la seconda accapo, nella quarta  una sola, ovviamente devi calibrare le dimensioni delle immagini per mantenerle allineate come in figura
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Re:griglia immagini con colonna che comprende due righe
« Risposta #2 il: 21 Feb 2018, 21:36:07 »
Grazie.
Scusa, ma...
Non sono molto ferrata.
Non ho capito bene la sequenza da rispettare. E comunque non so usare bootstrap.
Sapresti indicarmi una guida abbastanza semplice?
Grazie mille

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 28930
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
    • Xataface Italia
Re:griglia immagini con colonna che comprende due righe
« Risposta #3 il: 21 Feb 2018, 21:39:11 »
Scrivi bootstrap sul motore google e troverai tanti esempi e guide, scegli solo i link di w3school é tutto free.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline Anthony Marra

  • Esploratore
  • **
  • Post: 113
  • Sesso: Maschio
    • Mostra profilo
Re:griglia immagini con colonna che comprende due righe
« Risposta #4 il: 21 Feb 2018, 23:50:05 »
Ciao a tutti.
Più facile a vedersi che a spiegarsi...

Potreste dare un'occhiata qui scorrendo sotto la slideshow iniziale noterete una sorta di menu fatto con le immagini.
Dovrei fare in modo che la quarta immagine, quella lunga, comprenda le due righe di immagini quadrate...
Allego un'immagine così forse mi spiego meglio.

Ho provato diverse estensioni, ma anche se ottenevo l'effetto griglia erano troppo "limitate" come personalizzazione. adesso ho creato un modulo con codice personalizzato, ma praticamente ho soltanto inserito delle immagini nell'editor di joomla cercando di comporle manualmente. Questo è il codice:

Codice: [Seleziona]
<p style="text-align: center;">
<a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="la nostra storia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra storia::un cuore" />[/url]

<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="la nostra giornata copia" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="La nostra giornata::tra preghiera e lavoro" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="il nostro carisma" width="230" height="230" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]

<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="cittadella dell immacolata" width="230" height="460" class="effectck-jazz" style="vertical-align: top;" title="Il nostro carisma::un cuore" />[/url]</p>

<p style="text-align: justify;">
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" />[/url]</p>

Ho provato anche a lavorare con le colonne, ma non sono stata capace  :-[
Grazie a tutti
Buonasera, dando uno sguardo al tuo sito ho effettuato una prova. Ho modificato le classi delle 6 immagini piccole da:
"class="effectck-jazz" a class="effectck-jazz2" e l'immagine che che vuoi ad altezza delle due righe in class="effectck-jazz3"
Poi aggiungendo una nuova regola css per le immagini piccole "jazz2":
Codice: [Seleziona]
.imageeffectck.effectck-jazz2
float: left
e la regola css per l'immagine alta due righe
Codice: [Seleziona]
.imageeffectck.effectck-jazz3
float: right
e sono riuscito ad ottenere il seguente risultato
https://prnt.sc/ii1a3b
Ovviamente cambiando classe alle immagini perdi l'effetto hover e quindi bisogna ricopiare alcune righe dal file css imageeffectck.css copiandole magari nel file "custom css" (in modo che a futuri aggiornamenti non perdi le modifiche) riportando appunto gli stessi effetti per jazz2 e jazz3.

Fai una prova e vedi se ti va bene..

Aggiungo anche che più semplicmente potresti aggiungere direttamente nel codice dello style
"float:left" per le immagini piccole
e "float:right" per quella grande che deve coprire le due righe
ed ottieni lo stesso risultato senza dover modificare i css.
Ho fatto una prova con il codice che hai postato tu e mi funziona.
ad esempio:
Codice: [Seleziona]
style="vertical-align: bottom; float: left;"
« Ultima modifica: 22 Feb 2018, 06:00:35 da Anthony Marra »

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Re:griglia immagini con colonna che comprende due righe
« Risposta #5 il: 22 Feb 2018, 08:48:36 »
Ciao Anthony!
Grazie mille per la risposta.
Stavo appunto cercando qualcosa sul bootstrap come suggerito da tomtomeight e poi ho letto il tuo messaggio.
Faccio subito della prove.
Sul bootstrap, nel sito w3 school, non ho trovato degli esempi con una colonna che mi comprendesse due righe e da sola non ci arrivo.
Avevo provato a sistemarle con gli allineamenti, ma non avevo pensato alla tua soluzione, in quanto avevo utilizzato top e bottom, ma non avevo provato right e left.
Provo e ti faccio sapere (ma siccome tu l'hai fatto, se non mi funziona sono io che non sono capace  ;) )
Grazie ancora

Offline Anthony Marra

  • Esploratore
  • **
  • Post: 113
  • Sesso: Maschio
    • Mostra profilo
Re:griglia immagini con colonna che comprende due righe
« Risposta #6 il: 22 Feb 2018, 08:55:12 »
Io ho provato entrambe le soluzioni che ti ho postato e funzionano.
Quello che ti suggeriva tom era appunto di creare una riga con quattro colonne. nelle prime 3 colonne inserivi le 6 immagini.. per intenderci 3 sopra e 3 sotto. e nell'ultima colonna inserivi l'immagine grande.
La riga era sempre una.

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Re:griglia immagini con colonna che comprende due righe
« Risposta #7 il: 22 Feb 2018, 09:15:04 »
Ah... adesso capisco...

Nel frattempo ho fatto qualche prova...
Questo è il nuovo codice:

Codice: [Seleziona]
<p><a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="la nostra storia" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra storia::un cuore" /></a>
<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="la nostra giornata copia" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra giornata::tra preghiera e lavoro" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="il nostro carisma" width="230" height="230" class="effectck-jazz" style="float: left;" title="Il nostro carisma::un cuore" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="cittadella dell immacolata" width="230" height="460" class="effectck-jazz" style="float: right;" title="Il nostro carisma::un cuore" /></a></p>
<p><a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="float: left;" title="La nostra spiritualità::il Totus tuus" /></a></p>

Ho cominciato dall'ultima soluzione che era la più semplice.
Le immagini però non si smuovono... Ho fatto anche qualche prova in diretta con firebug.
Daresti un'occhiata al codice? Lo style:float va inserito nel tag degli attributi dell'immagine suppongo...

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Re:griglia immagini con colonna che comprende due righe
« Risposta #8 il: 22 Feb 2018, 09:22:06 »
Aspetta, ok ok...
E' la classe dell'effeto che mi creava problemi...

Mi sa che devo modificare per forza il css dell'effetto. Esatto?
Ci sarà qualche attributo che prevale. giusto?

Offline Anthony Marra

  • Esploratore
  • **
  • Post: 113
  • Sesso: Maschio
    • Mostra profilo
Re:griglia immagini con colonna che comprende due righe
« Risposta #9 il: 22 Feb 2018, 09:33:04 »
no aspetta non so che soluzione hai adottato. ma se hai seguito la mia ultima soluzione vuol dire che hai cancellato qualcosa.
Fai semplicemente una cosa.
dal codice che hai bostato tu prima
Codice: [Seleziona]
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="la nostra spiritualita q" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom;" title="La nostra spiritualità::il Totus tuus" /></a></p>aggiungi qui
Codice: [Seleziona]
style="vertical-align: bottom;float:left " senza modificare altro. altrimenti togli la classe per questo ti toglie l'effetto
devi semplicmeente aggiungere il "float" dopo il vertical align di ogni riga
P.s. cancella la cache browser e joomla per questo prima non vedevi la modifica

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Re:griglia immagini con colonna che comprende due righe
« Risposta #10 il: 22 Feb 2018, 09:45:21 »
Allora. Ho fatto le classi personalizzate come avevi detto tu, nel file custom e funziona.
Ho fatto la classe jazzl (per left) e jazzr (per right).
Avevo già tentato con float left e vertical align, solo che non avevo cancellato la cache del browser (in joomla è disattivata). Giusto per capire se era un problema di cache browser proverò ugualmente.
Adesso non mi rimane che sistemare le grandezze e le spaziature. Ma se volessi mantenere queste misure centrando il tutto rispetto al modulo? Devo centrare i due paragrafi?

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
Re:griglia immagini con colonna che comprende due righe
« Risposta #11 il: 22 Feb 2018, 09:56:49 »
Niente...
Mantengo la modifica delle classi css. Aggiungendo align e float alle singole immagini non va (stavolta ho svuotato la cache):

Codice: [Seleziona]
<p><a href="la-nostra-storia"><img src="images/conosciamocimeglio/la-nostra-storia.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra storia::un cuore" /></a>
<a href="la-nostra-giornata"><img src="images/conosciamocimeglio/la-nostra-giornata%20copia.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra giornata::tra preghiera e lavoro" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/il-nostro-carisma.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="Il nostro carisma::un cuore" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/cittadella-dell-immacolata.jpg" alt="" width="230" height="460" class="effectck-jazz" style="vertical-align: bottom; float: right;" title="Il nostro carisma::un cuore" /></a></p>

<p><a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra spiritualità::il Totus tuus" /></a>
<a href="la-nostra-spiritualita"><img src="images/conosciamocimeglio/la-nostra-spiritualita-q.jpg" alt="" width="230" height="230" class="effectck-jazz" style="vertical-align: bottom; float: left;" title="La nostra spiritualità::il Totus tuus" /></a></p>

Un problema adesso è la spaziatura fra le immagini piccole e quella grande...

Offline Limma

  • Abituale
  • ****
  • Post: 847
  • Sesso: Maschio
    • Mostra profilo
Re:griglia immagini con colonna che comprende due righe
« Risposta #12 il: 22 Feb 2018, 11:41:03 »
Un problema adesso è la spaziatura fra le immagini piccole e quella grande...

Credo che anche modificando la risoluzione del monitor compaia qualche problema di visualizzazione.
In ogni caso il tuo quesito non è di facilissima soluzione (almeno per me...), ma ho fatto un paio di test usando le tue immagini, basandomi sulla griglia di Bootstrap 3.
Qui i risultati.
Problemi ce ne sono ancora, naturalmente, ma con la spaziatura ci si avvicina e scalando la risoluzione il comportamento è più "regolare" (anche se qui ci sarebbe da lavorare ancora... E una delle immagini quadrate che usi ha una risoluzione maggiore delle altre, cosa che nelle griglie responsive disturba, come vedrai scalando la risoluzione del display).

Not so easy...  ???
« Ultima modifica: 22 Feb 2018, 11:42:45 da Limma »

Offline Anthony Marra

  • Esploratore
  • **
  • Post: 113
  • Sesso: Maschio
    • Mostra profilo
Re:griglia immagini con colonna che comprende due righe
« Risposta #13 il: 22 Feb 2018, 11:58:31 »
Per la spaziatura potresti risolvere in due modi.
impostato il "width" di jazzl a "255px !importat"
oppure impostando a jazzr il "margin-right: a 90px"
però ovviamente poi dovresti anche lavorare sulle mediaquery per risolvere problemi di impaginazione per altre risoluzioni

Offline mariarosaria

  • Esploratore
  • **
  • Post: 135
  • Sesso: Femmina
  • Piano piano... ...imparo...
    • Mostra profilo
    • Fraternità Maria Immacolata
[RISOLTO] griglia immagini con colonna che comprende due righe
« Risposta #14 il: 23 Feb 2018, 15:17:06 »
Grazie Anthony, ma meglio non buttarsi in un'impresa simile... non ne sono capace. e comunque penso che sia una soluzione poco responsive.

Il risultato migliore mi sembra quello di limma fatto con i quadrati colorati!  ;) (e, appunto, mi sembra la migliore come adattabilità alle diverse misure). Anche perchè comunque avevo già l'idea di limitare questo modulo ai pc e ai tablet, utilizzandone uno completamente diverso per i cellulari, così mi evito un bel ò di problemi (e adatterò qualcosa di più "immediato" per uno schermo piccolo)
Un'ultima domanda mi sorge spontanea... Dove imposto fino a quale risoluzione voglio che le immagini rimangano incolonnate (e quindi si rimpiccioliscano) e da quando devono iniziare a "staccarsi" le colonne? C'è un modo?
Proverò a copiare/"rubare" il codice di limma  8)

Grazie a tutti  ;D
« Ultima modifica: 23 Feb 2018, 15:23:26 da mariarosaria »

 

Torna su