App per gallery foto con testo 
Author: Marzio D.
Visited 213,
Followers 0,
Shared 0
Buongiorno attualmete stò utilizzando per creare delle gallery foto la app Justified Gallery e devo dire che mi piace ma vi chiedo esiste un sistema per inserire il testo sia lato descrizione che accessibilità che non sia una ad una!!!!
Grazie
Posted on the
... magari senti prima gli esperti e/o lo STAFF, ... e poi se ti interessa, ...al di fuori di quelle che sono le opzioni già disponibili e al di fuori del SEO, per me c'è galleria e galleria...
... ci sono alcune mie vecchie invenzioni esclusive, di quando ancora non erano previsti ToolTip e descrizioni, che a seconda del tipo di galleria, normale, justified, masonry, ecc., che con un solo CLICK potevano aggiungere Tooltip e/o descrizione, alle immagini, e/o alle miniature, e/o allo Showbox, ...estrapolandoli dal none del file immagine(*), ...e penso siano ancora valide, da provare perchè gli oggetti attuali si sono evoluti...
... non è detto che sia, ma per poter io valutare come al mio solito mi occorrerebbe il LINK dell'esempio online funzionante...
.
(*) - se il nome file è già congruo, conciso e descrittivo è meglio.
.
ciao
.
Author
E' un sito prova:
www.triplok.eu
Il nome delle immagini lo potrei cambiare con un clik utilizzando ACDSee Pro
Author
Pagina Prodotti scegli un prodotto e vedi le immagini
Author
Meglio puoi vedere la linea Design
... tornerò sul tardi oppure domani...
... intanto ho visto un attimino prodotti-fioriere e design, e nello showbox vedo che c'è la descrizione...
... eventualmente dammi qualche indicazione e poi ti farò sapere quando tornerò...
.
@Marzio, se intendi che vuoi mettere la stessa descrizione (testo alternativo) e lo stesso titolo a tutte... puoi farlo da programma con tutte le gallery...
seleziona tutte le immagini aggiunte , poi vai a mettere i testi su di una e te li metterà su tutte le immagini
... come suggerito da Claudio...
... son tornato poco fa, ho intravisto che il mio codice si potrebbe adattare alle tue gallerie, ...ma verificherò con calma domani e ti farò sapere...
.
Author
Grazie Claudio, questo che mi consigli lo stò già facendo, pensavo più ad un oggetto anche a pagamento che mi aiutasse in questo, con la storia dell'accessibilità devo per forza dare un nome ad ognuna delle foto..
.... OK ...
... ho controllato un paio delle tue justified gallery ed ho notato che l'oggetto è rimasto a misura d'uomo per cui mi è bastato fare un copia/incolla della mia invenzione per verificare che il codice è ancora valido rispetto a qualche hanno fa quando lo avevo ideato...
... quindi puoi assegnare la descrizione vuota o senza testo per tutte le immagini, e con il mio codice la descrizione prenderà valore via codice dal nome dell'immagine (con o senza estensione del file), ed in più il mio codice aggiungerà alle miniature e nello showbox il ToolTip del browser...
... per esempio un nome a caso di file descrittivo potrebbe essere fatto in questo modo:
fioriera_tiziano_con_fascia_color_ rame.jpg
... questo modo di nominare le immagini le renderà immediatamente riconoscibili rispetto a nomi generici sequenziali...
... attualmente il mio codice sostituirà la descrizione attuale con quella del nome immagine...
.
... non ti resta che provarlo, potrebbe interessarti...

