PDA

View Full Version : Lightbox - add link inside caption



katebellami
07-27-2012, 03:16 AM
1) Script Title: :: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: I would like to add a link inside a caption. Here is the code I have now.


<a href="images/slides/twobirds-logo.png" rel="lightbox[tbo]" data-title="Two Birds Organizing Logo<br />&nbsp;<br /> "><img src="images/thumb-tbo.png" alt="Two Birds Organizing logo" style="border:none; margin:0px; margin-right:16px;" /></a>

I would like the caption to say this:
Two Birds Organizing Logo
www.twobirdsorganizing.com (will be linked to http://www.twobirdsorganizing.com target="newwin")

Thanks!

jscheuer1
07-27-2012, 03:40 AM
Two things:


That script is way out of date.


It doesn't use "data-title".


Lightbox 2.03a is intended to link the entire caption, which is taken from the lightbox link's title attribute. It (the title/caption) is linked to the URL given in the rel attribute of the lightbox link.

There's no target, and no provision for an image tag. Neither is there a data-title attribute. These are allowed in HTML 5 and can be used in older HTML if you don't mind using invalid HTML. Regardless, they're not used by Lightbox 2.03a unless you're using a modified copy.

So I'm thinking you're either using a modified copy of Lightbox 2.03a, or another script entirely.

If you're not already, I'd suggest using another script. The actual one would be in part determined by the look and feel you're after.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

katebellami
07-27-2012, 11:37 AM
Thanks! Is there another script you reccommend that has similar functionality and allows for a link within the caption?

jscheuer1
07-27-2012, 01:46 PM
I'd say install the jQuery based Slimbox2 as outlined here:

http://www.dynamicdrive.com/forums/blog.php?b=247

That way you can specify the caption in the rev attribute. It can be rich HTML with a linked image.

katebellami
08-29-2012, 04:15 PM
I'd say install the jQuery based Slimbox2 as outlined here:

http://www.dynamicdrive.com/forums/blog.php?b=247

That way you can specify the caption in the rev attribute. It can be rich HTML with a linked image.

Hi! It has been awhile, but I had to table this for a bit while on vacation and a move out of state :) I just set up slimbox, and the script looks like just what I am looking for. However, I can't seem to get it to work. I have gone through the code several times, and I can't figure out what is missing. When I click the images to open the slimbox viewer, it just goes to a new page for the image. I have it up in a test environment here:
http://www.bellami-designboutique.com/madme/
any help would be greatly appreciated - thanks!

jscheuer1
08-29-2012, 05:43 PM
That page doesn't have slimbox on it. It does have lightbox on it, that:


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


should be removed and slimbox installed.

Also get rid of this:


<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>

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

There's no browser in wide use today that requires it.

katebellami
08-30-2012, 02:52 AM
Oh that was completely my mistake - I was testing and sent you the wrong URL.
It is actually at http://www.bellami-designboutique.com/madme/index-slimbox.html

The photos are not appearing now, nor are the captions. Any ideas?

jscheuer1
08-30-2012, 04:09 AM
That's not the standard version of Slimbox 2. It has a custom visual theme for the buttons. And you either need the jQuery UI or you need to skip the fancy transition. Let's go with the UI. Add this script tag as shown:


. . . erty="og:site_name" content="Madison &amp Mi - a design house" />

<meta property="fb:admins" content="831950129" />




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />


</head>

That will get it working.

The browser cache may need to be cleared and/or the page refreshed to see changes.

It still could use improvement if you want to avoid using the title attribute (recommended). But let's see this working first.

katebellami
08-30-2012, 02:04 PM
Thanks! I need to make some tweaks to the css (font, div size for caption, border, etc) and options (I dont like the elastic transition). Once I get that all fixed up, I need to tackle formatting the caption text and adding linked URLs into them. I will keep you posted - as always, thank you!!!

