1
00:00:00,480 --> 00:00:07,730
En este video vamos a ver Kólob box como integrarlo a nuestro proyecto color boxeo muy parecido a ver

2
00:00:07,730 --> 00:00:13,860
que aquí incluso dice Lightbox plugin es muy parecido al box para galerías puras me gusta más la ebook

3
00:00:13,900 --> 00:00:19,730
sin embargo la ventaja de color Books a diferencia de la iBooks es de que este sí permite agregar HTML

4
00:00:19,820 --> 00:00:21,850
y mostrarlo en una ventana modal.

5
00:00:21,870 --> 00:00:29,040
El HTML a diferencia del iBooks que nada más acepta videos puedes descargarlo aquí ya lo he descargado

6
00:00:30,590 --> 00:00:35,190
hay varios ejemplos aquí si le das click puedes ver algunos de ellos por ejemplo aquí en la parte inferior

7
00:00:35,190 --> 00:00:38,200
Vinila en HTML y este es el que agregaría.

8
00:00:38,600 --> 00:00:40,500
A mí me gustó mucho este 3.

9
00:00:40,910 --> 00:00:46,520
Sin embargo me vienen 6 ejemplos con y código fuente para darle botón derecho aquí lo voy a dar soy

10
00:00:46,520 --> 00:00:52,990
infante para que me abra esta carpeta en el Finder y voy a mover algunos archivos.

11
00:00:53,070 --> 00:01:00,740
Primero voy a mover el color Boks puntos y lo voy a pegar aquí hoy siguiente voy a mover este Image

12
00:01:00,790 --> 00:01:01,580
Images.

13
00:01:03,190 --> 00:01:10,780
También puedo seleccionar y pegar aquí puedes ver que aquí hay un conflicto porque el archivo se llama

14
00:01:10,780 --> 00:01:18,120
igual guardar detener y además voy a dejar este control punto PNG.

15
00:01:18,280 --> 00:01:24,160
Por último tenemos que copiar algún cuadro color Box cualquiera de las dos está bien o una versión modificada

16
00:01:24,160 --> 00:01:36,950
y la otra no. Vamos a abrir J.V y pegar esta librería vamos a abrir el Gebser y darnos cuenta que tenemos

17
00:01:41,390 --> 00:01:43,080
en algún lado debe estar Linux

18
00:02:01,160 --> 00:02:04,430
y vamos a agregar lo que viene siendo color Box aquí

19
00:02:07,060 --> 00:02:17,120
stayed Raif CSS y el CSS se llama color Box puntu CSS

20
00:02:21,480 --> 00:02:22,540
y vamos a ir al Führer.

21
00:02:22,550 --> 00:02:22,930
También

22
00:02:25,520 --> 00:02:28,760
abrimos nuestro Fuhrer scroll hacia abajo

23
00:02:31,460 --> 00:02:34,520
y aquí puedo copiar algunos de estos copiar este por ejemplo y pegarlo

24
00:02:37,370 --> 00:02:48,170
y agregar el enlace a color Boggs hacer más grande esto se llama México-EU color Box punto es Jammin

25
00:02:49,910 --> 00:02:50,860
y recargo

26
00:02:54,170 --> 00:02:58,660
inspeccionar nuevas para ver que en la consola no haya errores aquí hay un error pero no es de esto

27
00:02:59,700 --> 00:03:02,730
y podemos ver que se agregaron correctamente los dos.

28
00:03:03,380 --> 00:03:12,050
Las dos librerías a abrir de invitados y aquí después del L'Illa voy a crear un Dib y lo voy a poner

29
00:03:12,050 --> 00:03:12,760
aquí.

30
00:03:13,870 --> 00:03:18,280
Y quién lo va a poner clause poner un estáel.

31
00:03:18,440 --> 00:03:22,320
Hemos dicho que los estilos lineales no eran muy bien vistos.

32
00:03:22,340 --> 00:03:27,360
Sin embargo es algo sencillo poner aquí nada más display para que este día esté oculto.

33
00:03:28,310 --> 00:03:38,050
Siguiente voy a poner a este otro Dieppa y este va a tener un Heydi de invitado y vas a poner PHP como

34
00:03:39,010 --> 00:03:41,520
invitados invitado.

35
00:03:41,530 --> 00:03:50,510
Y aquí vamos a ver que es el invitado ahí sí que quiero imprimir nada más el número lo vamos a dar una

36
00:03:50,540 --> 00:03:51,070
clase.

37
00:03:51,080 --> 00:04:00,170
También me va a poner la clase aquí para que sea mejor de invitado info y dentro voy a poner la información

38
00:04:00,170 --> 00:04:11,270
de este invitado que sería hehco invitados y su información viene como descripciãn así que lo pongo

39
00:04:11,270 --> 00:04:20,400
aquí descripción y este va a ser un párrafo poner el equipe y lo cerramos acá.

40
00:04:22,070 --> 00:04:31,790
Después voy a poner un H2 y va a decir PHP hehco invitados nombre y aquí vemos que la tabla se llama

41
00:04:31,790 --> 00:04:32,630
nombre invitado

42
00:04:35,870 --> 00:04:43,780
punto comillas punto invitados y aquí va a ser apellide invitaba

43
00:04:51,860 --> 00:04:57,470
más o menos se va mejorando esto vamos a también imprimir lo que viene siendo su imagen y la imagen

44
00:04:57,470 --> 00:05:03,430
nada más puedo copiar esta parte de aquí y pegarla aún no tengo nada.

45
00:05:03,440 --> 00:05:11,730
Puedes ver que no he agregado el link cuando le dé clica la imagen a esa parte Arquivo agregaron a y

46
00:05:11,910 --> 00:05:18,510
voy a cortar el cierre del enlace aquí abajo y vamos a intentar un poco este código.

47
00:05:19,990 --> 00:05:22,110
Esta parte va a ir enlazada

48
00:05:32,720 --> 00:05:43,010
y HR-V invitado a PHP como invitado invitado.

49
00:05:43,400 --> 00:05:47,900
Con esto va a ser un poco más la funcionalidad sin embargo no se va a ver bien.

50
00:05:49,160 --> 00:05:55,740
Y vamos a ver por qué si no que inspeccionar no le doy click

51
00:06:00,660 --> 00:06:01,970
los invitados

52
00:06:04,410 --> 00:06:10,420
se inspeccion aquí el código puedes ver que este te da un Hrólfr invitado 3 se expande aquí puedes ver

53
00:06:10,420 --> 00:06:16,790
que este se llama invitado 3 como Heydi así que de esta forma estamos enlazando como que la imagen de

54
00:06:16,790 --> 00:06:19,020
la persona con su biografía.

55
00:06:19,080 --> 00:06:27,110
Pero hace falta agregar algo más al plugin de color Box que mandar llamar el plugin que quiere ponemos

56
00:06:28,370 --> 00:06:33,240
color Box y va a ser muy sencillo nada más ponerle

57
00:06:39,660 --> 00:06:50,080
selector punto de invitado info y invitado info vendría siendo esta clase para que aplique a todos lo

58
00:06:50,080 --> 00:07:03,510
que le ponemos color Vox en linea Tru y luego una coma y le ponemos un widget del 50 por ciento y ahora

59
00:07:03,510 --> 00:07:08,660
si guardo el cambio si recargo y doy click aquí y vemos que no funciona.

60
00:07:08,670 --> 00:07:18,300
Aquí me hizo falta ponerle en este HR-V Clas la misma clase de invitado info que está aquí para que

61
00:07:18,300 --> 00:07:26,640
cree como esa conexión aparte de hacerla por el HR-V así recargo click y vemos que nos abre la información

62
00:07:26,640 --> 00:07:28,410
de cada uno de nuestros invitados.

63
00:07:29,610 --> 00:07:36,930
Un poco más grande igual este se podría mejorar un poco con estilos aunque debo decir que los estilos

64
00:07:36,930 --> 00:07:40,230
de color block son muy fijos.

65
00:07:40,440 --> 00:07:46,410
El problema es que ellos hacen muchos cálculos basados en el JavaScript y lo hacen un poco más complicado

66
00:07:46,980 --> 00:07:52,920
igual modificando el objeto de JavaScript se podría hacer algo porque aquí abajo puedes ver que tienes

67
00:07:52,920 --> 00:07:58,390
muchas opciones sin embargo no tiene así como de margen mi padrino.

68
00:08:01,220 --> 00:08:02,710
No tiene nada para CSS

69
00:08:05,170 --> 00:08:12,570
entonces vamos a ver cómo hacerle algunos pequeños ajustes pequeños lo que nos permita.

70
00:08:12,570 --> 00:08:23,270
Pero pudiste ver cómo agregar algo como color Box dentro de tus diseños que viene dos veces el invitados.

71
00:08:23,500 --> 00:08:33,740
También podríamos eliminar nada más necesitamos un sections recargo a nuestros invitados y bueno en

72
00:08:33,740 --> 00:08:39,670
el siguiente vídeo le daremos un poco de estilos a esta parte para hacerlo un poco mejor.