I have a sort of "hidden" login link in the body of my site. if the user clicks on it, lightbox shows up with login form. If the user (now logged in) clicks on it again, it shows a blank lightbox.

I would like to find a way to display a short message reading "already logged in. logout?"

I have managed to do this all using php, except for the message in a lightbox. I can think of two ways of doing this, both of which have problems:

#1 (messy): create a blank html in my theme folder with the message in it, and use lightframe to show the page.

#2 (the way I am doing it now):

using this code:
<a href="" rel="lightmodal[|width:300px; height:0px;][Already Logged in. &lt;a href=&quot;logout&quot;&gt;Logout?&lt;/a&gt;]">user login</a>
i.e. the caption is the message I want to display, with a logout link embedded in it.

only problem is, the lightbox that shows up has a horizontal scroll bar at the top because it is all that is left of the main page shown when i defined a height of 0px. Not to mention that it is loading the entire front page only because i HAVE to define something to load, and the front page is something. screenshot attached.

Other than the page loading in the lightbox unneccesarily and the horizontal scroll bar, the caption displays exactly as I want it to. I guess my question then becomes: Is there any way to display a lightbox with JUST a caption in it? I.e. no actual content?

thanks for a wonderful module by the way.

caption message.png146.61 KBajlowndes
Members fund testing for the Drupal project. Drupal Association Learn more


stella’s picture

Category: task » support

Try this:

  • Create a (hidden?) div on your page containing the info you'd like to display in the lightbox.
  • Create a link to open this div in the lightbox like so:
    <a href="/path/to/page/with/div   #myDiv > *" rel="lightmodal">show contents of hidden div with the id "myDiv"</a>

I can't remember exactly, but I *think* the contents of "myDiv" may also need to be in a div, i.e. something like:

<div id ="myDiv">
  <div class="foo">
    My content goes here.
ajlowndes’s picture

can't get that working. the div i created is the same as the example you just gave me. only, when I link to it, it either shows the whole page in a lightbox, or nothing at all (in a lightbox).

Also, what do I put in as /path/to/page/with/div if the div is on the same page? I just typed an extra div into the body of my page to test. As I say, I tried simply href="#myDiv" (this shows the whole page in a lightbox - yes lightmodal is in the rel position), and I tried href="index.html#myDiv" (brings up nothing at all in a lightbox), and I even tried href="index.php#myDiv". how else do i link to a div on the page I am on?

Also, what's the "> *" for?

stella’s picture

<a href="index.html#myDiv"> is incorrect. There is a space between them and you need the > * (with spaces) to select the contents of my div - it is a jquery selector. As I said above your div needs the id "myDiv" and it may also need another div directly within it containing the contents.

ajlowndes’s picture

I think i am really stupid, coz I just cannot get it to work. This is my code:

here is a lightbox that will say <a href="#myDiv > *" rel="lightmodal[|height:100px;width:150px]">"Hello Aaron"</a>
what about just the <a href="#myDiv">div</a>?

<div id="myDiv">
    Hello Aaron.

which shows a lightbox (100px x 150px) with the entire page in it for the first link, and properly scrolls down to "Hello Aaron" for the second link. I haven't hidden the myDiv yet - I will tackle that problem later, after I get this part working.

thanks for your expertise

stella’s picture

Can you try putting the current url in front of #myDiv? i.e. try

here is a lightbox that will say <a href="/path/to/current/page  #myDiv > *" rel="lightmodal[|height:100px;width:150px]">"Hello Aaron"</a>

Just manually set the /path/to/current/page for now, you can add JS to figure out the current url later.

ajlowndes’s picture

great! that works - i put

and here is a lightbox that will say <a href="node/1 #myDiv > *" rel="lightmodal[|height:100px;width:150px]">"Hello Aaron"</a>

so I guess that's an issue with the way lightbox looks for id tags? I need to define what page the div is on. do i need to create a new js function to do that? I don't know much (yet) about js.

stella’s picture

Status: Active » Fixed

it's not an issue with lightbox, that's by design. You can find out the url of the current page by using window.location or document.location.href.

ajlowndes’s picture

Status: Fixed » Active

actually I started to use void(0) in the href field instead, because the caption always loads faster than content. like so:

<a href="void(0)" rel="lightmodal[|width:100px; height:0px;][Already Logged in. &lt;a href=&quot;logout&quot;&gt;Logout?&lt;/a&gt;]">user login</a>

I know it is supposed to be href="javascript:void(0);" in there, but if I do that the lightbox freezes after the width/height animation in safari. in firefox it's fine. is this a bug?

stella’s picture

Status: Active » Fixed

no it's not a bug, it's not intended to work in that way.

ajlowndes’s picture

okay I believe your comment about it not intending to work that way. also it's kind of lazy and prone to problems. so back to trying to define the current url, add a div to it and put it into my <a> link.

been trying for bloody ages, and all I have is the variable declared properly in javascript and a function to call it:

in <head>

	<script type="text/javascript"><!--
	var sid=document.URL + " #myDiv > *";
	function aaron(){
	// --></script>

which according to my tests creates it correctly, but the href tag in the body doesn't work:

in <body>

<a href="javascript:aaron();" rel="lightmodal[|height:100px;width:150px]">"Hello Aaron"</a>

still a blank lightbox. what am I doing wrong?

ajlowndes’s picture

got it
don't need anything at all in the head, just put this in the body:

<script type=text/javascript>
document.write('<a href="' + document.URL + " #myDiv > *" + '" rel="lightmodal[|height:100px;width:150px]">"Hello Aaron"</a>');
ajlowndes’s picture

Finally, so to insert this into the if...then statement (made by PHP) you do this:
nothing in head, but put this in the body:

this is the home page.
here is a 
global $user;
if ($user->uid) {
        echo "<script type=text/javascript>document.write('<a href=\"' + document.URL + \" #myDiv > *\" + '\" rel=\"lightmodal[|height:100px;width:150px]\">user login</a>')</script>";
else {
  print t('<a href="user/login/lightbox2" rel="lightmodal[|width:300px; height:200px;]">user login</a>');
} ?>

<div id="myDiv" style="visibility:hidden">
already logged in, <a href="logout">logout?</a>

this creates a line of text that displays "here is a user login" with "user login" linked to (funnily enough) user login. if you click on the link, you can login with the normal lightbox form. if user is already logged in, displays a lightbox with "already logged in, logout?" in it. "logout" here is linked to logout.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Erik Seifert’s picture

Version: 6.x-1.9 » 6.x-1.11

Do not work in Lightbox 6-1.11

Any changes to the code ?

melixann’s picture

Hi! I was able to show the text the way you explained, but height and width are not working.

here is my code:

My text <strong><a href="node/2 #mymodal > *" rel="lightmodal[|height:50px; width:50px;]" style="color: rgb(7, 130, 193);">My link</a> </strong>

<div id="mymodal" style="display: none">
	<div>Hello Annamaria</div>

Thank you for your help.