Abrir imagenes en un popup con Jquery.
Archivos js necesarios:
<script src="public/plugins/jquery-1.4.2.js"></script> <script src="public/plugins/lightbox/NFLightBox.js"></script>
Archivo css:
<link href="public/plugins/lightbox/css/nf.lightbox.css" rel="stylesheet" type="text/css" media="screen" />
Se inicializa de cualquiera de las siguientes maneras:
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
Parámetros disponibles:
/// <param name="settings" type="Options"> /// 1: overlayBgColor - (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color. /// 2: overlayOpacity - (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9. /// 3: fixedNavigation - (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface. /// 4: imageLoading - (string) Path and the name of the loading icon image /// 5: imageBtnPrev - (string) Path and the name of the prev button image /// 6: imageBtnNext - (string) Path and the name of the next button image /// 7: imageBtnClose - (string) Path and the name of the close button image /// 8: imageBlank - (string) Path and the name of a blank image (one pixel) /// 9: imageBtnBottomPrev - (string) Path and the name of the bottom prev button image /// 10: imageBtnBottomNext - (string) (string) Path and the name of the bottom next button image /// 11: imageBtnPlay - (string) Path and the name of the close button image /// 12: imageBtnStop - (string) Path and the name of the play button image /// 13: containerBorderSize - (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value /// 14: containerResizeSpeed - (integer) Specify the resize duration of container image. These number are miliseconds. 500 is default. /// 15: txtImage - (string) Specify text "Image" /// 16: txtOf - (string) Specify text "of" /// 17: txtPrev - (string) Specify text "previous" /// 18: keyToNext - (string) Specify text "next" /// 19: keyToClose - (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to. /// 20: keyToPrev - (string) (p = previous) Letter to show the previous image. /// 21: keyToNext - (string) (n = next) Letter to show the next image. /// 22: slideShowTimer - (integer) number of milliseconds to change image by default 5000. /// </param>
Cargar los parámetros de la siguiente forma:
<script type="text/javascript">
$(function() {
var settings = { containerResizeSpeed: 350 };
$('#gallery a').lightBox(settings);
});
</script>

