[BBcode] Miniatura V3Tema Solucionado

[DaVidU]

Nombre: BBcode Miniatura con highslide + Botón + css
Autor: DaVidU
Descripción: BBcode miniatura de imágenes compatible con el Highslide + botón thumbnail para abrir en nueva ventana/pestaña del navegador + css.
Fuente: http://www.coloreatuforo.com

Este BBcode tiene 2 opciones para ver las imágenes, una de ellas es la compatible con highslide haciendo click en la imágen y la otra es el thumbnail desde el botón para ver en otra ventana/pestaña del navegador.

Primero de todo tenemos que agregar el css en la plantilla que usamos, en estilos basados en prosilver abrir el archivo colours.css de la carpeta theme y en estilos basados en subsilver2 abrir el archivo stylesheet.css de la carpeta theme

una vez abierto al archivo dependiendo de tu plantilla agregar esto al final del archivo:

Código: Seleccionar todo

.miniatura {
    font-size: 10px;
    font-weight: bold;
    color: #000;
    background-color: #FFF;
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    min-height:50px;
    width:300px;
    border: 2px solid #000;
}

---

Ahora vamos a crear el BBcode

Uso de BBcode:

Código: Seleccionar todo

[miniatura3]{URL}[/miniatura3]

Reemplazo HTML:

Código: Seleccionar todo

<div class="miniatura">
<a href="{URL}" class="highslide" onclick="return hs.expand(this)"><img src="{URL}" alt="" title="Click para agrandar" style="max-width:300px; max-height:300;" /></a><br>
<input class="button2 btnlite" type="button" value="Click aquí o en la imágen para ver a tamaño real" onclick="window.open('{URL}', '_blank')" title="Miniatura" />
</div>

Línea de ayuda:

Código: Seleccionar todo

Miniatura3: [miniatura3]URL DE LA IMÁGEN[/miniatura3]

---

Ejemplo:

Código: Seleccionar todo

[miniatura3]http://img4.imageshack.us/img4/1784/28872586.png[/miniatura3]
 
[miniatura3]http://img291.imageshack.us/img291/1306/captura02140310.jpg[/miniatura3]
 
[miniatura3]http://www.coloreatuforo.com/styles/prosilver/imageset/site_logo.png[/miniatura3]

Demo:
Click aquí para ver la demo

En caso de no usar el highslide se puede dejar el click de la imágen de la misma manera que en el botón, tan solo se ha de hacer este cambio:

Buscar esto:

Código: Seleccionar todo

class="highslide" onclick="return hs.expand(this)"

y reemplazar por esto otro:

Código: Seleccionar todo

class="litebox" target="_blank"

Guardar archivos, actualizar el tema en prosilver y plantillas en subsilver2, limpiar el cache del foro y refrescar el navegador para ver los cambios, ya podéis hacer la prueba del BBcode, Espero que os guste

[killonendb]

no me sale el light slide... le meti el estilo entero bien copiado en el css de mi tema. Mi tema es el AcidTech Tiger (Tiger es el color) y bueno lo meti en la css de los estilos claro... pero no me sale, al clickar a la imagen me lleva como el otro, a la imagen real, pero onself, además, el boton de debajo de la imagen no sale igual... no me gusta mucho.. pero bueno para el ke le salga como en el ejemplo tuyo... triumfará pk este bbcode es la ostia xd