jscheuer1
08-30-2012, 04:36 PM
Well, if you don't want the elastic transition and are willing to settle for the default which is a non-linear easing I believe, you don't need the UI. I would suggest it in fact. Get rid of:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

And in slimbox2.js replace:


// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({

loop: true,
overlayOpacity: 0.6,
resizeEasing: "easeOutElastic",
captionAnimationDuration: 400,
counterText: "Image {x} sur {y}",
closeKeys: [27, 70],
nextKeys: [39, 83]



}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}

with:


(function($){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
var opts = {
loop: true,
overlayOpacity: 0.6,
counterText: "Image {x} sur {y}",
closeKeys: [27, 70],
nextKeys: [39, 83]
}
$('*[href][rel^=lightbox]').live('click', function(e){
var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
if(rel === 'lightbox'){
$.slimbox(t.href, t.getAttribute('rev') || '', opts);
} else {
$('*[href][rel="' + rel + '"]').each(function(){
if($.inArray(this.href, hrefs) < 0){
if(t.href === this.href){index = hrefs.length;}
hrefs.push(this.href);
links.push([this.href, this.getAttribute('rev') || '']);
}
});
$.slimbox(links, index, opts);
}
e.preventDefault();
});
}
})(jQuery);

And in your lightbox triggers on the page, change title to rev:


<a href="images/slides/gnaana-book-1.jpg" rel="lightbox-gnaana_books" rev="We love everything Gnaana, so when they asked us to work with them on illustrating a set of children’s books, we jumped at the opportunity! Bindi Baby Animals and Bindi Baby Numbers combine traditional South Asian bindi designs with a modern illustrative style to create whimsical, fun cultural learning tools for young children.<br />&nbsp;<br />"><img src="images/thumb-gnanna-book.png" alt="gnaana children's book illustration" style="border:none; margin:0px; margin-right:16px;" /></a>

Now you can include links and other tags in them without them showing up on hover of the thumbnail.

katebellami
10-02-2012, 04:04 PM
the links don't seem to be working. how do I set them up inside of a rev tag? I would like the caption to say:

Wee Babe - branding and website
weebabe.com (this would link out to weebabe.com)
thanks!

jscheuer1
10-02-2012, 04:10 PM
Please include a link to the page on your site that contains the problematic code so we can check it out.

katebellami
10-03-2012, 12:39 AM
the site is at http://www.bellami-designboutique.com/madmi

The initial issue I was having was putting links within the captions, and now that I changed the script to jquery, it still doesnt seem to let me add links. thanks!

jscheuer1
10-03-2012, 02:19 AM
Looks good. All you have to do is add the link(s) you want. For example, where you have:


<a href="images/slides/weebabe-1.png" rel="lightbox-wb" rev="Wee Babe - branding + website<br />weebabe.com"><img src="images/thumb-wb.png" alt="Wee Babe" style="border:none; margin:0px; margin-right:16px;" /></a>

You can make that like so:


<a href="images/slides/weebabe-1.png" rel="lightbox-wb" rev="Wee Babe - branding + <a href='http://www.weebabe.com/'>website</a>"><img src="images/thumb-wb.png" alt="Wee Babe" style="border:none; margin:0px; margin-right:16px;" /></a>

Make sure to notice that the href attribute of the nested a tag there uses single quote (') delimiters:


href='http://www.weebabe.com/'

not:


href="http://www.weebabe.com/"

Do the same thing for target or anything else you want/need to put in there.

katebellami
10-03-2012, 11:37 AM
works like a charm - thanks!!

katebellami
11-26-2012, 08:49 PM
Unfortunately, I'm back! I started a new thread, but realized it probably best to continue this one since it is for the same script. It doesnt appear to be working on an iphone (have not checked ipad, but will tonight when I have it with me). When you click the thumbnail, rather than opening the lightbox viewer and having the ability to scroll through images, it just opens the image like a separate page.
here is the link to the live site: http://www.madisonandmi.com
thank you for all of your help!

jscheuer1
11-26-2012, 10:04 PM
SlimBox2 does not, nor do any other box/lightbox type scripts that I know of, work on mobile devices. At least with SlimBox2 they can see the large image and use their device's native controls for panning, enlargement and navigation. Many other scripts of this sort do not degrade as gracefully in mobile devices.

It's possible there are one or more lightbox type scripts out there that perform better on mobiles. I'm just not aware of any.

katebellami
11-26-2012, 11:25 PM
I know the original lightbox I was using works on mobile devices...maybe I just need to go back to that. But is there no way to put ahref links in the captions? That was all I needed, which led us to slimbox. any suggestions?

jscheuer1
11-26-2012, 11:39 PM
Are you 100% sure? If so, which exact version of which lightbox type script were you using?

If it really works on mobiles, I'm pretty sure it can have captions with links in them.

I mean a lot of them don't, but almost all can be made to.

katebellami
11-27-2012, 01:55 AM
The site that I have up that uses lightbox and works on iphone is: http://www.runawaybridedestinations.com/gallery.html
and here is the link to the lightbox script: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Basically, I want the same functionality as this lightbox but I would like to be able to add a link in the caption.
Any ideas? Thanks!

jscheuer1
11-27-2012, 04:31 AM
OK, if you're sure you're happy with that script, get rid of SlimBox2 completely and use this mod of lightbox203a's main .js file (right click and 'Save As'):

4839

Use all of the other files that go with lightbox2.03a, simply substitute the above for its lightbox.js file.

What this does is allow you to use this syntax for the link:


<a href="images/image-1.jpg" rel="lightbox" rev="Does <a href='http://www.google.com/'>Huh?</a> work?"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

In other words, just like we were doing with SlimBox2.

katebellami
12-04-2012, 08:38 PM
I had some urgent email issues with NetSol last week and this week that have consumed most of my time (steer clear of them!). Finally was able to focus on this and got it all set up. It works - a million thanks!!

katebellami
12-04-2012, 10:20 PM
One small issue I found. The lightbox doesnt extend the full length of the page, and it messes up the 100% on the div that it is located in. Is there a way to fix this? http://www.madisonandmi.com
thanks!

jscheuer1
12-06-2012, 05:24 AM
I'm not seeing any problem except in Opera. And there only if the window is resized or scrolled while the lightbox is open, and then the only problem is that the overlay doesn't extend the entire height of the page. What browser are you using and could you be specific about the problem. I mean the lightbox isn't supposed to be the full length of the page, only the overlay is, and I have no idea what to look for with:

" it messes up the 100% on the div that it is located in"

I'm not seeing anything that could be interpreted as that. I may have missed something, and/or may need to use a different browser.

So please describe exactly what to look for, and in which browser. Or if you've fixed the problem, let me know that as well.

If the problem is only in mobile devices, I might not be able to help as I have no mobile devices to test on. I will give it my best. But I need more specifics. I would point out though that you wanted this script because you said it was already perfect in mobiles. If that isn't really the case, you may want to go back to SlimBox2, as it at least degrades gracefully in mobiles.

katebellami
12-07-2012, 03:30 PM
Sorry I wasnt more clear :) I am in IE. Here is a link to a screenshot. http://www.madisonandmi.com/screenshot.png

jscheuer1
12-07-2012, 05:25 PM
In lightbox.css make the highlighted additions/changes:


#overlay{
position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100% !important;
height: 100% !important;
background-color: #000;
}

That won't be perfect. The overlay will cover the whole screen though. The only problem remaining is that if the window isn't tall enough and you scroll the window to see the bottom of the lightbox, you still get those horizontal lines at the bottom. But at least they're behind the overlay now. And, when you dismiss the lightbox, they go away. BTW, if you resize the window to see the bottom of the lightbox, there's no problem. And this won't work in IE 6. But I don't think we need to worry about that browser. Do you? I mean almost no one uses it these days.

Oh, and I don't think you need jQuery any more. If not, get rid of that script.