lightbox auto-load with lightmodal : #modalContainer is not displayed

You can make lightbox2 auto-load by following the instructions at http://drupal.org/node/316727 However instead of having $messages, instead include the html for the signup form. If the form is a drupal form, you could probably use drupal_get_form() to retrieve it. You will also need to replace the <?php if ($show_messages && $messages): ?> with some other check to ensure you don't display the signup form to users who have already seen the signup form.

<?php if ($user_first_visit): ?>
  <div id="lightboxAutoModal" style="display: none;" rel="lightmodal[|height: 200px;]"><?php print drupal_get_form('mysignupform_id'); ?></div>
<?php endif; ?>

Use the rel attribute to modify the lightbox size and width. Also, the instructions say to add it to your page.tpl.php. If you just want this to happen on specific page, e.g. the front page, then you can just use page-front.tpl.php or page-node-1234.tpl.php

I'm pretty sure this is in the 6.x-1.8 release, but if not you will need to use the dev version for now.

Cheers,
Stella

Trying this to get to work but it looks like the lightbox is not triggered by the hidden div.
The simple popup for messages is even not working.
Has anyone a solution to trigger the lightbox without the use of a link or any onclick event?

Thanks

@erald: well is the lightbox.js file being loaded on the page?

Yes it is. I just tried to do the basic and put in page-tpl.php just after the body this container;

<div id="lightboxAutoModal" rel="lightmodal[|height: 50px;]" style="display: none;" ><?php print $messages; ?></div>

I took care off course something was in $messages and it displayed the message on the page but no lightbox. The lightbox.js is loaded for sure since on the same page I am using it for some images and even using lightframe on a link and those work perfectly.
Normally it gets the class lightbox-processed but in this case it does not.
I tried also to use lightframe instead of lightmodal but no luck.

Is it not so that lightframe looks for the 'a' or 'img' tag to process those?

Any chance you could send me a link to the site where this is happening? My contact form is enabled if you wish to do so privately.

This does not work on the latest stable release. It does, however, work with the latest -DEV release.

I'm also having trouble getting text to appear unless I put it in a div within the lightbox div. So it has to go like this.

<div id="lightboxAutoModal" rel="lightmodal[|height: 250px;]" style="display: none;"><div class="modalmessage"><?php print $string;?></div></div>

It also seems to be appearing outside of the modal window, and if I adjust the browser scrollbars the text always moves around the lightbox, while the lightbox remains fixed in place.

Here is the code I have placed right below the tag on my page-front.tpl.php file:

<?php print top_messages();?>
<?php $string = "String to appear to user if they are not logged in. For testing purposes, there are no access conditionals yet to determine whether or not the user should see this or not.";?>

  <div id="lightboxAutoModal" rel="lightmodal[|height: 250px;]" style="display: none;"><div class="modalmessage"><?php print $string;?></div></div>

Does anyone have any suggestions on how to solve this?

There are numerous issues floating around regarding this problem, but none seem to have any sort of conclusive solution.

Thanks!

Hi, it appears that the problem comes from the first div in the lightbox id="modalContainer" as it has got a style="display: none" property. When I remove this in firbug, my content is displayed properly. display: inline is even better.

Why is the lightbox content not displayed by default and how could we change that ?

Line 137 in lightbox. js, where the divs are created there is :

var modal = '<div id="modalContainer" style="display: none;"></div>';

