Lightbox - add link inside caption

1) Script Title: :: Lightbox image viewer 2.03a

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

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

Code:

---

<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!

Two things:

1. That script is way out of date.
   
   
2. 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.

Thanks! Is there another script you reccommend that has similar functionality and allows for a link within the caption?

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.

Quote:

---

Originally Posted by jscheuer1

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!

That page doesn't have slimbox on it. It does have lightbox on it, that:

Code:

---

<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:

Code:

---

<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.

Oh that was completely my mistake - I was testing and sent you the wrong URL.
It is actually at http://www.bellami-designboutique.co...x-slimbox.html

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

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:

Code:

---

. . . 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.

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!!!

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:

Code:

---

<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:

Code:

---

// 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:

Code:

---

(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:

Code:

---

<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.