Leandro: Love the plug-in, but I had one small issue with IE6… Dynamically-created absolutely-positioned objects often “get lost” in IE6. The easiest solution I have found is to “remind” IE that the object exists. So, after appending the Lightbox HTML to the BODY, I added this statement: $(‘#jquery-lightbox’).css({position:’absolute’}); This resolved the issue in IE6. Tchau, e muito obrigado!! Atg
Hello,
I’m using your lightbox-Plugin for jQuery. I have a question. Is it possible to autostart a gallery by entering a site and how can I do this.
Thank you and have a nice day – Guido
I found a little bug, the jquery-overlay, that covers the background sometimes comes a little short, if the original height of the page is less than the height after the lightBox kicks in.
Fixed that by changing the position of #jquery-overlay to fixed in the css.
Leandro your a genius i admire you…:) i used your jquery light box and i love it
it’s good and pretty.
But it should be that
$(‘#lightbox-container-image-data-box’).css({ width: intWidth });
for a html file with no xhtml DTD on IE,
in the function , _resize_container_image_box().
Thanks for lightbox. L have one question. Lightbox for prototype have one cool option like show iframe instead of image , i mean if href is link to some site light box will show site.Cant find this option in your work .Is it there ? if no – will be it ?
Your lightbox is the most used jquery plugin I think !
Congratulation
Hi,
i’m using ur lightbox but i want to some change like where come image 4 of 3 …i want change like gallery# 4 of 2 and other changes is where is come title i want here add link like title Live image can its possible if possible den pls tell me or send me detail on my gmail id thanks.
Hi, first I’d like to thanks you due to I’ve used you plugin and it’s great… but I´ve got a question:
Is it posible to use files with special characters like “á”, “ñ”,… (spanish characters)? For example: eñe.jpg?
Thanks a lot!
I am trying to use your lightbox with dreamweaver. I am no computer wiz and my nervous tampering with java script is just about as technical as I get. However, I cannot get the lightbox to work properly. When I upload the formatting for the boxes etc disappears and I am left with the pictures which just open as enlargements at the edge of a new page – very boring and not at all like your demo shows. I am probably doing something fundamentally wrong – please tell me.
Many thanks
Sue
Thank you so much for your contribution.
I must be doing something wrong because everything worked great until I noticed that the navigation is also trying to bring up a lightbox window.
How do I make that stop? When I deleted “Select all links in the page” line of code, nothing worked.
Thank you,
Karen
Is it possible for the lightbox to not let the image being shown go larger than the screen? if I have a very large image, I would like it to be shrunk to the width/height of the browser so the image is all visible on the screen. If the user clicks it (or a special button?) they can see the full size image then.
Español: Me gustaría saber si con tu proyecto [http://leandrovieira.com/projects/jquery/lightbox/#] puedo desplegar un HTML en lugar de la img en grande…
Me explico, que al hacer clic sobre la miniatura, se expanda un html…
Saludos y enorabuena, muy buena.
Leandro
No puede encontrar su dirección de correo electrónico en su sitio. Por favor, póngase en contacto conmigo. Necesito su ayuda para un proyecto pagado por un sitio web de pequeñas empresas. Es un proyecto muy pequeño.
Hi there… as everyone else can notice your website’s contact us page doesn’t work. So I’m posting here. I’ve added a simple workaround to respect rel=”lightbox[groupName]” on the selector. I didn’t want to keep it for myself so I’ve opened a github repo and added it in. It can be found at: http://avioli.github.com/jquery-lightbox/
Hi I am starting to use you lightbox plug for jQuery. Thanks for making this.
I have made a few modifications that you might like to include in a future version
Modified by Robert Blackwell (rob@whiteacorn.com)
1. A new option has been added settings.cycle_thru_images. When true next/prev dont stop at start or end but keep cycling through the images.
2. There was a bug in the function _keyboard_action – with safari it did not find the value of the ESC key correctly
3. keydown events were not being handled correctly in a situation where other code (non Lightbox) also had keydown handlers installed.
The fix was:
a) stop events proagating up from the keydown handler while lightbox was running
b) when closing lightbox only unhook the lightbox keydown handler, that requires using an unbind call with the handler
specific such as .unbind(“keydown”, _keyboard_action)
4. The inserted html is formated for easy reading
I have tried to identify all my changes with the text Robert Blackwell inside a comment near the place a change has been made
I can send you the modified code if you want it. Just email me at the address included with this post
I love using your jQuery lightbox plugin, but yesterday I noticed the overlay doesn’t cover the entire screen when viewing it on my iPhone.
The ___getPageSize() function doesn’t return the correct page width for the mobile device. I looked into it but haven’t found a fix yet.
Hi,
The Lightbox works perfectly, but I cannot figure out how to add the nav buttons, or where to put description of the images. Can you help?
Thank you!
Some of the titles I want to display with the light box image contain ” or ‘ (or both) in the string.
Is there a way I can pass those so that they are recognized correctly?
I love your plug in. but I have a question that some people already asked on this page but since no answers are posted I need to ask it again. In the example on your page you add the title as caption to the lightbox as well as the image #. But on the download I have a title for each picture but the lightbox does not display the title only the image#. Could you help me and tell me how to add it? I would appreciate it.
Hi there, i have a question. There is a way to disable keyboard navigation?
sometimes when navigating with keyboard i am experiencing some bugs like some pictures being ignored. for instance, your plugin showing me the picture 1 and then picture 3 and then 5……. but this bug never happens when navigating with mouse click.
great job and thank you for the plugin,
cheers
hi
the lightBox is perfect in my eyes
congratulation
i only have one question: how can the hight of the background of the shown pictures be enlarged, so that there is no border at the bottom region
thank you for your help and all the best for you!
Great plugin !
For those who have several galleries within a same page:
if you have several blocks with a class “gall” :
On your jQuery lightbox plugin, on the How to Use page, you should change the script include links to match the latest version (currently they say to link to -0.4, should be -0.5)
Hello,
I have some little solution to give grouping feature to this great plugin. Just change line 81: settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’)));
to this: if(jQueryMatchedObj[i].getAttribute(‘rel’)==objClicked.getAttribute(‘rel’)) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’)));
}
One simple IF gives functionality of grouping pictures. Now rel=lightbox[1st_gallery]…rel=lightbox[1st_gallery]
and
rel=lightbox[2nd_gallery]…rel=lightbox[2nd_gallery]…rel=lightbox[2nd_gallery]…rel=lightbox[2nd_gallery]
will give 2 separated galleries with 2 and 4 elements.
Cheers
I love your lightbox script. It’s lightweight and very easy to use. I would like to know how I can add iframe or ajax support so that I can open youtube videos or fillable documents. I’ve seen other lightbox scripts that do this but they are licensed and not open source. I would like to help you with this update if possible.
I added video support, hope you don’t mind that I modified your code a little bit. I needed this for a school project that’s due next week. Though I would share with everyone. It would be nice to see this added to the next update/release.
Step3:
Open the jquery.lightbox-0.5.js and make the following changes:
Add new settings to the settings object. It looks like this:
$.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
insert at the end of the object before closing “}”
//***************//
// add video support
//***************//
videoWidth: 560, //(int) the default Youtube player embed width
videoHeight: 315 //(int) the default Youtube player embed height
check you commas if you add them somewhere else
Next, locate the _start() function and add the following code to the conditional that pushes array values.
This will add the new class to the array which we will check for in the next step. Make sure you have changed both lines of code. The second half of the conditional looks for more than one object and add all of your links to the array. If you want multiple videos change code in the for() loop also.
Next, find the _set_image_to_view() function and add modify the following code.
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
it should now read
//*********************//
// load video if exists
//*********************//
if(settings.imageArray[settings.activeImage][2] ==’lb-video’){
var videoContainer = $(”);
$(‘#lightbox-container-image’).append(videoContainer);
$(‘#lightbox-video’).attr({
‘src’:settings.imageArray[settings.activeImage][0],
‘width’:settings.videoWidth,
‘height’:settings.videoHeight
});
//resize image container for video preview
_resize_container_image_box(settings.videoWidth,settings.videoHeight);
}else{
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
}
Instead of just loading an images we are now checking to see if the array item has a class set to lb-video. If it does then we create a video container and load that instead of just an image. Then we call the resize function to resize the outer container. The new video container degrades as the image container did.
I hope this helped out anyone looking to extend there lightbox to show videos.
Wow that was weird, guess you can’t use tags in this comments form.
This should be easier to read.
Step1:
Add the following class to your a tags that will hold video links:
Step2:
Add the following script above your init function in your script tag
This will prevent the default behavior of the browser following the link:
//stop browser from leaving when link is clicked on all tags with the class lb-video
$(your id here ‘a.lb-video’).click(function(event){
event.preventDefault();
}
//next add the default init function
//bind lightbox object to all tags within the named id
$(your id here ‘a’).lightbox();
Step3:
Open the jquery.lightbox-0.5.js and make the following changes:
Add new settings to the settings object. It looks like this:
$.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
insert at the end of the object before closing “}”
//***************//
// add video support
//***************//
videoWidth: 560, //(int) the default Youtube player embed width
videoHeight: 315 //(int) the default Youtube player embed height
check you commas if you add them somewhere else
Next, locate the _start() function and modify the following code inside the conditional that pushes array values.
settings.imageArray.push(new Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’),objClicked.getAttribute(‘class’)));
This will add the new class to the array which we will check for in the next step. Make sure you have changed both lines of code. The second half of the conditional looks for more than one object and add all of your links to the array. If you want multiple videos change code in the for() loop also.
Next, find the _set_image_to_view() function and add modify the following code.
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
it should now read
//*********************//
// load video if exists
//*********************//
if(settings.imageArray[settings.activeImage][2] ==’lb-video’){
var videoContainer = $(”);
$(‘#lightbox-container-image’).append(videoContainer);
$(‘#lightbox-video’).attr({
‘src’:settings.imageArray[settings.activeImage][0],
‘width’:settings.videoWidth,
‘height’:settings.videoHeight
});
//resize image container for video preview
_resize_container_image_box(settings.videoWidth,settings.videoHeight);
}else{
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
}
Instead of just loading an images we are now checking to see if the array item has a class set to lb-video. If it does then we create a video container and load that instead of just an image. Then we call the resize function to resize the outer container. The new video container degrades as the image container did.
I hope this helped out anyone looking to extend there lightbox to show videos.
that step one class is called lb-video.
Third times a charm.
To bad your script cannot handel content from other tags that title. If you want to use tags in the content, it ain’t looking good when mouseover…
Great plug in the light box works great. I followed a couple of the tweak mentioned and it works a dream, tags work well to hold the video links
Hi Leandro,
Great Lightbox script.
Question: Do you know of a way to allow people to print an image shown in the lightbox window?
Many thanks
Cynthia
I think someone else asked this above but the image shown is always the full size of the image. I have very large images, is there an easy way to resize or set the size of the image being shown?
Your lightbox it’s so amazing!! thanks for sharing it!
Hi,
First of all, I want to thank you for the excellent image viewer. Lightweight (but full-featured), and easy to use. I like it.
It works, until you change the ‘page’ (in the album). I had the same problem with an other image viewer (Floatbox), however, the dev was able to provide a working fix for that problem.
Now, I’d like to use your image viewer. If you’re willing to help me, please contact me (email provided), so I can give you more details about the problem.
Many thanks in advance.
I practiced with your lightbox before I work on a web site as it works. Now I have put into it and it doesn’t work. so what is it that causing the container image-box and image to be apart? any suggestions?
Hello!! Great work Leandro!!
I’m trying to apply LightBox in my new web (i’m begginer) but don’t work fine.
- In one page I have multiple entries with their respective galleries, and when I see one I get the picture but when I count the number of images I add up all those that appear on the page, not from the gallery.
Example:
when viewing the image 1 of a gallery that has 3 images, I say it is the image 1 of 30 (total) not 3.
- Display an error appears, because when I click on an image I focused image appears on screen, but I magnify the page (vertically) and I get the bottom, although the effect does not work.
I am working from a local server and the call of the scripts I make them from a file header.php that I include in index.php.
¿what’s wrong?
pd. sorry but my english is very basic
Hey, first of all your contact form dont work, after this i want to ask you: how can i resize my lightbox?? can you send me an email??
Hello,
I just implemented your fine work in the start page of the above mentionned site. I face one problem I could not resolve and I would like to know if a feature is available.
Let me first explain the problem I face.
When the image is displaying it does not display the navigation images : prev, next, close. When I look into Firebug, the error message is : Failed to open URL. I have tried several options (moving the location of images, using ImageLoading,… when calling lightbox function. But nothing worked out for me so far. Can you please give me some directions to investigate ?
Now concerning the feature I am looking for.
Is is possible to have the next, previous functions available with the thumbnails display ? What happens at the moment is that if I add a 6th image to be displayed it would be displayed on a second row. As I intend to display a lot of images I think it would be nicer to have a next button showing up when display exceeds the screen width. What do you think about that ?
Last but not least, thank you very much for this work as it allows people like me to assist friends in creating their web sites at a very low price.
King Regards.
Guten Tag Herr Leandro Vieira
I want to ask you if I can write you in German becouse my english is not so very good. Or is it allowed to write a question to you in a kind of bad english.
The very best regards from Johann in Germany
Hi Leandro,
Thanks for your plugin. I’ve made a few enhancements based upon what I needed, and put them in a Github repository where people can continue development if they like. The three enhancements I made were as follows:
1. I added a “top” property to the options, which works similarly to the CSS property “top” and moves the lightbox frame down. The intended format is an integer.
2. I added an “onOpen” function argument to the options. This passes a callback function that’s executed when the lightbox is opened.
2. I added an “onClose” function which passes a callback function which is executed when the lightbox is closed.
The repository is located at https://github.com/trystant/jquery-lightbox and unless Leandro has any objection, people should feel free to make any enhancements they like. Fork and pull away. Thanks.
Hi, Leandro. Your plugin helps me a lot. Thank you very much, really. Sorry for my poor English, if I say something strange.
I note that in “Example.” you use option “fixedNavigation:true”. But I can’t find any doc content about this content. This confuses me somewhat. And, is the list in “Extend.” the full list of available options?
This is just a small suggestion. Maybe I can solve this problem by watching source code. Thank you, again.
You have a nice script here. Thanks.
But what is really anoying is that the path to the images (close-button etc) has to be set in the function and not in the stylesheets. It only works when you put the image-directory in the root of the site. Anywhere else is just being ignored. I really hope this will be solved.
I started using your Lightbox Plugin quite new on a project. It works perfect and awesome. But when i use it along with a new script, ( fade in / fade out )script called responsiveSlides.js; the lightbox plugin stops functioning. Following is the URL to view the conflict: http://colorchalk.com/clients/kgs-milestone/folio.htm
Any idea what’s wrong. Kindly point me in the right direction.
Thanks in advance
Amarnath Jaganathan
This is really attention-grabbing, You’re a very professional blogger. I have joined your rss feed and sit up for looking for extra of your magnificent post. Additionally, I have shared your site in my social networks
Pingback: Labs do Leandro Vieira Pinho e Fórum para trocarmos idéias
Pingback: bloghain » jQuery lightBox plugin
Leandro: Love the plug-in, but I had one small issue with IE6… Dynamically-created absolutely-positioned objects often “get lost” in IE6. The easiest solution I have found is to “remind” IE that the object exists. So, after appending the Lightbox HTML to the BODY, I added this statement: $(‘#jquery-lightbox’).css({position:’absolute’}); This resolved the issue in IE6. Tchau, e muito obrigado!! Atg
Hello,
I’m using your lightbox-Plugin for jQuery. I have a question. Is it possible to autostart a gallery by entering a site and how can I do this.
Thank you and have a nice day – Guido
I found a little bug, the jquery-overlay, that covers the background sometimes comes a little short, if the original height of the page is less than the height after the lightBox kicks in.
Fixed that by changing the position of #jquery-overlay to fixed in the css.
Leandro your a genius i admire you…:) i used your jquery light box and i love it
it’s good and pretty.
But it should be that
$(‘#lightbox-container-image-data-box’).css({ width: intWidth });
for a html file with no xhtml DTD on IE,
in the function , _resize_container_image_box().
Thanks for lightbox. L have one question. Lightbox for prototype have one cool option like show iframe instead of image , i mean if href is link to some site light box will show site.Cant find this option in your work .Is it there ? if no – will be it ?
Your lightbox is the most used jquery plugin I think !
Congratulation
Hi,
i’m using ur lightbox but i want to some change like where come image 4 of 3 …i want change like gallery# 4 of 2 and other changes is where is come title i want here add link like title Live image can its possible if possible den pls tell me or send me detail on my gmail id thanks.
Hi, first I’d like to thanks you due to I’ve used you plugin and it’s great… but I´ve got a question:
Is it posible to use files with special characters like “á”, “ñ”,… (spanish characters)? For example: eñe.jpg?
Thanks a lot!
I am trying to use your lightbox with dreamweaver. I am no computer wiz and my nervous tampering with java script is just about as technical as I get. However, I cannot get the lightbox to work properly. When I upload the formatting for the boxes etc disappears and I am left with the pictures which just open as enlargements at the edge of a new page – very boring and not at all like your demo shows. I am probably doing something fundamentally wrong – please tell me.
Many thanks
Sue
Thank you so much for your contribution.
I must be doing something wrong because everything worked great until I noticed that the navigation is also trying to bring up a lightbox window.
How do I make that stop? When I deleted “Select all links in the page” line of code, nothing worked.
Thank you,
Karen
Is it possible for the lightbox to not let the image being shown go larger than the screen? if I have a very large image, I would like it to be shrunk to the width/height of the browser so the image is all visible on the screen. If the user clicks it (or a special button?) they can see the full size image then.
Español: Me gustaría saber si con tu proyecto [http://leandrovieira.com/projects/jquery/lightbox/#] puedo desplegar un HTML en lugar de la img en grande…
Me explico, que al hacer clic sobre la miniatura, se expanda un html…
Saludos y enorabuena, muy buena.
Leandro
No puede encontrar su dirección de correo electrónico en su sitio. Por favor, póngase en contacto conmigo. Necesito su ayuda para un proyecto pagado por un sitio web de pequeñas empresas. Es un proyecto muy pequeño.
gracias
Justin
justin@emjmultimedia.com
Hi there… as everyone else can notice your website’s contact us page doesn’t work. So I’m posting here. I’ve added a simple workaround to respect rel=”lightbox[groupName]” on the selector. I didn’t want to keep it for myself so I’ve opened a github repo and added it in. It can be found at: http://avioli.github.com/jquery-lightbox/
Hi I am starting to use you lightbox plug for jQuery. Thanks for making this.
I have made a few modifications that you might like to include in a future version
Modified by Robert Blackwell (rob@whiteacorn.com)
1. A new option has been added settings.cycle_thru_images. When true next/prev dont stop at start or end but keep cycling through the images.
2. There was a bug in the function _keyboard_action – with safari it did not find the value of the ESC key correctly
3. keydown events were not being handled correctly in a situation where other code (non Lightbox) also had keydown handlers installed.
The fix was:
a) stop events proagating up from the keydown handler while lightbox was running
b) when closing lightbox only unhook the lightbox keydown handler, that requires using an unbind call with the handler
specific such as .unbind(“keydown”, _keyboard_action)
4. The inserted html is formated for easy reading
I have tried to identify all my changes with the text Robert Blackwell inside a comment near the place a change has been made
I can send you the modified code if you want it. Just email me at the address included with this post
I love using your jQuery lightbox plugin, but yesterday I noticed the overlay doesn’t cover the entire screen when viewing it on my iPhone.
The ___getPageSize() function doesn’t return the correct page width for the mobile device. I looked into it but haven’t found a fix yet.
Hi,
The Lightbox works perfectly, but I cannot figure out how to add the nav buttons, or where to put description of the images. Can you help?
Thank you!
Some of the titles I want to display with the light box image contain ” or ‘ (or both) in the string.
Is there a way I can pass those so that they are recognized correctly?
I love your plug in. but I have a question that some people already asked on this page but since no answers are posted I need to ask it again. In the example on your page you add the title as caption to the lightbox as well as the image #. But on the download I have a title for each picture but the lightbox does not display the title only the image#. Could you help me and tell me how to add it? I would appreciate it.
Hi there, i have a question. There is a way to disable keyboard navigation?
sometimes when navigating with keyboard i am experiencing some bugs like some pictures being ignored. for instance, your plugin showing me the picture 1 and then picture 3 and then 5……. but this bug never happens when navigating with mouse click.
great job and thank you for the plugin,
cheers
hi
the lightBox is perfect in my eyes
congratulation
i only have one question: how can the hight of the background of the shown pictures be enlarged, so that there is no border at the bottom region
thank you for your help and all the best for you!
Great plugin !
For those who have several galleries within a same page:
if you have several blocks with a class “gall” :
$(‘.gall’).each(function(){
$(‘a[rel*=lightbox]‘,this).lightBox();
})
On your jQuery lightbox plugin, on the How to Use page, you should change the script include links to match the latest version (currently they say to link to -0.4, should be -0.5)
Hello,
I have some little solution to give grouping feature to this great plugin. Just change line 81: settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’)));
to this: if(jQueryMatchedObj[i].getAttribute(‘rel’)==objClicked.getAttribute(‘rel’)) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute(‘href’),jQueryMatchedObj[i].getAttribute(‘title’)));
}
One simple IF gives functionality of grouping pictures. Now rel=lightbox[1st_gallery]…rel=lightbox[1st_gallery]
and
rel=lightbox[2nd_gallery]…rel=lightbox[2nd_gallery]…rel=lightbox[2nd_gallery]…rel=lightbox[2nd_gallery]
will give 2 separated galleries with 2 and 4 elements.
Cheers
I love your lightbox script. It’s lightweight and very easy to use. I would like to know how I can add iframe or ajax support so that I can open youtube videos or fillable documents. I’ve seen other lightbox scripts that do this but they are licensed and not open source. I would like to help you with this update if possible.
I added video support, hope you don’t mind that I modified your code a little bit. I needed this for a school project that’s due next week. Though I would share with everyone. It would be nice to see this added to the next update/release.
Step1:
Add the following class to your tags that will hold video links:
Step2:
Add the following script above your init function in your script tag
This will prevent the default behavior of the browser following the link:
//stop browser from leaving when link is clicked on all tags with the class lb-video
$(your id here ‘a.lb-video’).click(function(event){
event.preventDefault();
}
//next add the default init function
//bind lightbox object to all tags within the named id
$(your id here ‘a’).lightbox();
Step3:
Open the jquery.lightbox-0.5.js and make the following changes:
Add new settings to the settings object. It looks like this:
$.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
insert at the end of the object before closing “}”
//***************//
// add video support
//***************//
videoWidth: 560, //(int) the default Youtube player embed width
videoHeight: 315 //(int) the default Youtube player embed height
check you commas if you add them somewhere else
Next, locate the _start() function and add the following code to the conditional that pushes array values.
settings.imageArray.push(new Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’),objClicked.getAttribute(‘class’)));
This will add the new class to the array which we will check for in the next step. Make sure you have changed both lines of code. The second half of the conditional looks for more than one object and add all of your links to the array. If you want multiple videos change code in the for() loop also.
Next, find the _set_image_to_view() function and add modify the following code.
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
it should now read
//*********************//
// load video if exists
//*********************//
if(settings.imageArray[settings.activeImage][2] ==’lb-video’){
var videoContainer = $(”);
$(‘#lightbox-container-image’).append(videoContainer);
$(‘#lightbox-video’).attr({
‘src’:settings.imageArray[settings.activeImage][0],
‘width’:settings.videoWidth,
‘height’:settings.videoHeight
});
//resize image container for video preview
_resize_container_image_box(settings.videoWidth,settings.videoHeight);
}else{
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
}
Instead of just loading an images we are now checking to see if the array item has a class set to lb-video. If it does then we create a video container and load that instead of just an image. Then we call the resize function to resize the outer container. The new video container degrades as the image container did.
I hope this helped out anyone looking to extend there lightbox to show videos.
Wow that was weird, guess you can’t use tags in this comments form.
This should be easier to read.
Step1:
Add the following class to your a tags that will hold video links:
Step2:
Add the following script above your init function in your script tag
This will prevent the default behavior of the browser following the link:
//stop browser from leaving when link is clicked on all tags with the class lb-video
$(your id here ‘a.lb-video’).click(function(event){
event.preventDefault();
}
//next add the default init function
//bind lightbox object to all tags within the named id
$(your id here ‘a’).lightbox();
Step3:
Open the jquery.lightbox-0.5.js and make the following changes:
Add new settings to the settings object. It looks like this:
$.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
insert at the end of the object before closing “}”
//***************//
// add video support
//***************//
videoWidth: 560, //(int) the default Youtube player embed width
videoHeight: 315 //(int) the default Youtube player embed height
check you commas if you add them somewhere else
Next, locate the _start() function and modify the following code inside the conditional that pushes array values.
settings.imageArray.push(new Array(objClicked.getAttribute(‘href’),objClicked.getAttribute(‘title’),objClicked.getAttribute(‘class’)));
This will add the new class to the array which we will check for in the next step. Make sure you have changed both lines of code. The second half of the conditional looks for more than one object and add all of your links to the array. If you want multiple videos change code in the for() loop also.
Next, find the _set_image_to_view() function and add modify the following code.
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
it should now read
//*********************//
// load video if exists
//*********************//
if(settings.imageArray[settings.activeImage][2] ==’lb-video’){
var videoContainer = $(”);
$(‘#lightbox-container-image’).append(videoContainer);
$(‘#lightbox-video’).attr({
‘src’:settings.imageArray[settings.activeImage][0],
‘width’:settings.videoWidth,
‘height’:settings.videoHeight
});
//resize image container for video preview
_resize_container_image_box(settings.videoWidth,settings.videoHeight);
}else{
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$(‘#lightbox-image’).attr(‘src’,settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
}
Instead of just loading an images we are now checking to see if the array item has a class set to lb-video. If it does then we create a video container and load that instead of just an image. Then we call the resize function to resize the outer container. The new video container degrades as the image container did.
I hope this helped out anyone looking to extend there lightbox to show videos.
that step one class is called lb-video.
Third times a charm.
To bad your script cannot handel content from other tags that title. If you want to use tags in the content, it ain’t looking good when mouseover…
Great plug in the light box works great. I followed a couple of the tweak mentioned and it works a dream, tags work well to hold the video links
Hi Leandro,
Great Lightbox script.
Question: Do you know of a way to allow people to print an image shown in the lightbox window?
Many thanks
Cynthia
I think someone else asked this above but the image shown is always the full size of the image. I have very large images, is there an easy way to resize or set the size of the image being shown?
Your lightbox it’s so amazing!! thanks for sharing it!
Hi,
First of all, I want to thank you for the excellent image viewer. Lightweight (but full-featured), and easy to use. I like it.
However, I want to use your image viewer in combination with a PHP Image album script: http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm
It works, until you change the ‘page’ (in the album). I had the same problem with an other image viewer (Floatbox), however, the dev was able to provide a working fix for that problem.
Now, I’d like to use your image viewer. If you’re willing to help me, please contact me (email provided), so I can give you more details about the problem.
Many thanks in advance.
I practiced with your lightbox before I work on a web site as it works. Now I have put into it and it doesn’t work. so what is it that causing the container image-box and image to be apart? any suggestions?
Hello!! Great work Leandro!!
I’m trying to apply LightBox in my new web (i’m begginer) but don’t work fine.
- In one page I have multiple entries with their respective galleries, and when I see one I get the picture but when I count the number of images I add up all those that appear on the page, not from the gallery.
Example:
when viewing the image 1 of a gallery that has 3 images, I say it is the image 1 of 30 (total) not 3.
- Display an error appears, because when I click on an image I focused image appears on screen, but I magnify the page (vertically) and I get the bottom, although the effect does not work.
I am working from a local server and the call of the scripts I make them from a file header.php that I include in index.php.
¿what’s wrong?
pd. sorry but my english is very basic
Hey, first of all your contact form dont work, after this i want to ask you: how can i resize my lightbox?? can you send me an email??
Hello,
I just implemented your fine work in the start page of the above mentionned site. I face one problem I could not resolve and I would like to know if a feature is available.
Let me first explain the problem I face.
When the image is displaying it does not display the navigation images : prev, next, close. When I look into Firebug, the error message is : Failed to open URL. I have tried several options (moving the location of images, using ImageLoading,… when calling lightbox function. But nothing worked out for me so far. Can you please give me some directions to investigate ?
Now concerning the feature I am looking for.
Is is possible to have the next, previous functions available with the thumbnails display ? What happens at the moment is that if I add a 6th image to be displayed it would be displayed on a second row. As I intend to display a lot of images I think it would be nicer to have a next button showing up when display exceeds the screen width. What do you think about that ?
Last but not least, thank you very much for this work as it allows people like me to assist friends in creating their web sites at a very low price.
King Regards.
Guten Tag Herr Leandro Vieira
I want to ask you if I can write you in German becouse my english is not so very good. Or is it allowed to write a question to you in a kind of bad english.
The very best regards from Johann in Germany
Hi Leandro,
Thanks for your plugin. I’ve made a few enhancements based upon what I needed, and put them in a Github repository where people can continue development if they like. The three enhancements I made were as follows:
1. I added a “top” property to the options, which works similarly to the CSS property “top” and moves the lightbox frame down. The intended format is an integer.
2. I added an “onOpen” function argument to the options. This passes a callback function that’s executed when the lightbox is opened.
2. I added an “onClose” function which passes a callback function which is executed when the lightbox is closed.
The repository is located at https://github.com/trystant/jquery-lightbox and unless Leandro has any objection, people should feel free to make any enhancements they like. Fork and pull away. Thanks.
Hi, Leandro. Your plugin helps me a lot. Thank you very much, really. Sorry for my poor English, if I say something strange.
I note that in “Example.” you use option “fixedNavigation:true”. But I can’t find any doc content about this content. This confuses me somewhat. And, is the list in “Extend.” the full list of available options?
This is just a small suggestion. Maybe I can solve this problem by watching source code. Thank you, again.
Hello Leandro,
Do you have http://leandrovieira.com/projects/jquery/lightbox/ in Github or in Bitbucket? I have added a feature for it and would like to fork it “officially” to share it with others.
Best regards,
W
You have a nice script here. Thanks.
But what is really anoying is that the path to the images (close-button etc) has to be set in the function and not in the stylesheets. It only works when you put the image-directory in the root of the site. Anywhere else is just being ignored. I really hope this will be solved.
Obrigado Leandro, muito bom o plugin! fiz uma pequena alteração pra limitar (opcionalmente) o tamanho da imagem na janela do preview. É que com imagens grandes ficava meio estranho… da uma olhadinha
http://www.alfersoft.com.ar/blog/2011/12/09/jquery-lightbox-adjust-big-images-to-the-window-size/
Dear Leandro,
Thanks for a wonderful plugin!
I started using your Lightbox Plugin quite new on a project. It works perfect and awesome. But when i use it along with a new script, ( fade in / fade out )script called responsiveSlides.js; the lightbox plugin stops functioning. Following is the URL to view the conflict:
http://colorchalk.com/clients/kgs-milestone/folio.htm
Any idea what’s wrong. Kindly point me in the right direction.
Thanks in advance
Amarnath Jaganathan
This is really attention-grabbing, You’re a very professional blogger. I have joined your rss feed and sit up for looking for extra of your magnificent post. Additionally, I have shared your site in my social networks