FancyBox ottima lightbox in Jquery

13 dicembre 2010

Oggi ti parlerò di come realizzare una fantastica lightbox in jquery attraverso FancyBox.

Fancybox è un ottimo plugin di jquery capace di creare sorprendenti effetti di lightbox con effetti di fade e tanto altro.

Lightbox effetto Semplice

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

Ovviamente qua trovate un esempio.

Tasto avanti e indietro tipo Gallery

Molte le implementazioni che possiamo aggiungere come i tasti avanti e indietro in caso di una fotogallery:

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

<html>
<head>
<title>FancyBox Lightbox</title>

<script src="jquery.min.js"></script>

<script src="fancybox/jquery.easing-1.3.pack.js"></script>
<script src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link type="text/css" href="fancybox/jquery.fancybox-1.3.1.css">

<script>
$(document).ready(function() {

$("a[rel=rocco]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
}
});

});
</script>

</head>
<body>

<a rel="rocco" href='ebug.jpg'>
<img src='ebug_mini.jpg'>
</a>

<a rel="rocco" href='sicilpiscine.jpg'>
<img src='sicilpiscine_mini.jpg'>
</a>

<a rel="rocco" href='calogeronapoli.jpg'>
<img src='calogeronapoli_mini.jpg'>
</a>

</body>
</html>

Qua trovate un’altro esempio già completo.

Uso di Iframe e finestre di youtube

In più con questo strepitoso plugin possiamo pure prelevare un sito attraverso iframe e richiamare video di youtube:

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

<html>
<head>
<title>FancyBox Lightbox</title>

<script src="jquery.min.js"></script>

<script src="fancybox/jquery.easing-1.3.pack.js"></script>
<script src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link type="text/css" href="fancybox/jquery.fancybox-1.3.1.css">

<script>
$(document).ready(function() {

$("#rocco_iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#youtube_ebug").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});

return false;
});

});
</script>

</head>
<body>

<a id="rocco_iframe" href='http://www.blusite.net'> www.blusite.net</a><br>

<a id="youtube_ebug" href='http://www.youtube.com/watch?v=88TWYxFcFGM'> Intervista alla W3b</a><br>

</body>
</html>

E infine qua trovate l’ultimo esempio e il file completo di esempi da scaricare .