BBCode Youtube con Highslide en phpBB 3

ThE KuKa · #1

Hola,

RECOMENDABLE, si así empiezo el mensaje, así que seguir leyendo...

Se trata de BBCode para youtube usando Highslide.

Nombre del MOD: Highslide/youtube BBCode
Autor del MOD: BBCode creado por PeterS y script de http://vikjavev.no/highslide/
Demo: Mirar el resltado AQUÍ

Modificaciones para Prosilver:

Descarga el ZIP desde AQUÍ
Sube la carpeta highslide a la "raíz" de tu foro.

Abrir el archivo styles/prosilver/template/overall_header.html
Al final del todo, en una nueva linea añadir:

Código: Seleccionar todo

<script type="text/javascript" src="highslide/highslide-with-html.js"></script>

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;
    hs.preserveContent = false;
</script>

Abrir el archivo styles/prosilver/theme/colours.css
Al final del todo, en una nueva linea añadir:

Código: Seleccionar todo

.highslide-html {
    background-color: white;
}
.highslide-html-blur {
}
.highslide-html-content {
	position: absolute;
    display: none;
}
.highslide-loading {
    display: block;
	color: black;
	font-size: 8pt;
	font-family: sans-serif;
	font-weight: bold;
    text-decoration: none;
	padding: 2px;
	border: 1px solid black;
    background-color: white;
    
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}


/* Styles for the popup */
.highslide-wrapper {
	background-color: white;
}
.highslide-wrapper .highslide-html-content {
    width: 400px;
    padding: 5px;
}
.highslide-wrapper .highslide-header div {
}
.highslide-wrapper .highslide-header ul {
	margin: 0;
	padding: 0;
	text-align: right;
}
.highslide-wrapper .highslide-header ul li {
	display: inline;
	padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
	display: none;
}
.highslide-wrapper .highslide-header a {
	font-weight: bold;
	color: gray;
	text-transform: uppercase;
	text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
	color: black;
}
.highslide-wrapper .highslide-header .highslide-move a {
	cursor: move;
}
.highslide-wrapper .highslide-footer {
	height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
	float: right;
	height: 11px;
	width: 11px;
	background: url(highslide/graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
    cursor: move;
}
.highslide-resize {
    cursor: nw-resize;
}

/* These must be the last of the Highslide rules */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

Guardar, cerrar y subir los archivos. Limpiar cache y refrescar la plantilla y el estilo desde el ACP

Ir al ACP y el modulo de "post".
Por defecto el modulo de post abre la sección de "BBCODES". Tenemos que hacer clic en "Agregar nuevo bbcode"

Ahora encontramos varias opciones:

En uso del bbcode pondremos lo siguiente:

Código: Seleccionar todo

[youtube]{IDENTIFIER}[/youtube]

En Reemplazo HTML lo siguiente:

Código: Seleccionar todo

<body>
<div>

<a href="http://www.youtube.com/v/{IDENTIFIER}" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )" class="Highslide" ><img src="http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg"></a>
</div>
</body>

En la linea de ayuda de bbcode ponemos algo que ayude al usuario a entender el uso del bbcode, por ejemplo:

Código: Seleccionar todo

[youtube]{Código del vídeo, por ejemplo "HO-BcoXYGuA"}[/youtube]

Así aparecerá una miniatura del vídeo, en lugar de la típica ventana "grande" y al hacer clic en la miniatura, aparecerá el vídeo de un modo mas "bonito"

Fuente: phpBB Academy

phpBB España Oficial

BBCode Youtube con Highslide en phpBB 3 Tema Solucionado

BBCode Youtube con Highslide en phpBB 3 Tema Solucionado

BBCode Youtube con Highslide en phpBB 3Tema Solucionado

BBCode Youtube con Highslide en phpBB 3 Tema Solucionado

BBCode Youtube con Highslide en phpBB 3 Tema Solucionado