Demo effect(image gallery):
Sample code:
<linkhref="~/Content/jquery.fancybox.CSS"rel="stylesheet"/><p><h2>First test(Image gallery)</h2><aclass="fancybox1"rel="group"href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg"><imgsrc="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg"alt=""/></a><aclass="fancybox1"rel="group"href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"><imgsrc="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg"alt=""/></a></p>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">$(document).ready(function() {
$(".fancybox1").fancybox();
});</script>
Demo effect(single images):
Sample code:
<linkhref="~/Content/jquery.fancybox.css"rel="stylesheet"/><p><h2>Single images</h2><aid="single_1"href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"title="Lupines (Kiddi Einars)"><imgsrc="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg"alt=""/></a><aid="single_2"href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg"title="Colorful Feldberg II (STEFFEN EGLY)"><imgsrc="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg"alt=""/></a><aid="single_3"href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg"title="Cannon Needles (JustinPoe)"><imgsrc="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg"alt=""/></a><aid="single_4"href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg"title="Making a summer # 3 :) ((Nikon woman))"><imgsrc="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg"alt=""/></a></p>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script type="text/Javascript">$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title: {
type:'float'}
}
});
$("#single_2").fancybox({
openEffect:'elastic',
closeEffect:'elastic',
helpers: {
title: {
type:'inside'}
}
});
$("#single_3").fancybox({
openEffect:'none',
closeEffect:'none',
helpers: {
title: {
type:'outside'}
}
});
$("#single_4").fancybox({
helpers: {
title: {
type:'over'}
}
});
});</script>
Demo effect(thumbnail):
Sample code:
<linkhref="~/Content/jquery.fancybox.css"rel="stylesheet"/><linkhref="~/Content/jquery.fancybox-thumbs.css"rel="stylesheet"/><p><h2>Thumbnail helper</h2><aclass="fancybox-thumb"rel="fancybox-thumb"href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg"title="Bråviken (jarnasen)"><imgsrc="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg"alt=""/></a><aclass="fancybox-thumb"rel="fancybox-thumb"href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg"title="From the garden (*Jilltoo)"><imgsrc="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg"alt=""/></a><aclass="fancybox-thumb"rel="fancybox-thumb"href="http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg"title="cold forest (picturesbywalther)"><imgsrc="http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.jpg"alt=""/></a><aclass="fancybox-thumb"rel="fancybox-thumb"href="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg"title="Holly blue (Masa_N)"><imgsrc="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.jpg"alt=""/></a></p>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script src="~/Scripts/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">$(document).ready(function() {
$(".fancybox-thumb").fancybox({PRevEffect:'elastic',
nextEffect:'elastic',
helpers: {
title: {
type:'inside'},
thumbs: {
width:50,
height:50}
}
});
});</script>
References:
http://fancyapps.com/fancybox/
http://fancybox.net/
https://github.com/fancyapps/fancyBox