Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Lightbox - add link inside caption

  1. #1
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default 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!
    Last edited by jscheuer1; 07-27-2012 at 04:27 AM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Slimbox not working

    Quote Originally Posted by jscheuer1 View Post
    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!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by keyboard; 10-03-2012 at 03:15 AM. Reason: Fixed Link

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,136
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •