Autor Tema: [TUTORIAL] Instalar LightBox en tu Cutenews  (Leído 3837 veces)

Desconectado ktoz

  • PHPer@ Fijo
  • ***
  • Mensajes: 110
  • Karma: 6
  • Aprendiendo PHP... :D
    • Ver Perfil
    • HabboLand
[TUTORIAL] Instalar LightBox en tu Cutenews
« en: 16 de Enero de 2010, 20:13:10 pm »
Muy bien, este tutorial va dedicado a todos aquellos que siempre andan buscando como poner el LightBox a su Cutenews, muy bien comenzamos:

Entra a http://www.huddletogether.com/projects/lightbox2/
y hasta abajo de la pagina descarga el LigthBox, sube las carpetas JS, CSS y la de Images y sigue estos pasos

Haz una nueva pagina donde pondras el include en el BODY el codigo es el siguiente:
Citar
<?
include("cutenews/show_news.php");
?>


Copia estos codigos JS en el HEAD donde esta el include:
Citar
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Al igual que este CSS:
Citar
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

El documento quedaria de la siguiente manera:

Citar
<HTML>
<HEAD>
<title>Aqui el Titulo de tu pagina</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</HEAD>

<BODY>
<?
include("cutenews/show_news.php");
?>
</BODY>

</HTML>

Subes este docuemento a tu web y Listo tu LightBox a quedado instalado, pero recuerda subir las carpetas que vienen en el ZIP a tu Pagina (JS, CSS e images)

En tu cutenews introduce el siguiente codigo para mostrar las imagenes:
Citar
<a href="Link de la imagen que abrira" rel="lightbox" title="Titulo de la imagen"><img src="Link de la imagen pequeña"/></a>

y Para varias imagenes:

Citar
<a href="Link de la Imagen Q abrira" rel="lightbox[roadtrip]" title="Titulo de la imagen"><img src="Link de Imagen Chica"/></a>

<a href="Link de la Imagen Q abrira" rel="lightbox[roadtrip]" title="Titulo de la Imagen"><img src="Link de Imagen Chica"/></a>

<a href="Link de la Imagen Q abrira" rel="lightbox[roadtrip]" title="Titulo de la Imagen"><img src="Link de Imagen Chica"/></a>


Aqui les dejo vista previa como me quedo ami =D
http://maxihabbo.es/cute.php

:P Espero que les haya servido, y si no me explique bien diganmelo :P

« Última modificación: 16 de Enero de 2010, 20:36:29 pm por ktoz »

Comunidad PHPeros

[TUTORIAL] Instalar LightBox en tu Cutenews
« en: 16 de Enero de 2010, 20:13:10 pm »

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #1 en: 17 de Enero de 2010, 11:41:59 am »
Bueno, en la página donde dices como te quedó, parece ser que tiene un fallo.
La imagen que sale en lightbox no es la misma que ves cuando pulsas para que se abra.
A mí me sale una imagen de "Entra al foro" y cuando pulso se abre LightBox con otra imagen muy distinta.

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado chihue

  • PHPero Master
  • ******
  • Mensajes: 1.118
  • Karma: 43
  • Sexo: Masculino
  • 8 dias
    • Ver Perfil
    • Minichat con todo incluido
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #2 en: 17 de Enero de 2010, 11:53:13 am »
a el le pasa igual

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #3 en: 17 de Enero de 2010, 12:32:36 pm »
A mi me pasa lo mismo :/ y si tienes que meter el HTML para poner el lightbox, quiere decir que tienes un gran fallo de seguridad...

Desconectado ktoz

  • PHPer@ Fijo
  • ***
  • Mensajes: 110
  • Karma: 6
  • Aprendiendo PHP... :D
    • Ver Perfil
    • HabboLand
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #4 en: 17 de Enero de 2010, 22:01:46 pm »
Bueno, en la página donde dices como te quedó, parece ser que tiene un fallo.
La imagen que sale en lightbox no es la misma que ves cuando pulsas para que se abra.
A mí me sale una imagen de "Entra al foro" y cuando pulso se abre LightBox con otra imagen muy distinta.

Saludos


xD!!

Pues la imagen que dice Entra al Foro, digamos que es un boton de ampliación pero si quieres que sea la misma imagen ala que abres ponle las medidas para que la imagen salga chica ;), pero no es un fallo

Desconectado chihue

  • PHPero Master
  • ******
  • Mensajes: 1.118
  • Karma: 43
  • Sexo: Masculino
  • 8 dias
    • Ver Perfil
    • Minichat con todo incluido
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #5 en: 18 de Enero de 2010, 21:28:18 pm »

xD!!

