Code

Discussion on jQuery Lightbox Evolution

Discussion on jQuery Lightbox Evolution

Cart 6,189 sales

aeroalquimia does not currently provide support for this item.

1433 comments found.

Hi, is there a way to use titles in an array when you open the lightbox via javascript? or that can only be done via links?

jQuery.lightbox([
  '/assets/slide_1.jpg?lightbox[title]=Example',
  '/assets/slide_2.jpg?lightbox[title]=Another Example'
]);

jQuery LightBox Evolution doesn’t work with facebook canvas iframe applications that have the scrollbar autoresize code active.

The fb canvas autoresize code make the iframe the full height of the content thereby removing the scrollbars altogether. There still the outer scrollbars of the facebook page, but that’s out of programitic reach due to cross domain limitations in javascript.

Is there a work around or a fix for this issue?

Thanks, - Adam

Hi, I don’t know what you’re talking about. can you send me the url via email, so I can have a look at the issue. Thanks.

aeroalquimia,

Is there any way using the stand-alone version of this lightbox script (no WP) to specify the animation type. I want to have the lightbox fade in with no sliding animation.

I like the sliding animation but it operates rather slowly on some older machines.

For example:

jQuery('.lightbox').lightbox({ iframe:true, width:960, height:500, modal:true, animation:fade <--- this is what I need });

Thank you.

can you help me with the problem? (info email)?

I’ll contact you via email. Stop posting here.

Hi,

Does your video lightbox support custom videos? I only see the links from Youtube and such.

I have compressed video files in mp4 and flv formats.

Thanks,

Yes, but you have to do it yourself. The user “Puky” did it using JW Player

http://codecanyon.net/item/jquery-lightbox-evolution/discussion/115655#comment_842719

Hi there!

Hade some trouble with your lightbox today. Fixed it for the moment:

In Internet Explorer 8 when using iframes to load an other html file, I had doubling scroolbars (two on right, two on bottom). Forced overflow-x and overflow-y of ”.jquery-lightbox-mode-html .jquery-lightbox-html” to hide (override your settings). After that it looks the same in all tested browsers… Probably my mistake somewhere, cause I didn’t have the problem with your demo-page.

During testing I downloaded your newest version of the lightbox (1.4.1) but there something has gone terribly wrong when using iframes… Have a very fat space on top of content… couldn’t find a solution.

Thx for your awesome work!

Atreju

The problem is in the page that you are opening. Try adding the lines below on that page:

<style type="text/css">
body{margin:0; padding:0}
</style>

hello aeroalquimia, thank you for great support. now I understand … :)

sorry, not understand …

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Lightbox Evolution</title>
  <link href="help/css/reset.css" rel="stylesheet" type="text/css" />
  <link href="help/css/style.css" rel="stylesheet" type="text/css" />
  <script src="javascript/jquery.min.js" type="text/javascript"></script>
  <link href="javascript/lightbox/themes/default/jquery.lightbox.css" rel="stylesheet" type="text/css" />
  <!--[if IE 6]><link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.ie6.css" /><![endif]-->
  <script src="javascript/lightbox/jquery.lightbox.js" type="text/javascript"></script>
  <script type="text/javascript">
    jQuery.lightbox('http://player.longtailvideo.com/player.swf', {
  force: 'flash',
  flashvars: 'file=http://content.bitsontherun.com/videos/uMp5r6eZ-380099.mp4&autostart=true&skin=http://content.longtailvideo.com/skins/glow/glow.zip&stretching=fill'
});
  </script>
</head>

<body>
<strong>PLEASE OPEN WITH IMAGE OR TEXT LINK?</strong>

</body>
</html>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('.videobox').live('click', function(ev) {

      var video = $(this).attr('href');

      $.lightbox('http://player.longtailvideo.com/player.swf', {
        force: 'flash',
        flashvars: 'file='+video+'&autostart=true&stretching=fill'
      });

      ev.preventDefault();

    });
  });