Then I had a guess about how the code deals with the visibility of each div depending on which type of lightbox it is. (I don't code in javascript at all) and found lines 608 to 642 :

// showData()
  // Display image and begin preloading neighbors.
  showData: function() {
    $('#loading').hide();

    if (Lightbox.isLightframe || Lightbox.isVideo || Lightbox.isModal) {
      Lightbox.updateDetails();
      if (Lightbox.isLightframe) {
        $('#frameContainer').show();
        if ($.browser.safari) {
          $('#lightboxFrame').css({'zIndex': '10500'}).show();
        }
        else {
          $('#lightboxFrame').css({'zIndex': '10500'}).fadeIn(Lightbox.fadeInSpeed);
        }
      }
      else {
        if (Lightbox.isVideo) {
          $("#modalContainer").html(Lightbox.modalHTML).click(function(){return false;}).css('zIndex', '10500').show();
        }
        else {
          var src = unescape(Lightbox.imageArray[Lightbox.activeImage][0]);
          if (Lightbox.imageArray[Lightbox.activeImage][4]) {
            $(src).appendTo("#modalContainer");
          }
          else {
            // Use a callback to show the new image, otherwise you get flicker.
            $("#modalContainer").hide().load(src, function () {$('#modalContainer').css({'zIndex': '10500'}).show();});
          }
          $('#modalContainer').unbind('click');
        }
        // This might be needed in the Lightframe section above.
        //$('#modalContainer').css({'zIndex': '10500'}).show();
      }
    }

I wonder if there is some solution in this last comment ?

I used a quick fix in the meantime in my theme.css :
#modalContainer {display: inline-block !important;}

But I'm looking forward to the solution of this problem, as I can't get it to work no matter what ugly tests I try to do to hack the module code.

Oh I nearly forgot about that, I'm using a custom formatter for a video filefield, in order to launch a lightbox on homepage load. And I want swftools to take care of the video instead of lightvideo. In views I just have the video field and some filters.

Here's the code I use for my custom formatter :

$swf_video_url = '';
$swf_video = '';
$introvideo = '';

if ($element['#item']['filepath'])
{
 $swf_video_url = 'http://'.$_SERVER['HTTP_HOST'].'/'.$element['#item']['filepath'].'';
   
 $swf_video = swf("$swf_video_url",
         array(
           'params' => array(
             'height' => '480',
             'width' => '570',
             'bgcolor' => '#FFFFFF'
           )
         )
       );
  
 $introvideo = '
     <div id="lightboxAutoModal" style="display: none;" rel="lightmodal[|width:570px; height:496px;]">
          <div class="lightbox-inner" style="display: inline;>'.$swf_video.'</div>
     </div>
      
';}

return $introvideo; 

This code is OK, I tested it and it works fine (with swf tools using flowplayer).

The last problem is the "display: none;" mentioned above.

Actually this works only with the dev version.

Oh and :
<div class="lightbox-inner" style="display: inline;></div>
in the above is of no use, I tried it after reading #9 comment, but that doesn't solve the problem, this means you can get rid of it.

Hey Jerome F:

One of those rare moments where something I am looking for is just been posted...I think.

So just to make sure: This custom formatter you posted above is to allow Lightbox2 to use SWFTools for handling the video rather than use its own FLV player (as set in the L2 config)?

I have L2 working with Flowplayer when used as the default L2 video player, which of course bypasses all FP's nice file detection. In addition to that I want to be able to use SWFobject2 within SWFTools so I can feed an alternate video file for non-flash UI' such as iPhone/iPad.

Flowplayer will handle all flv's and mp4's (with H.264) while Quicktime will handle all mov's natively.

Right now I have whereby it can use either, but not BOTH at the same time as alternates.

@kanary : Thanks, its good to see someone find it usefull.

Yes first this custom formatter can use swf tools in lightbox, but there's this display:none problem and I'm not able to fix it myself, that's way too difficult for me at the moment as a good understanding of lightbox2 module, javascript and patching skills are required. I hope that Stella, the skillfull maintainer of L2 or someone who knows that kind of stuff could find this post and have a look. But that takes time and I know they are very busy, so we have to be patient. For the moment the css !important allows you to see the result, not in IE though.

I created a custom formatter to handle quicktime, as the video module formatter doesn't work as expected either. Here's the issue.
http://drupal.org/node/750596

Mix my two codes and you get a quicktime movie in a lightbox with a CCK formatter.

If you make any progress in getting those working alternatively with browscap or something like that, please let me know, that would be a great feature.

Jerome:

This custom formater....

Are you using the Custom Formater module and this is a file you wrote for it?

@kannary : Yes (you can use php code in advanced mode in this module)

The lightframe and the other lightboxes works ok, that confirms there's something missing to handle the visibility of the lightmodal in the code.

according to this issue this should be fixed though it doesn't seem to be : http://drupal.org/node/372115

This code in the issue :

else if (Lightbox.isModal) {
      $('#modalContainer').hide();
    }

Is very similar to lines 920 to 924 in lightbox.js

else if (Lightbox.isVideo || Lightbox.isModal) {
      if (!Lightbox.auto_modal) {
        $('#modalContainer').hide().html("");
      }
      Lightbox.auto_modal = false;

This issue seems also related http://drupal.org/node/457482

This css hack hides the #imageContainer as it is displayed below the #modalContainer

#modalContainer {display: inline-block !important;}
I had to use an even more precise css selector.

I need help with this topic please.

Clear & short sum up of the issue :

The instructions to make a lightmodal automatically pop up on page load are right in http://drupal.org/node/316727 and in stella's #1
but there must be something missing in lightbox.js even in the last dev version that makes the div #modalContainer not displayed. Therefore the content of the lightbox is hidden.

I am having the same problem with the latest dev version. The lightbox pops up, but the content within it is blank.

subscribe

subscribing

Ok, I've been basically coding via trial and error for the past few hours and have come up with something that might be useful (though I am not a javascript programmer, so take this with a grain of salt).

I changed lightbox.js line 442 from:

$('#frameContainer, #modalContainer, #lightboxImage').hide();

to:

$('#frameContainer, #lightboxImage').hide();
$('#modalContainer').show();

My message is now displaying. I haven't performed any other testing on this yet, but wanted to add this to the discussion for anyone else who is interested.

subscribe

I think this might be a duplicate of #370883: Unable to get SWF working, at least for video but the same fix should fix this. However note you can't do this:

<div id="lightboxAutoModal"><?php print $messages; ?></div>

You have to do:

<div id="lightboxAutoModal"><div><?php print $messages; ?></div></div>