Pues la imagen que dice Entra al Foro, digamos que es un boton de ampliación pero si quieres que sea la misma imagen ala que abres ponle las medidas para que la imagen salga chica ;), pero no es un fallo

I como se hace

Desconectado ktoz

  • PHPer@ Fijo
  • ***
  • Mensajes: 110
  • Karma: 6
  • Aprendiendo PHP... :D
    • Ver Perfil
    • HabboLand
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #6 en: 19 de Enero de 2010, 04:49:56 am »
pues es Q no m acuerdo como se ponen las medidas =S


<a href="Link de la imagen que abrira" rel="lightbox" title="Titulo de la imagen"><img src="Link de la imagen pequeña dimensionada =D"/></a>

pero tienes q configurar la parte <img src="Link de la imagen pequeña dimensionada =D"/>

con las medidas q kieres que creo q es width="" y heigth="" creo xD!!

y kedaria azi

<img  width="" heigth="" src="Link de la imagen pequeña dimensionada =D"/>

en width="" y heigth=""  pones tus medidas =D



Desconectado chihue

  • PHPero Master
  • ******
  • Mensajes: 1.118
  • Karma: 43
  • Sexo: Masculino
  • 8 dias
    • Ver Perfil
    • Minichat con todo incluido
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #7 en: 19 de Enero de 2010, 07:44:09 am »
Esta tarde lo prueebo =)

Desconectado MaNuX

  • PHPero Avanzado
  • ****
  • Mensajes: 385
  • Karma: 4
  • Sexo: Masculino
  • PHP & MySQL
    • Ver Perfil
    • CliKys
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #8 en: 19 de Enero de 2010, 09:12:12 am »
Esta muy bien, y podrias hacer tambien para que solo aparezca la imagenes con los titulos de dos en dos.

Saludos.


Desconectado ktoz

  • PHPer@ Fijo
  • ***
  • Mensajes: 110
  • Karma: 6
  • Aprendiendo PHP... :D
    • Ver Perfil
    • HabboLand
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #9 en: 20 de Enero de 2010, 03:13:48 am »
Esta muy bien, y podrias hacer tambien para que solo aparezca la imagenes con los titulos de dos en dos.

Saludos.

Mmm explicte un poco maz porfavor  ;)

Saludoz  8)

Desconectado MaNuX

  • PHPero Avanzado
  • ****
  • Mensajes: 385
  • Karma: 4
  • Sexo: Masculino
  • PHP & MySQL
    • Ver Perfil
    • CliKys
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #10 en: 20 de Enero de 2010, 10:22:10 am »
Mmm explicte un poco maz porfavor  ;)

Saludoz  8)

Para que solo aparezcan la imagen de la categoria el titulo, la noticia bere del articulo y los comentarios.

Aqui una imgen:



Asi lo tengo yo pero como ves se me repiten y quiero que salgan asi en columnas de dos pero que no se repita que la nueva aparezca una a la derecha. Y al darle clic que valla a su noticia completa.


Aver si ahora mentendiste xD.

Saludos.


Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #11 en: 20 de Enero de 2010, 15:11:26 pm »
Para que solo aparezcan la imagen de la categoria el titulo, la noticia bere del articulo y los comentarios.

Aqui una imgen:



Asi lo tengo yo pero como ves se me repiten y quiero que salgan asi en columnas de dos pero que no se repita que la nueva aparezca una a la derecha. Y al darle clic que valla a su noticia completa.


Aver si ahora mentendiste xD.

Saludos.
1º Este tema no es de dudas
2º No tiene k ver ni con javascript ni con lightbox

Desconectado ktoz

  • PHPer@ Fijo
  • ***
  • Mensajes: 110
  • Karma: 6
  • Aprendiendo PHP... :D
    • Ver Perfil
    • HabboLand
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #12 en: 20 de Enero de 2010, 23:57:50 pm »
Eso iva a decir jejeje ...

No tiene nada que ver con el ligthox :l

Desconectado MaNuX

  • PHPero Avanzado
  • ****
  • Mensajes: 385
  • Karma: 4
  • Sexo: Masculino
  • PHP & MySQL
    • Ver Perfil
    • CliKys
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #13 en: 22 de Enero de 2010, 09:52:48 am »
A pues entonces perdonad xD

Pero podrias hacer algun tutorial de como poder acer eso ya que me hace falta.

Saludos.


Desconectado ferri

  • PHPero Experto
  • *****
  • Mensajes: 642
  • Karma: 40
  • Sexo: Masculino
    • Ver Perfil
Re:[TUTORIAL] Instalar LightBox en tu Cutenews
« Respuesta #14 en: 22 de Enero de 2010, 15:32:14 pm »
Qué bueno!! ;) Chihue pon esto en la lista de tutoriales aunque no sea MC.
Muy buen aporte ktoz!! :D