Pues bien, este tutorial es para los usuarios de Blogger en donde quieran usar el script de lightbox para darle un toque a sus imágenes.
Un demo antes de seguir leyendo en donde al hacer clic en la imagen veremos en acción el script de lightbox [contenido adulto]:
1.- Si te has animado pues lo primero es bajarse el script que deberas subir su contenido a un hosting o usarl el mio -leer paso siguiente-.
Entrar a tu cuenta de Blogger > Diseño > Edición HTML {Descargate la plantilla que tengas como respaldo sugeridamente}
2.- Añadir estas lineas a nuestra plantilla entre las etiquetas <head></head>
... como se aprecia los archivos del script estan alojados en el host keopsfs.site50.net el cual es un hosting de esos gratis que actualmente manejo, asi que si no desean subir sus archivos a un hosting propio o etc... pueden usar el mio.
2.1 Para los que usen hosting propio, hay que modificar 2 archivos:
lightbox.js - Que esta adentro del directorio js en las linea 49 y 50.. cambiar mihosting.ext por su dominio/hosting
lightbox.css - Que esta adentro del directorio css en las linea 16 y 17.. cambiar mihosting.ext por su dominio/hosting
3.- Añadir el parametro a nuestros links rel="lightbox" cuando se quiera usar....
3.1 Para abrir una imagen con un texto que diga... ver imagen:
3.2 Para abrir una imagen desde otra pequeña:
Y como NOTA importante para los que suban sus imagenes ahi mismo en Blogger:
Usando el punto 3.1 y si tenemos una imagen el cual la URL es asi:
Debemos de quitar el nombre de la imagen dejando la url asi:
s1600-h/imagen.jpg -----> s1600-h.jpg
Un demo antes de seguir leyendo en donde al hacer clic en la imagen veremos en acción el script de lightbox [contenido adulto]:
PHP:
http://descargapornos.blogspot.com/2009/10/assparade-80-lbs-of-ass-phoenix-marie_5960.html
PHP:
http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip
PHP:
<script src='http://keopsfs.site50.net/ds/lb/js/prototype.js' type='text/javascript'/>
<script src='http://keopsfs.site50.net/ds/lb/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://keopsfs.site50.net/ds/lb/js/lightbox.js' type='text/javascript'/>
<link href='http://keopsfs.site50.net/ds/lb/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>lightbox.js - Que esta adentro del directorio js en las linea 49 y 50.. cambiar mihosting.ext por su dominio/hosting
PHP:
fileLoadingImage: 'http://mihosting.ext/images/loading.gif',
fileBottomNavCloseImage: 'http://mihosting.ext/ds/lb/images/closelabel.gif',
PHP:
#prevLink:hover, #prevLink:visited:hover { background: url(http://mihosting.ext /images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://mihosting.ext/images/nextlabel.gif) right 15% no-repeat; }
PHP:
<a href="imagen.jpg" rel="lightbox" title="Titulo">
ver imagen
</a>
PHP:
<a href="imagen.jpg" rel="lightbox" title="Titulo">
<img border="0" src="http://hosting.com/imagen.jpg" />
</a>Y como NOTA importante para los que suban sus imagenes ahi mismo en Blogger:
Usando el punto 3.1 y si tenemos una imagen el cual la URL es asi:
PHP:
http://2.bp.blogspot.com/_9xxxx/s1600-h/imagen.jpgDebemos de quitar el nombre de la imagen dejando la url asi:
s1600-h/imagen.jpg -----> s1600-h.jpg
PHP:
<a href="http://2.bp.blogspot.com/_9xxxx/s1600-h.jpg" rel="lightbox" title="Titulo">
ver imagen
</a>Eso seria todo para implementar el script de LightBox en nuestros blogs de Blogger....
cualquier duda, comentario por aqui ando!!
:vientos::vientos::vientos::vientos:
cualquier duda, comentario por aqui ando!!
:vientos::vientos::vientos::vientos: