Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

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

    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?

    Code:
    $(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'));
    	}
    }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,472
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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.
    Code:
    $('#blurb').text($('a.selected').attr('title'));

  • Users who have thanked VIPStephan for this post:

    marilynn.fowler (10-28-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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).
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    VIPSteven, I tried it but nothing appears in the blurb div. It seems like it should work, so I'm at a loss.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,472
    Thanks
    6
    Thanked 980 Times in 953 Posts
    It would help a lot to see a live example.

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    http://www.vicesbyproxy.com/staging/...n/jewelry.html

    FYI, the blurb is supposed to appear bottom left.
    Last edited by marilynn.fowler; 10-28-2011 at 09:59 AM.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #7
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • Users who have thanked venegal for this post:

    marilynn.fowler (10-28-2011)

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    [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
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

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