Immagine per descrizione e lightbox

Da **Niko** 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: è necessario modificare i templates, solo il fondatore ne ha la possibilità

Definizione

Immagine per descrizione e lightbox GacEt1g

Attivare la descrizione nei topic

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