WebSite X5Help Center

 
Marzio D.
Marzio D.
User

App per gallery foto con testo  it

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
39 ANSWERS - 4 USEFUL - 1 CORRECT
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Marzio D.
Marzio D.
User
Author

E' un sito prova:
www.triplok.eu
Il nome delle immagini lo potrei cambiare con un clik utilizzando ACDSee Pro 

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
Author

Pagina Prodotti scegli un prodotto e vedi le immagini

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
Author

Meglio puoi vedere la linea Design

Read more
Posted on the from Marzio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Claudio D.
Claudio D.
Moderator
Best User of the month IT

@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

Read more
Posted on the from Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
 ‪ KolAsim ‪ ‪
... ... ...al di fuori di quelle che sono le opzioni già disponibili ... ... ... 

... come suggerito da Claudio...

 ‪ KolAsim ‪ ‪
 ... tornerò sul tardi oppure domani... ... ... 

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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Marzio D.
Marzio D.
User
Author
Claudio D.
@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

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

Read more
Posted on the from Marzio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

.... OK ...

Marzio D.
... ... ... devo per forza dare un nome ad ognuna delle foto..
 ‪ KolAsim ‪ ‪
... ... ...  (*) - se il nome file è già congruo, conciso e descrittivo è meglio. ... ... ... 
Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... non ti resta che provarlo, potrebbe interessarti...
...  attenzione! ...potrebbe stupirti...laughingwink

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

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Marzio D.
Marzio D.
User
Author

Grazie scusami il codice in oggetto dove lo inserisco nella pagina interessata dopo l apertura del body?

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
Author

Appena posso provo.

Molte grazie

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
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

Read more
Posted on the from Marzio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Read more
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Marzio D.
Marzio D.
User
Author

Fatto ma continua a non funzionare, non voglio tirarti matto se già troppo disponibile.

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
Author

Sempre stessa pagina marzio.html

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
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.

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
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

Read more
Posted on the from Marzio D.
Roberto M.
Roberto M.
User
Marzio D.
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.

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>

Read more
Posted on the from Roberto M.
Roberto M.
Roberto M.
User

L'esempio in concreto lo trovi QUI nel nostro ambiente controllato.

Read more
Posted on the from Roberto M.
Marzio D.
Marzio D.
User
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.

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
Author

Ovviamente rimane sempre l'inserimento manuale lato accessibilità ma questa è un'altra storia.

Read more
Posted on the from Marzio D.
Marzio D.
Marzio D.
User
Author
Roberto M.
L'esempio in concreto lo trovi QUI nel nostro ambiente controllato.

Visto "SB" non è rimuovibile!!! Lo devi accettare

Read more
Posted on the from Marzio D.
Roberto M.
Roberto M.
User

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.

Read more
Posted on the from Roberto M.
Roberto M.
Roberto M.
User

TI HO INSERITO LE PRIME TUE TRE FOTO. Tu vedi SB? se non le ridenomini a monte è ovvio che legge il file.

CONTROLLA

Read more
Posted on the from Roberto M.
Roberto M.
Roberto M.
User

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.

Read more
Posted on the from Roberto M.
Marzio D.
Marzio D.
User
Author
Roberto M.
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.

La prende dal suo sistema perchè quando la lancia su light Box la rinomina lui con finale SB!!!

Read more
Posted on the from Marzio D.
Roberto M.
Roberto M.
User

Ti sto trovando la soluzione......lo spero.....laughing

Read more
Posted on the from Roberto M.
Marzio D.
Marzio D.
User
Author

...questo si nota anche salvando un immagine direttamente da kight Box

Read more
Posted on the from Marzio D.
Roberto M.
Roberto M.
User

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! wink

Read more
Posted on the from Roberto M.
Roberto M.
Roberto M.
User

Ora cerchiamo di capire perchè sul salvataggio rimette _SB........

Read more
Posted on the from Roberto M.
Marzio D.
Marzio D.
User
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.

Read more
Posted on the from Marzio D.
Roberto M.
Roberto M.
User

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.

Read more
Posted on the from Roberto M.
Marzio D.
Marzio D.
User
Author
Roberto M.
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.

No tuttaltro mi sei stato molto di aiuto.
Grazie
Chiudo il post

Read more
Posted on the from Marzio D.
Roberto M.
Roberto M.
User

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.

Read more
Posted on the from Roberto M.