Immagine per descrizione e lightbox


Tutorial Immagine per descrizione e lightbox

Messaggio Da Niko il Dom 23 Feb 2014 - 20:29

Immagine per descrizione e lightbox


Ciao a tutti,

oggi grazie ad Hancki del forum di supporto portoghese, renderemo disponibile questo tutorial, come fusione di due differenti tutorial, precedentemente pubblicati :bene:

Nota bene: il seguente tutorial è valido solo per i forum che supportano i tutorial ovvero PhpBB2 e PunBB

Per fare funzionare il codice è necessario attivare il campo descrizione del pannello di amministrazione (PDA > Generale > Messaggi e Email > Configurazione > Pubblicare la descrizione dei soggetti : SI

Ecco un esempio di quanto andremo a creare oggi:



Modifica del template

Prima di tutto bisogna andare in PDA > Visualizzazione > templates > Generali > topics_list_box e sostituire questa stringa di codice:
Codice:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

con questa:
Codice:
<a rel="lightbox" href="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}" id="hanckidescpopup"><img class="hanckidesc" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/></a>

Aggiunta del codice CSS (stile)

andando in PDA > visualizzazione > Immagini e colori > Foglio di stile CSS aggiungete al vostro foglio css questa serie di codici:
Codice:
.pun tbody.statused td.tcl {
  padding-right: 10px !important;
}
img.hanckidesc {
  float: right !important;
}
img.hanckidesc {
  max-width: 150px !important;
  max-height: 50px !important;
  margin-top: -10px !important;
  padding: 1px !important;
  z-index: 10 !important;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); 
}
.lightboxOverlay {
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
  position:fixed;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  line-height: 0;
  font-weight: normal;
}
.lightbox img.lb-image {
  position:fixed;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

Aggiunta del codice Javascript

andando in PDA > Moduli > Gestione dei codici html & Javscript > Codice Javascript > crea nuovo :new: aggiungi questo contenuto in tutte le pagine
Codice:
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});

$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Purtroppo, sono utilizzabili solo queste estensioni: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

E incredibile :good:
se doveste inserire un file con un'estensione differente (come .pdf) per esempio, e quindi non un'immagine riceverete un messaggio popup di notifica  Razz 

Sempre disponibili per suggerimenti e supporto nella sezione di supporto :zen:


Tutorial creato da:
Copyrigth © FORUMATTIVO.COM


avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto


 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum