jQuery Put contents of 'title' in div when thumb is clicked

[marilynn.fowler]

I found a tutorial to make a lightbox from scratch. I've tweaked everything I wanted, but I can't seem to get the 'title' text to appear in the "blurb" div. I've tried a bunch of different ways, but the closest I've come is on line 93 (the first commented out line at the bottom), when at least it prints out "undefined." The link that has the title info I want has a class of 'selected' attached to it dynamically. What do I need to do and where do I need to do it?

$(document).ready(function(){
	lightbox();
});

function lightbox(){
	var links = $('a[rel^=lightbox]');
	var overlay = $(jQuery('<div id="overlay" style="display: none"></div>'));
	var container = $(jQuery('<div id="lightbox" style="display: none"></div>'));
	var target = $(jQuery('<div class="target"></div>'));
	var prev = $(jQuery('<a href="#prev" class="prev"><span>Previous</span></a>'));
	var next = $(jQuery('<a href="#next" class="next"><span>Next</span></a>'));
	var closer = $(jQuery('<a href="#close" class="close"><span>Close</span></a>'));
	var blurb = $(jQuery('<div id="blurb"></div>'));

	$('body').append(overlay).append(container);
	container.append(target).append(prev).append(next).append(blurb).append(closer);
	container.show().css({'top':Math.round((($(window).height() > window.innerHeight ? window.innerHeight:$(window).height()) - container.outerHeight()) / 2) + 'px','left':Math.round(($(window).width()- container.outerWidth()) / 2)+'px','margin-top':0,'margin-left':0}).hide();

	closer.add(overlay).click(function(c){
		c.preventDefault();
		overlay.add(container).fadeOut('normal');
	});

	prev.add(next).click(function(c){
		c.preventDefault();
		var current = parseInt(links.filter('.selected').attr('picIndex'),10);
		var to = $(this).is('.prev')?links.eq(current- 1):links.eq(current+ 1);
		
		if(!to.size()){
			to = $(this).is('.prev')?links.eq(links.size()- 1):links.eq(0);
		}
		
		if(to.size()){
			to.click();
		}
	});

	links.each(function(index){
		var linker = $(this);
		
		linker.click(function(c){
			c.preventDefault();
			open(linker.attr('href'));
			links.filter('.selected').removeClass('selected');
			linker.addClass('selected');
		});
		
		linker.attr({'picIndex':index});
	});
	
	var open=function(url){
		if(container.is(':visible')){
			target.children().fadeOut('normal',function(){target.children().remove();loadImage(url);});
		}
		else{
			target.children().remove();
			overlay.add(container).fadeIn('normal',function(){
				loadImage(url);
			});
		}
	}
	
	var loadImage=function(url){
		if(container.is('.loading')){
			return;
		}
		
		container.addClass('loading');
		var img = new Image();
		img.onload = function(){
			img.style.display = 'none';
			var maxWidth = ($(window).width()- parseInt(container.css('padding-left'),10)- parseInt(container.css('padding-right'),10))- 20;var maxHeight=(($(window).height()>window.innerHeight?window.innerHeight:$(window).height())- parseInt(container.css('padding-top'),10)- parseInt(container.css('padding-bottom'),10))- 20;
			
			if(img.width > maxWidth || img.height > maxHeight) {
				var ratio = img.width/img.height;
				
				if(img.height >= maxHeight) {
					img.height = maxHeight;
					img.width = maxHeight * ratio;
				}
				else {
					img.width = maxWidth;
					img.height = maxWidth*ratio;
				}
			}
			container.animate({'width':img.width,'height':img.height,'top':Math.round((($(window).height()>window.innerHeight?window.innerHeight:$(window).height())- img.height - parseInt(container.css('padding-top'),10)- parseInt(container.css('padding-bottom'),10))/2)+'px','left':Math.round(($(window).width()- img.width- parseInt(container.css('padding-left'),10) - parseInt(container.css('padding-right'),10))/2)+'px'},'normal',function(){target.append(img);$(img).fadeIn('normal',function(){container.removeClass('loading');
			next.add(prev).css('height', img.height);
			blurb.css('width', img.width - 82);
			});
		}
	)}
	img.src = url;
	//document.getElementById('blurb').innerHTML = $('a.selected').attr('title');
	//$(jQuery('#blurb').text=$('a.selected').attr('title'));
	}
}

[VIPStephan]

Why are you using plain JS methods when you have jQuery? I also don’t understand what that $(jQuery('… stuff is supposed to do. How old is that tutorial?
The second commented out line is close already.

$('#blurb').text($('a.selected').attr('title'));

[marilynn.fowler]

the tutorial is from 2009. The additional jQuery stuff is I think in case you have other stuff that uses the $ sign, like PHP or other frameworks.

None of my attempts were successful, and I don't know if it is because of the syntax or because it's out of scope. I only know that I only made something appear in the blurb div one time (and that was undefined).

[marilynn.fowler]

VIPSteven, I tried it but nothing appears in the blurb div. It seems like it should work, so I'm at a loss.

[VIPStephan]

It would help a lot to see a live example.

[marilynn.fowler]

http://www.vicesbyproxy.com/staging/...n/jewelry.html

FYI, the blurb is supposed to appear bottom left.

[venegal]

First of all, $(jQuery()) doesn't make any sense. If $ is not being overwritten by another framework, $ is the same as jQuery, so this is redundant. If it is overwritten, the new $ will certainly not expect a jQuery object as parameter, so this will throw an error.

Second, your problem is that your code works under the assumption that there is only one element matching $('a.selected'), which is not true. You're also using that selected class for your main navigation. If you try to access an attribute of a jQuery collection, you'll get that attribute value from the first element of that collection. Since the main navigation comes before that other stuff in your HTML, the first link element with class selected will be that one, and since it doesn't have a title attribute set, nothing happens.

[marilynn.fowler]

[smack on my forehead!]
HOORAY! You both just solved my problem for me. I also pulled out the stuff you both took issue with and it still works.

My day is now improved. Thank you both