Unofficial WebSite X5
Categoria generale => FAQ - HowTo - Tutorials => Topic aperto da: lemonsong - 23 Ottobre, 2015, 23:12:23
-
Se in un Oggetto Galleria (tipo "Miniature") vogliamo visualizzare la descrizione delle immagini (scheda "Elenco") sotto la relativa miniatura dobbiamo, prima di tutto, attivare l'opzione "Mostra ingrandimento su click tramite ShowBox".
Esempio: http://lemonsong.altervista.org/test_desc_thumbs/ (http://lemonsong.altervista.org/test_desc_thumbs/)
In Proprietà Pagina - Esperto - Prima della chiusura del tag HEAD inserire questo codice:
Only registered users can see contents. Please click here to Register or Login.
Per posizionare correttamente la descrizione, personalizzare i valori di top e font-size del CSS e regolare adeguatamente i margini esterni nella scheda "Miniature".
Si può ovviamente personalizzare il colore ed aggiungere altri stili.
Il codice agisce su tutti gli Oggetti Galleria presenti nella pagina; se si vuole che il codice agisca su una sola galleria, dobbiamo sostituire il codice jQuery con questo (il codice CSS resta invariato):
<script>
$(document).ready(function(){
$('#imObjectGallery_1 a').each(function(index){
var desc = showbox_1['media'][index]['description'];
$(this).append("<span class='desc-min'>"+desc+"</span>");
});
});
</script>
Il numero in rosso che identifica la galleria è da personalizzare e si può ricavare dal sorgente della pagina oppure usando strumenti tipo "Ispeziona codice" in "Anteprima".
Nota:
Gli script possono essere utilizzati solo con le tipologie "Miniature", "Miniature Orizzontale" e "Miniature Verticale".
-
Una variante dello script valido anche per la tipologia "Miniature su più schede":
Only registered users can see contents. Please click here to Register or Login.
Aggiungere questa media query al codice CSS (all'interno del tag <style>), eventualmente personalizzando il valore in rosso, che corrisponde all'ultimo breakpoint impostato:
@media screen and (max-width: 479px){
div[id^='imObjectGallery_'] a{
float: none !important;
}
}
-
Con la versione 13, lo script necessita di un'ulteriore modifica, poiché sono stati cambiati l'id della galleria e la variabile dello showbox ad esso collegata.
Questo è il codice aggiornato che agisce su tutti gli Oggetti Galleria presenti nella pagina:
Only registered users can see contents. Please click here to Register or Login.
Questo il codice aggiornato valido per una specifica galleria nella pagina:
<script>
$(document).ready(function(){
$('#imObjectGallery_01 a').each(function(index){
var desc = showbox_imObjectGallery_01['media'][index]['description'];
$(this).append("<span class='desc-min'>"+desc+"</span>");
});
});
</script>
Il numero in rosso che identifica la galleria è da personalizzare e si può ricavare dal sorgente della pagina oppure usando strumenti tipo "Ispeziona codice" in "Anteprima".
Questi due script possono essere utilizzati solo con le tipologie "Miniature", "Miniature Orizzontale" e "Miniature Verticale".
Infine il codice aggiornato per la tipologia "Miniature su più schede":
Only registered users can see contents. Please click here to Register or Login.
Tutte le altre indicazioni rimangono invariate.
Gli script sono stati testati con la versione 13.0.3.22