BBcode para imagenes y videos de youtube usando Highslide JS
Publicado: 15 Mar 2012, 04:34
URL: http://www.antrollio.com
Plantilla(s) usuada(s): abrasive
MODs instalados: varios (no relevantes a mi pregunta)
Versión de phpBB: 3.0.9
Servidor: de pago.
Si es una actualización desde otra versión: no aplicable
Si es una conversión desde otro tipo de Foro: no aplicable
Agregué el Highslide JS, o mas bien copie las carpetas que venian en el zip y las puse en el root, y al agregar bbcodes para las imagenes y los videos, agarré dos problemas:
1. Cuando clickeo en la imagen, no se expande pero se abre una pagina con la imagen sola.
2. Cuando clickeo en un video de youtube, tampoco se expande y también se abre el video en la misma página. Sin embargo, al volver atrás y hacerle un refresh a la página, AHÍ si funciona el efecto de expandir del highslide.
Les dejo los html de los bbcodes:
Para imagenes:
Para videos de youtube:
Plantilla(s) usuada(s): abrasive
MODs instalados: varios (no relevantes a mi pregunta)
Versión de phpBB: 3.0.9
Servidor: de pago.
Si es una actualización desde otra versión: no aplicable
Si es una conversión desde otro tipo de Foro: no aplicable
Agregué el Highslide JS, o mas bien copie las carpetas que venian en el zip y las puse en el root, y al agregar bbcodes para las imagenes y los videos, agarré dos problemas:
1. Cuando clickeo en la imagen, no se expande pero se abre una pagina con la imagen sola.
2. Cuando clickeo en un video de youtube, tampoco se expande y también se abre el video en la misma página. Sin embargo, al volver atrás y hacerle un refresh a la página, AHÍ si funciona el efecto de expandir del highslide.
Les dejo los html de los bbcodes:
Para imagenes:
<div class="highslide-gallery">
<a href="{URL}" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{URL}" alt="" title="Click to enlarge" style="max-width:200px; max-height:200px;" /></a><div class="highslide-heading"></div>
</div>
Para videos de youtube:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS</title>
<script type="text/javascript" src="../highslide/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<script type="text/javascript">
// Apply the Highslide settings
hs.graphicsDir = '../highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
</script>
</head>
<body>
<div>
<a href="http://www.youtube.com/embed/{IDENTIFIE ... ransparent"
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385,
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer',
preserveContent: false, objectLoadTime: 'after'})"
class="highslide">
<img src="http://img.youtube.com/vi/{IDENTIFIER}/1.jpg" title="Click" />
</a>
</div>
</body>
</html>
