Image Zoom BBCode

Area dedicata a tutti i BBcode per phpBB 3
Rispondi
Avatar utente
Lucky
Trusted
Trusted
Connesso: No
Messaggi: 159
Iscritto il: 15/10/2012, 20:33
Versione phpBB3: 3.2.2
Stile utilizzato: Prosilver
Versione SEO: SI
Mod / Estensioni installate: Si
Link del Forum: http://www.portalxl.eu
Località: Bari
Contatta:

Image Zoom BBCode

Messaggio da Lucky » 30/10/2012, 19:53

Image Zoom BBCode
Licenza: Condividi allo stesso modo 3.0
Autore: Lucky - Dynamic Drive DHTML
Descrizione: Aggiunge immagini da fonti esterne con spettacolare effetto zoom, per ottenere il migliore effetto è indispensabile aggiungere immagini grandi e ad alta risoluzione.
Requisiti: esempio phpBB 3.0.x | PortalXl 5.0 Premod & Plain
Compatibile con i più comuni browser: Explorer, Firefox, Opera, Chrome


Installazione del BBCode in ACP/Contenuti/BBBcode/Aggiungi nuovo BBCode

Uso del BBCode

Codice: Seleziona tutto

[imzoom]{URL}[/imzoom]
Trasforma in HTML

Codice: Seleziona tutto

<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="src/featuredimagezoomer.js">

/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

	$('#image1').addimagezoom({
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: '{URL}' //<-- No comma after last option!
	})
	
	$('#image2').addimagezoom({
		zoomrange: [5, 5],
		magnifiersize: [400,400],
		magnifierpos: 'right',
		cursorshade: true,
		cursorshadecolor: 'pink',
		cursorshadeopacity: 0.3,
		cursorshadeborder: '1px solid red',
		largeimage: '{URL}' //<-- No comma after last option!
	})

	$('#image3').addimagezoom()

})

</script>
<p><img id="image1" border="0" src="{URL}" style="width:300px;height:225px" /><p>
Testo d'aiuto

Codice: Seleziona tutto

[imzoom]URL[/imzoom]
Spuntata la casella Mostra sulla pagina di scrittura si/no


Demo
Esempio:

Codice: Seleziona tutto

[imzoom]http://www.yamamay.com/public/collezioni/n2p2q8z305.04.12.jpg[/imzoom]
E' necessario inviare nel proprio percorso principale di phpBB la directory src con il file allegato.
src.rar
Per la premod occorre aggiungere la nuova icona imzoom.png nel percorso styles/prosilver/imageset/bbcode_box
Spuntata la casella Mostra sulla pagina di scrittura si/no impostato su Si
imzoom.png
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.

Rispondi