Mini immagine BBCode

[Galandas]

Mini immagine BBCode
Autore: Preso dal forum di Stoker

Mini immagine BBCode per phpBB3 è pensato solo per gli amministratori. lo uso per le recensioni di prodotti.
È necessario disporre di 2 immagini: un'immagine ordinaria e una miniatura.
Quando si fa clic sulla miniatura, l'immagine ordinaria si apre centrata.
Inoltre è disponibile una versione collegamento disponibile.

---

Come fare le modifiche:
1. Scarica tutti i file da qui, tranne il CSS:
2. Carica le thumbnailviewer.js e loading.gif nella cartella forum
3.Fai questi cambiamenti nella colours.css (prosilver) e stylesheet.css (subsilver2) - Basta aggiungere il codice riportato di seguito nella parte inferiore:

Codice: Seleziona tutto

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 7px;
padding-bottom: 0;
background: #151515; 
visibility: hidden;
z-index: 10;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #151515;
color: #FFFFFF;
text-align: left;
font-weight: bold;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}

4. Aggiungere queste righe nell'ultima riga in overall_header - uguale in entrambi gli stili subsilver2 Prosilver:

Codice: Seleziona tutto

<script src="thumbnailviewer.js" type="text/javascript">
/***********************************************
* Image Thumbnail Viewer Script- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

---

Come creare il BBCode per la versione facile
Creare questo BBCode in ACP:

BBCode:

Codice: Seleziona tutto

[thumb1={URL2}]{URL1}[/thumb1]

HTML:

Codice: Seleziona tutto

<a href="{URL2}" rel="thumbnail"><img src="{URL1}" alt="" /></a>

Aiuto in linea:

Codice: Seleziona tutto

[thumb1=url di anteprima]url di un'immagine completa[/thumb1]

Esempio:

Codice: Seleziona tutto

[thumb1=http://phpbb3world.com/images/strawberrybig.jpg]http://phpbb3world.com/images/strawberrylittle.jpg[/thumb1]

DEMO:clicca qui

---

Come creare il BBCode per la versione link
Creare questo BBCode in ACP:

BBCode:

Codice: Seleziona tutto

[thumb2={URL}]{TEXT}[/thumb2]

HTML:

Codice: Seleziona tutto

<a href="{URL}" rel="thumbnail">{TEXT}</a>

Aiuto in linea:

Codice: Seleziona tutto

[thumb2=url di un'immagine completa]link di testo[/thumb2]

Esempio:

Codice: Seleziona tutto

[thumb2=http://phpbb3world.com/images/orange.jpg]Link all'immagine[/thumb2]

DEMO:clicca qui