... attenzione! ...potrebbe stupirti...
<script>
$(document).ready(function () {//K>;
/** Tooltip + descrizione da nome file immagine per Justified Gallery (WSx5) by KolAsim **/
attemptsK = 0;
checkGalleryIntervalK = setInterval(function () {//K1>;
attemptsK++;
$galleryK = $(".justified-gallery");
if ($galleryK.height() >= 100 || attemptsK > 20) {//K2>;
initializeGalleryK();
//alert(attemptsK); // controllo caricamento K;
clearInterval(checkGalleryIntervalK);
};//K2<<;
}, 500);//K1<<;
});//K<<;
//---------fK-----------
function initializeGalleryK() {//initializeGalleryK()>;
$objektK = $(".grid-item");
$objektK.each(function () {//K1>;
$imgK = $(this).find("img");
src = $imgK.attr("src");
if (src) {//K2>;
fileNameK = src.split('/').pop();
$(this).find(".img-description").text(fileNameK);
};//K2<<;
});//K1<<;
$objektK.on("click", function () {//K3>;
setTimeout(() => {//K4>;
ShowboxK();
$("#imShowBoxNext, #imShowBoxPrev").on("click", function () {//K5>;
setTimeout(ShowboxK, 500);
});//K5<<;
}, 1000);//K4<<;
});//K3<<;
};//initializeGalleryK()<<;
//---------fK-----------
function ShowboxK() {//ShowboxK()>;
setTimeout(() => {//K1>;
$showBoxDivK = $("#imShowBox div");
$imgK = $showBoxDivK.find("img");
srcK = $imgK.attr("src");
if (srcK) {//K2>;
fileNameK = srcK.split('/').pop();
$showBoxDivK.attr("title", fileNameK);
$showBoxDivK.eq(1).text(fileNameK);
};//K2<<;
}, 1000);//K1<<;
};//ShowboxK()<<;
</script>
.
Author
Grazie scusami il codice in oggetto dove lo inserisco nella pagina interessata dopo l apertura del body?
... a regola andrebbe incollato al Passo_3 nelle Proprietà di ogni pagina con justified gallery, cioè qui:
>>Passo 3 - Mappa > Finestra 'Proprietà Pagina' > Le opzioni della Sezione Esperto >
▪Codice personalizzato: > Prima della chiusura del tag HEAD
.
... però non dovrebbe interferire con le pagina senza justified gallery, pertanto potresti provare usare il codice in un colpo solo istantaneo per tutte le pagine, incollandolo al Passo_1, qui:
>> Passo 1 - Impostazioni > Statistiche e Codice > I comandi della Sezione Codice >
▪Codice personalizzato: > Prima della chiusura del tag HEAD
.
ciao
.
Author
Appena posso provo.
Molte grazie
Author
Inserito il tuo codice in una pagina "marzio.html" che contiene l'oggetto Justified Gallery ma non vedo niente, ispezionando il codice risulta inserito, la pagina è al seguente link:
https://www.triplok.eu/marzio.html
Grazie
... ho notato che il tipo di effetti della galleria "marzio" sono diversi dalla corrispondente "fioriere-linea-giardino", ed anche dalle altre gallerie, ed in questa manca il campo descrizione nello showbox...
... se puoi per una conferma prova il codice originale nella galleria "fioriere-linea-giardino"...
... qui appresso invece ti ripropongo lo stesso intero codice con evidenziate in grassetto le due piccole correzioni apportate per questa galleria, che farà vedere il tooltip sulle miniature e nello showbox, oltre che la descrizione nello showbox:
... ops! ... ecco il codice detto poco fa:
<script>
$(document).ready(function () {//K>;
/** Tooltip + descrizione da nome file immagine per Justified Gallery (WSx5) by KolAsim **/
attemptsK = 0;
checkGalleryIntervalK = setInterval(function () {//K1>;
attemptsK++;
$galleryK = $(".justified-gallery");
if ($galleryK.height() >= 100 || attemptsK > 20) {//K2>;
initializeGalleryK();
//alert(attemptsK); // controllo caricamento K;
clearInterval(checkGalleryIntervalK);
};//K2<<;
}, 500);//K1<<;
});//K<<;
//---------fK-----------
function initializeGalleryK() {//initializeGalleryK()>;
$objektK = $(".grid-item");
$objektK.each(function () {//K1>;
$imgK = $(this).find("img");
src = $imgK.attr("src");
if (src) {//K2>;
fileNameK = src.split('/').pop();
$(this).find(".img-description").text(fileNameK);$(this).attr("title", fileNameK);
};//K2<<;
});//K1<<;
$objektK.on("click", function () {//K3>;
setTimeout(() => {//K4>;
ShowboxK();
$("#imShowBoxNext, #imShowBoxPrev").on("click", function () {//K5>;
setTimeout(ShowboxK, 500);
});//K5<<;
}, 1000);//K4<<;
});//K3<<;
};//initializeGalleryK()<<;
//---------fK-----------
function ShowboxK() {//ShowboxK()>;
setTimeout(() => {//K1>;
$showBoxDivK = $("#imShowBox div");
$imgK = $showBoxDivK.find("img");
srcK = $imgK.attr("src");
if (srcK) {//K2>;
fileNameK = srcK.split('/').pop();
$showBoxDivK.attr("title", fileNameK);
$showBoxDivK.eq(1).text(fileNameK).show();
};//K2<<;
}, 1000);//K1<<;
};//ShowboxK()<<;
</script>
Author
Fatto ma continua a non funzionare, non voglio tirarti matto se già troppo disponibile.
Author
Sempre stessa pagina marzio.html
Author
Trovato il perchè...
Per fare in modo che lo script funzioni deve avere attivo il campo descrizione e nel campo basta anche premere il comando "spazio" da tastiera, vedi in rete adesso, resta sempre il fatto che devo digitare sempre i campi dell'accessibilità.
Grazie lo script lo tengo.
Author
Altra cosa che ho notato quando lanci l'immagine nello showbox il sistema legge alla lettera il nome del file che è quello che ha dato l'oggetto Justified Gallery
A funzionare funziona ma devi fare questo “trucchetto dello spazio” a mano per ogni immagine.
Non deve funzionare così. Deve essere fatto tutto in automatico. Il presente listato che ti propongo presuppone solo una cosa: quando tu devi caricare le immagini devono essere tutte perfettamente ridenominate a monte e cioè prima di essere caricate nella galleria con nomi leggibili e non strani. Se ti va bene questo fa tutto in automatico.
No AI bla bla..... Copia e incolla questo codice nelle proprietà della pagina dove hai la galleria. Puoi anche metterlo in codice e statistiche e vale per tutte le gallerie del tipo di oggetto che stai utilizzando per questo post.
<!-- Codice modernizzato by la banda degli smanettoni 2025 -->
<style>
.img-description {
color: white;
font-size: 14px;
padding: 5px;
text-align: center;
background: rgba(0, 0, 0, 0.5); /* sfondo semi-trasparente */
position: absolute;
bottom: 0;
width: 100%;
}
.grid-item {
position: relative; /* necessario per il posizionamento assoluto del testo */
}
/* Colore testo bianco anche nel lightbox */
#imShowBox div {
color: white !important;
}
/* Eventuale miglioramento visibilità su sfondo scuro */
#imShowBox {
background-color: rgba(0, 0, 0, 0.9);
}
</style>
<!-- Script di controllo dinamico automatizzato by la banda degli smanettoni 2025 -->
<script>
$(document).ready(function () {
let tentativi = 0;
let controlloGalleria = setInterval(function () {
tentativi++;
let galleria = $(".justified-gallery");
if (galleria.height() >= 100 || tentativi > 20) {
inizializzaGalleria();
clearInterval(controlloGalleria);
}
}, 500);
});
function inizializzaGalleria() {
let elementi = $(".grid-item");
elementi.each(function () {
let img = $(this).find("img");
let src = img.attr("src");
if (src) {
let nomeFile = src.split('/').pop();
let descrizione = formattaNome(nomeFile);
// Verifica se esiste il div .img-description, altrimenti lo crea
if ($(this).find(".img-description").length === 0) {
$(this).append('<div class="img-description"></div>');
}
$(this).find(".img-description").text(descrizione);
$(this).attr("title", descrizione);
}
});
elementi.on("click", function () {
setTimeout(() => {
aggiornaShowBox();
$("#imShowBoxNext, #imShowBoxPrev").on("click", function () {
setTimeout(aggiornaShowBox, 500);
});
}, 1000);
});
}
function aggiornaShowBox() {
setTimeout(() => {
let contenitore = $("#imShowBox div");
let immagine = contenitore.find("img");
let src = immagine.attr("src");
if (src) {
let nomeFile = src.split('/').pop();
let descrizione = formattaNome(nomeFile);
contenitore.attr("title", descrizione);
contenitore.eq(1).text(descrizione).show();
}
}, 1000);
}
function formattaNome(nomeFile) {
return nomeFile
.replace(/\.[^/.]+$/, "") // rimuove estensione tipo .jpg
.replace(/[_\-]/g, " ") // sostituisce _ e - con spazio
.trim();
}
</script>
L'esempio in concreto lo trovi QUI nel nostro ambiente controllato.
Author
Grazie Roberto testato funziona anche se una volta lanciato lo showbox riporta il nome del file che riceve da justified-gallery,adesso mi studio se posso rimuoverlo.
Author
Ovviamente rimane sempre l'inserimento manuale lato accessibilità ma questa è un'altra storia.
Author
Visto "SB" non è rimuovibile!!! Lo devi accettare
Ma quella è il nome dell'imagine.Se io la chiamo Pippo prima di metterla in galleria io vedrò pippo. Non capisco il problema o non ci arrivo.
TI HO INSERITO LE PRIME TUE TRE FOTO. Tu vedi SB? se non le ridenomini a monte è ovvio che legge il file.
CONTROLLA
AH ORA HO CAPITO DOVE STA IL PROBLEMA è su light Box che me lo fa vedere. Anche se io le ridenomino lui mi prende sto SB da dove non lo so.
Author
La prende dal suo sistema perchè quando la lancia su light Box la rinomina lui con finale SB!!!
Ti sto trovando la soluzione......lo spero.....
Author
...questo si nota anche salvando un immagine direttamente da kight Box
RISOLTO
Quando sei sulla pagina CTRL-R e CTRL-F5 per scaricare la cache.Vedrai tre foto,b1-b2-b3. Prova a lanciare l'animazione. A me SB non compare più.
ho rivisto la funzione formattaNome() in modo che rimuova il suffisso _sb o qualsiasi altro pattern finale indesiderato.
Ti basta copiare e re-incollare il codice che trovi sulla pagina di aterraggio. Visto che tu hai foto chiare vai sul CSS e cambia da WHITE in BLACK
Complimenti per i sito. Mi piace!
Ora cerchiamo di capire perchè sul salvataggio rimette _SB........
Author
Visto, ottimo, avevo gia fatto la modifica del colore del testo, inserirò anche una stringa per il carattere in grassetto se voluto, ho visto il tuo sito contiene ottimi spunti.
Grazie per il tuo tempo.
Il plugin Justified Gallery di Incomedia da quello che ho capito dall'analisi dei file lavora in tandem con un sistema lightbox che, dietro le quinte, seleziona immagini ottimizzate per l’ingrandimento, spesso generandole con suffissi come _sb, _bw, _thumb, ecc. Il suffisso _sb significa quasi certamente "SuperBig", cioè una versione ad alta risoluzione che viene creata automaticamente da WebSite X5 al momento dell’esportazione o dell'anteprima.
Cosa succede esattamente
Tu carichi ad esempio una foto B1.jpg nel progetto ,WebSite X5 crea una copia B1_sb.jpg per il lightbox.
Nella galleria, la thumb è B1.jpg, il lightbox visualizza B1_sb.jpg.
La funzione formattaNome() mostra “B1” come didascalia o titolo.
Ma quando andiamo a salvare l’immagine dal lightbox, il browser scarica proprio B1_sb.jpg, perché è quella che effettivamente viene mostrata.
Questo è comportamento predefinito di WebSite X5 e non lo posso controllare lato JavaScript a meno che non si sostituisca con codice l'effetto nativo del light-box ma è un discorso laborioso e impegnativo. Dura da digerire ma via Ftp dovresti rinominare tutti gli sb della cartella della tua galleria allora ti salverebbe con il nome file senza suffisso SB ma è una ammazzata. Faccio prima a ricrearmi la galleria da solo come dico io. Poi, come si dice, le vie del signore sono infinite e magari altri avranno trovato la soluzione. Mi spiace solo di non esserti stato d'aiuto.
Author
No tuttaltro mi sei stato molto di aiuto.
Grazie
Chiudo il post
AGGIORNAMENTI
Ho creato una funzione per inserire un download forzato dell'immagine con il blocco del tasto destro in maniera da scaricare l'immagine senza suffisso_SB.
Marzio ti basterà ricopiare il nuovo listato presente sulla pagina di atterraggio. Controlla bene che faccia il refresh la pagina altrimenti vedi il vecchio. Di più posso solo crearla ex novo come dico io ma mi ci vorrebbe tempo. Ricordati del CSS per la formattazione colore e grandezza dei testi che a te servono.