Autore Topic: J3.xx - lightbox semplice su immagine - suggerimenti  (Letto 132 volte)

Offline Maria_Uni

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
ciao a tutti,


ho creato una pagina con pagebuilder all'interno vi sono 100 immagini quadrate formattate in maniera responsive così:

<div class="col-xs-12 col-md-3" style="padding: 12px;">
    <img src="images/collezioni/01.jpg">
<>
etc...


qual è il codice lightbox o qualcosa altro - che apri in popup- che cliccando su ogni singola immagine si apre l'immagine ingrandita e con una descrizione sotto, quindi un caption - ho cercato ma non ho trovato nulla di semplice e che dia la possibilità con una X di chiudere.


grazie

Offline giusebos

  • Fuori controllo
  • *
  • Post: 20398
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #1 il: 02 Set 2020, 19:56:16 »
forse hai cercato alla cieca.
Ti do una direzione:
usa l'edito JCE insieme al suo plug in MediaBox.

produci il codice che integrerai in quello proposto sopra.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Maria_Uni

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #2 il: 02 Set 2020, 20:03:56 »
molto interessante


grazie ti faccio sapere

Offline Maria_Uni

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #3 il: 02 Set 2020, 20:12:30 »
qualcuno che ha già installato JCE e il MEDIABOX che potrebbe incollare qui il codice che genera per il lightbox? perché mi trovo in una situazione che non posso fare aggiornamenti


grazie

Offline giusebos

  • Fuori controllo
  • *
  • Post: 20398
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #4 il: 02 Set 2020, 21:10:31 »
non è solo il codice che fa l'effetto, ma la serie di file js che interagiscono con esso: una specifica versione di jquery e la stringa che ne regola comportamento e aspetto...

se non puoi aggiornare prova qui
https://www.w3schools.com/howto/howto_js_lightbox.asp
o qui
https://ashleydw.github.io/lightbox/

trovate inserendo nella searchBox "how to create gallery lightbox"......

come vedi non è stato difficile, probabilmente inserendo specifiche parole affinerai la ricerca.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Maria_Uni

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #5 il: 02 Set 2020, 21:36:24 »
non è solo il codice che fa l'effetto, ma la serie di file js che interagiscono con esso: una specifica versione di jquery e la stringa che ne regola comportamento e aspetto...

se non puoi aggiornare prova qui
https://www.w3schools.com/howto/howto_js_lightbox.asp
o qui
https://ashleydw.github.io/lightbox/

trovate inserendo nella searchBox "how to create gallery lightbox"......

come vedi non è stato difficile, probabilmente inserendo specifiche parole affinerai la ricerca.


tutti e due già visti.. il primo non va bene ha troppo codice ed è un slideshow. ho bisogno di qualcosa davvero elementare - cliccando sull'immagine deve comparire l'immagine e la caption..


il secondo l'ho implementato e sembra funziona anche se la finstra lightbox finisce - quando si scrolla la pagina - sotto l'header del menu - sia in versione mobile che desktop...


del secondo devo richiamare questi files:
Codice: [Seleziona]


ekko-lightbox.css
Fix aspect ratio issues, add max-width/max-height options. (#274)
3 years ago


ekko-lightbox.js
Fix console log
2 years ago


ekko-lightbox.js.map
Fix console log
2 years ago


ekko-lightbox.min.js
Fix console log
2 years ago


ekko-lightbox.min.js.map
Fix console log
2 years ago

quale è il modo più corretto per inserirli dentro al Joomla?


grazie ancora


Offline Maria_Uni

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #6 il: 02 Set 2020, 22:03:56 »
questo è il tutorial che ho seguito ... sembra funzionare - unico neo che la popup finisce sotto l'header della barra del menu ..logo
https://www.jquery-az.com/boots/demo.php?ex=17.0_1
grazie

Offline Maria_Uni

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #7 il: 02 Set 2020, 23:04:34 »
il problema di sovrapposizione era dovuto al parametro


Codice: [Seleziona]
#sp-header.menu-fixed {
    position: fixed;
    z-index: 2; ho cambiato lo z-index da 99 a 2..
inoltre sconsiglio di utilizzare il bootstrap dell'esempio meglio quello dell'helis
}


grazie per tutto

Offline giusebos

  • Fuori controllo
  • *
  • Post: 20398
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #8 il: 02 Set 2020, 23:08:45 »
Citazione
il primo non va bene ha troppo codice ed è un slideshow. ho bisogno di qualcosa davvero elementare - cliccando sull'immagine deve comparire l'immagine e la caption..
Tu hai scritto che ti serve lightbox , quello è ciò che chiedi.

Comunque nella stessa pagina del primo link, nella colonna di sinistra ci sono altri esempi di altro genere....


su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline giusebos

  • Fuori controllo
  • *
  • Post: 20398
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:J3.xx - lightbox semplice su immagine - suggerimenti
« Risposta #9 il: 02 Set 2020, 23:12:23 »
Se hai risolto, per cortesia, inserisci [Risolto] tra parentesi quadre,  all'inizio del titolo del primo post editandolo.

Così facendo chi leggera il titolo nelle ricerche capirà che la discussione contiene una soluzione.
Questo è il metodo standard da usare in qualsiasi forum tecnico, è un obbligo morale e dovere di chi apre la discussione, la community ringrazierà.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

 

Host

Torna su