J3.xx - lightbox semplice su immagine - suggerimenti

[Maria_Uni]

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

[giusebos]

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.

[Maria_Uni]

molto interessante


grazie ti faccio sapere

[Maria_Uni]

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

[giusebos]

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.

[Maria_Uni]

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

[Maria_Uni]

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

[Maria_Uni]

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

[giusebos]

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....

[giusebos]

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à.