PDA

View Full Version : lightbox with link capability


WotNow
02-15-2011, 02:05 AM
Hi I have designed a site that has lightbox functionality which works really well with images but I need the same sort of display that has text and allows for the user to click links to external sites and email.

Is this possible? Thanks

domedia
02-15-2011, 12:35 PM
I was under the impression that Lightbox did that.

gentleone
02-15-2011, 01:23 PM
Lightbox is only for images.
Look into colorbox. This one supports HTML (inline or through AJAX)
http://colorpowered.com/colorbox/

WotNow
02-15-2011, 10:08 PM
Hi thanks for your responses. I am looking at colorbox now but thickbox seems to be able to handle inline content .. lightbox is only for images.

gentleone
02-15-2011, 10:16 PM
Thickbox is pretty old and is no longer maintained by the developer. Better to look into colorbox.

Ricky55
02-16-2011, 12:51 AM
This should help you use colorbox.

http://vimeo.com/17454106

Only covers the very basics but its not hard to use anyway.

It's the best out there IMO and also looks the best.

dubaco
02-16-2011, 11:33 AM
It's the best out there IMO and also looks the best.

I'll second that, setup is quite straightforward - BUT - if, like me, you encounter problems with the images, upload them in binary - no explanation why, just that it would have saved me a lot of time if I'd have known that!

Ricky55
02-16-2011, 08:21 PM
Aye it was an unusually one that Dubaco.

WotNow
02-17-2011, 02:02 AM
Thanks everyone for your help. I have been into shadowbox and got the images working but cant get the html part to work. So after reading your recommendations and watching the link supplied by Ricky I will have a go at color box. Unfortunately the video only deals with images. The colorbox site does not offer me much information. Has anyone used this for html content and if so do you have any more detailed information?

My goal is to click on text in my html page "Click here", this activates the colorbox and displays text which has a link to an external site and a link to a mail editor.

gentleone
02-17-2011, 05:59 AM
You have to do then something like this:
in your head underneath the javascript files jQuery and Colorbox:

<head>
<script type="text/javascript">
$(document).ready(function() {
$("a #button").colorbox({inline:true, href:"#modal"});
});
</script>
</head>
Your click here link:

<p>this is some text with an inline link to fire colorbox. <a href="#" id="button">Click here</a></p>
At the bottom, just before your closing body tag, the inline content div#modal which you set in your CSS to display none:

<div id="modal">all the content in here</div>

WotNow
02-17-2011, 09:07 AM
Thanks for that gentle one. I still havent quite worked out how to do it. I am getting confused as to which css to use. Example 1 to 5 are all different css but the html pages are the same. If I click on Inline Html it displays the overlay box but the view source of this page ..
&lt;p><a class='example8' href="# (http://www.dreamweaverclub.com/forum/view-source:http://colorpowered.com/colorbox/core/example1/index.html#)">Inline HTML</a></p>

says example 8 and yet there is no example 8. Sorry for being such a newbie on this,

gentleone
02-17-2011, 10:24 AM
Colorbox comes with 5 different skins, so that mean 5 different CSS/images, Just pick the one that you like or suits best to your design and use the corresponding CSS and images for that skin.

The jQuery function for example8 is in the <head>. Underneath the javascript call to jquery.colorbox.js, you see document ready function for all the examples. Example8 is in there too.

$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});

All the way at the bottom of the source you see div #inline_example1

WotNow
02-17-2011, 10:35 PM
Thanks .. but still not working. This is the code I have so far.

In the head
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("a #button").colorbox({inline:true, href:"#modal"});
});
</script>

In the body

<p><a href="#" id="button">Click here</a> to complete the blah now.&nbsp; Blah blah.</p>


<div id="modal" style='display:none'>

<p>blah blah</p>

<p>blah blah</p>

<p>Please contact <a href="mailto:blahblah.net.au">info@blahblah.net.au</a> with any questions.</p>

<p>blah blah.</p>

<p><a href="http://blah.blah.com/blah/blah?id=blah">Start Survey</a></p>

</div><!--end of modal-->

Should there be another div inside this div as in the example? I have tried it without the display:none. I really appreciate you getting me through this.:smile:

gentleone
02-18-2011, 10:01 AM
Yep... sorry my fault. The div #modal should be in a parent div that is set to display: none.

<div style="display: none">
<div id="modal">
<p>modal content</p>
</div>
</div>

WotNow
02-18-2011, 11:01 AM
:cry: Thought great but still not working. Getting so frustrated .. know I am doing something stoopid. Got the images to work .. so I know its not that sort of problem. Put the extra div around .. been over and over the code and the examples from color box. I will post the code again with the hope that you can see what I cannot.

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("a[rel='example1']").colorbox();
$("a #button").colorbox({inline:true, href:"#modal"});
});
</script>

the body

<p><a href="#" id="button">Click here</a> blah blah</p>

<div style="display:none">
<div id="modal">

<p>blah blah</p>

<p>blah blah</p>

<p>Please contact <a href="mailto:***@***.net.au">***@***.net.au</a> with any questions.</p>

<p>blah blah</p>

<p><a href="http://*****">blah blah</a></p>

</div><!--end of modal-->
</div>

Thanks for your patience.

gentleone
02-18-2011, 07:29 PM
I don't see anything weird. Do you have more javascripts or jQuery plugins other then colorbox on the page?

WotNow
02-18-2011, 07:57 PM
Hi .. yes I do but the colorbox javascript is working for the images I have applied to it. Thought I must have missed a semicolon or something. I have systematically commented out all the other javascript on the page until there is only colorbox left and each time I tested it still didnt work:confused:

gentleone
02-18-2011, 08:23 PM
can you put the page online?

WotNow
02-18-2011, 09:10 PM
No .. i dont think client would like the site to be public and plus I am testing this locally.

WotNow
02-19-2011, 10:33 AM
Are you unable to help any further?

gentleone
02-19-2011, 12:56 PM
Are you unable to help any further?
Not if I can't see what else you've got on that page. Can you send the page with all the related files (css, images, js, etc.) in a zip file to info[at]gentlemedia[dot]nl then I will have a look.

gentleone
02-19-2011, 08:23 PM
It was something really simple and I overlooked it in the first place. It was a bloody space in the colorbox function.
This will work. I also added a width of 50% otherwise the modal looks a bit too width.

$("a#button").colorbox({width:"50%", inline:true, href:"#modal"});

WotNow
02-19-2011, 08:45 PM
U r awesome, thanks so much. Knew it was something like that. Stoopid space.