</script>
<a href="http://content.bitsontherun.com/videos/uMp5r6eZ-380099.mp4" class="videobox">OPEN VIDEO</a>

hello, can you tell me if it works with the jw player? which code should be used?

thanks puky

Hi,

You can open it with javascript:

jQuery.lightbox('http://player.longtailvideo.com/player.swf', {
  force: 'flash',
  flashvars: 'file=http://content.bitsontherun.com/videos/uMp5r6eZ-380099.mp4&autostart=true&skin=http://content.longtailvideo.com/skins/glow/glow.zip&stretching=fill'
});

Greetings,

I want to have a video appear in lightbox and autoplay on my main page. It’s a vimeo video and has a url.

I used this in the head of main page:

<!-[if IE 6 ]> <![endif]-> jQuery(document).ready(function(){ jQuery.lightbox(“http://vimeo.com/15682302”); });

video plays, but takes a while to load while lightbox shows a white screen. Also, video doesnt play completely smooth this way. (safari and IE8 )

Also, IE6 and windows XP never play video and just show a white lightbox.

Am i missing something? Do i need to do anything to code?

Hi, I have no way to detect when the Flash movie has finished loading. And it plays fine on my Safari. Can you send me the url via email?

You need to install Adobe Flash Player in your IE6 / Windows XP to play the video.

Hey, how can I open up a FLV (JW PLAYER ) with lightbox? http://www.longtailvideo.com/players/jw-flv-player/

Thanks again for the response. Other than Web kit browsers, I cannot manage to get the light-box close with the close button.

I called the light-box using javascript as below:

    jQuery('.lightbox').lightbox({
    iframe:true,
    width:960,
    height:500,
    modal:true
    });

But i can close the light box by clicking the overlay in non modal mode

Please contact me and send me the url via email. Thanks.

Hi Thank you for your response,

I have spotted 2 issues and hope you can help.

1. Under default theme, even I explicitly declared the same Rel attribute for 2 elements for example:

<a href="http://www.cnet.com" title="Go to Cnet" rel="participant" onclick="jQuery.lightbox(this.href, {'iframe':true,'width':800,'height':600,modal:true}); return false;">
Cnet</a>
<a href="http://www.google.com" title="Go to Google" rel="participant" onclick="jQuery.lightbox(this.href, {'iframe':true,'width':800,'height':600,modal:true}); return false;">
Google</a>

There is no Jquery button coming up! The same is true for other theme as well. How can i group multiple iframe?

2. Under following HTML structure:

<a href="http://www.cnet.com" class="series" title="Go to Cnet" rel="group1">Cnet</a>
<a href="http://www.google.com" class="series" title="Go to Google" rel="group1">Google</a>

if I called the light box through Java Script like this:

    jQuery('.series').lightbox({
    iframe:true,
    width:800,
    height:600,
    modal:true
    });

The Jquery Buttons are up! But i cannot interact anything inside the iFrame, even scrollbars cannot be used. I have checked your CSS and it appear that “jquery-lightbox-buttons” class has following inline CSS “style=”display: block; width: 830px; height: 620px;” with higher Zindex than “jquery-lightbox-background”. this can be solved through little modification to your CSS , but please come up with official update soon.

The real problem is that, when i navigate from Cnet to Google by clicking on the Jquery Buttons, the dialog window comes up and say “You need to specify the size of the lightbox”

Wish you could help

Both issues have the same cause: You can’t use the gallery mode with web pages.

I just bought the file and have it working, somewhat. When I utilize the code pulling images off my server, it breaks. I noticed these files don’t have a jpg extension (they are called using a server-side script called Slideshow Pro Director. I got the script close to working using the iframe code example, but still doesn’t load.

I have used lightbox2 and shadowbox and others with no problems with that file extension issue so hope it is something obvious I am doing wrong. I am not a complete noob, but not a code ninja either, so hope an easy fix. Thanks!

http://www.squidfist.com/evolve/index.php

<a href="http://www.squidfist.com/dir/p.php?a=cHx6YH1pbncpaH54aSkzPjI6Lio4OT06Nzc/NDEqKicjPGtjbSciPSY9MiMoNzsyJiYrMD4mMyszOS03IislPiItJiY+Iw==&m=1293985750?lightbox[width]=502&lightbox[height]=600" class="lightbox"><img src="http://www.squidfist.com/dir/p.php?a=cHx6YH1pbncpaH54aSkzPjI6Lio4OT06Nzc/NDEqKicjPGtjbSciPSY5MiMoMzsyJicrPj4mMyszOS03IislPiItJiY+Iw==&m=1293985750" height="200" width="200" /></a>

I wish you could provide more clarification on HTML /iframe integration. Can you check onthe problem below:

<a href="http://www.google.com?lightbox[iframe]=true&lightbox[width]=400&lightbox[height]=200" class="lightbox" title="Go to Google" rel="group1">Google</a>

Instead of going to Google default page, it direct me to Error Not Found Page. Beside both vertical and horizontal scrollbars do not work.

Please help

Hi,

There is a problem with google. You can open it using:

<a href="http://www.google.com" title="Go to Google" rel="group1" onclick="jQuery.lightbox(this.href, {'iframe':true,'width':400,'height':200}); return false;">Google</a>

or use my example instead:

<a href="http://www.google.com/webhp?hl=en&tab=nw&lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lightbox">Open Google</a>

Hello, put the code without the pre tag in the html code tab, but it does not work.

Regards matthijs

This is the content of the page now, here the live link http://www.formad.eu/content/about-3/huisstijlen/#gallery1 don’t know what i am doing wrong, sorry for that.

Regards Matthijs

Een huisstijl draagt uit wie u bent waar u voor staat. Het is veel meer dan een kunstig ontworpen logo in aansprekende kleuren of een goed gevonden beeld! Uw huisstijl vormt het fundament voor al uw marketinguitingen. Het is dan ook belangrijk dat u kunt kiezen voor een beeld en een sfeer die 100% bij u passen. Een door Formad ontworpen huisstijl is altijd uniek en ontstaat door een intensief contact tussen klant en ontwerper. De werkwijze van Formad is bijzonder.

jQuery(document).ready(function($) { $(’.opengallery’).click(function(ev) { var gal = $(this).attr(“href”); var imgs = []; $(gal + ” img”).each(function() { imgs.push( $(this).attr(“src”) ); }); $.lightbox(imgs); ev.preventDefault(); }); });

aposdfawjeofijawoeifjaoweijfaowefawfwae

Select the HTML tab and paste the code there :D

Hello,

When i remove the

 and 
tags the script is not working any more.

Regards Matthijs

O_O That makes no sense. Remove the pre tags.

Great jop, thank you, having one thing yet, how to remove the frame and see only the thubnail.

Hier is an live link.

http://www.formad.eu/content/about-3/huisstijlen/

Again thank you,

Kind regards, Matthijs

Remove “pre” tags :/

Hello great plugin! Need some help.

I want one image in my article, the when they click on it, it show 5 images of an gallery, expept for the first image in the article self.

Kind regards Matthijs

<a href="#gallery1" class="opengallery"><img src="thumbnail.jpg" /></a>

<div id="gallery1" style="display:none;">
  <img src="assets/1.jpg" />
  <img src="assets/2.jpg" />
  <img src="assets/3.jpg" />
  <img src="assets/4.jpg" />
  <img src="assets/5.jpg" />
</div>

<script type="text/javascript">
  jQuery(document).ready(function($) {

    $('.opengallery').click(function(ev) {

      var gal = $(this).attr("href");
      var imgs = [];

      $(gal + " img").each(function() {
        imgs.push( $(this).attr("src") );
      });

      $.lightbox(imgs);

      ev.preventDefault();
    });

  });
</script>
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey