Efecto lightbox en tus imagenes de WordPress

Detalles: Escrito por: : La Redacción; Categoría: Aula; Publicado: 13 Abril 2013; Visitas: 1239

De las diferentes opciones que hay para mostrar imágenes en una página, siempre me he decantado por el “efecto lightbox“, que es ese que hace que se vea la imagen en su tamaño original, o al menos en un tamaño superior (dependiendo del tamaño de la pantalla), sin salir de la página que estás visitando y que oscurece el resto de la página para darle mayor importancia a la página. Esto que me ha costado tanto de explicar se resume en la siguiente imagen,

Fancybox

Como ya he comentado en algunos artículos anteriores referidos a WordPress, no quiero añadir mas complementos de los necesarios. Así que he añadido las herramientas necesarias para poder disfrutar de este efecto sin necesidad de instalar un nuevo plugin.

En este caso me he decantado por Fancybox, que es de las diferentes opciones que he estado probando la que mas me ha convencido. Se basa en el uso de css y jQuery, siendo relativamente sencillo de implantar en tu sitio con WordPress.

Instalación en WordPress

Para instalarlo en WordPress, tendremos que intervenir en varios puntos, siempre del tema hijo. Aunque ya he comentado en varias ocasiones sobre el tema hijo, no quiero dejar de insistir en este aspecto, pues actuar sobre el tema principal ocasiona que cualquier actualización de mantenimiento del mismo lleve al traste todos los cambios y modificaciones que hayamos realizado.

Javascript

El primer paso consiste en añadir los scripts necesarios a tu tema hijo. Para ello tienes que editar el archivo functions.php y añadir las siguientes líneas,

1
2
3
4
5
6
7
8

if (!function_exists('shell_child_js')) {
function shell_child_js() {
wp_enqueue_script('jFancyBox', get_stylesheet_directory_uri() . '/js/jquery.fancybox.pack.js', array('jquery'), '2.1.4', true);
wp_enqueue_script('jatareao', get_stylesheet_directory_uri() . '/js/jatareao.js', array('jquery','jFancyBox'), '0.0.1.0', true);
}
}
if (!is_admin())
add_action('wp_print_scripts', 'shell_child_js');

En la primera línea añadimos la biblioteca que nos permite realizar las operaciones, y en la segunda, de cosecha propia, contendrá lo siguiente

1
2
3

jQuery(document).ready(function() {
jQuery(".fancybox").fancybox();
});

“.fancybox” es la clase que aplicarás a todas tus imágenes. En mi caso, he tenido que cambiarla para no tener que modificar todos los artículos publicados hasta la fecha.

Hoja de estilos

El siguiente paso será modificar la hoja de estilo del tema hijo, añadiendo las siguientes líneas al mismo,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}

.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}

.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.fancybox-opened {
z-index: 8030;
}

.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
position: relative;
}

.fancybox-inner {
overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}

.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}

.fancybox-image {
max-width: 100%;
max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('./images/fancybox_sprite.png');
}

#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}

#fancybox-loading div {
width: 44px;
height: 44px;
background: url('./images/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}

.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('./images/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}

.fancybox-prev {
left: 0;
}

.fancybox-next {
right: 0;
}

.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}

.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}

.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}

.fancybox-nav:hover span {
visibility: visible;
}

.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
overflow: hidden;
}

.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('./images/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}

.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}

.fancybox-opened .fancybox-title {
visibility: visible;
}

.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}

.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}

.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}

.fancybox-title-inside-wrap {
padding-top: 10px;
}

.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}

Modo de empleo

Cada una de las imágenes que insertamos en el documento, tendrá un aspecto como el siguiente

1
2
3

De forma que la imagen hará referencia a la miniatura, mientras que el enlace apunta a la imagen con su tamaño original. De esta forma, la página tardará menos en cargarse dado que solo mostrará las miniaturas, y al hacer clic sobre cada una de las imágenes nos mostrará la imagen principal.

Conclusiones

Se trata de una solución muy sencilla y fácil de aplicar que aligerará considerablemente la carga de nuestra página. A pesar de todo, aun quiero simplificar mas la operación, dado que como has visto es algo relativamente sencillo, y se puede implementar perfectamente con cuatro líneas de jQuery para conseguir un efecto muy parecido, pero reduciendo considerablemente el código empleado y el uso de bibliotecas externas.

Fuente: atareao