Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

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



Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7668
Località : Provincia di Varese


Vedere 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

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum