Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Dave Smith | 08/10/10 at 11:31am Edit

(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

• 
  Last edited:
  08/10/10
  11:41am
  Galen Gidman says:

  Hello. Does the image size ever vary?
  
  Edit: Ok, took a better look at the site and understand your problem now. Working on the answer.

  Previous versions of this answer: 08/10/10 at 11:41am
• 
  Last edited:
  08/10/10
  11:42am
  David Navarrete says:

  is posible resize the image?, i have a plugin that resize the imagen with the width or height.
• 
  Last edited:
  08/10/10
  11:44am
  Pippin Williamson says:

  If you don't mind getting your hands a little dirty, try adapting this equal heights jquery solution, but to equal widths.
  
  http://www.cssnewbie.com/equal-height-columns-with-jquery/
• 
  Last edited:
  08/10/10
  12:03pm
  Utkarsh Kukreti says:

  Try this js (worked from firebug)
  
  

  jQuery('.box').each(function(){
  
  	var width = jQuery(this).find('img').width();
  
  	jQuery(this).width(width);
  
  });

  • 08/10/10 11:55am
    
    Utkarsh Kukreti says:

    Also, your columnWidth should be like
    
    

    columnWidth: '100%',

    
    
    with the quotes.

  • 08/10/10 11:58am
    
    Dave Smith says:

    not worked... here's the js in full with your edit included at bottom:
    

    jQuery.noConflict();
    
    
    
    jQuery(function(){
    
    	jQuery('span.view-large').hide();
    
    	myOp = 1;
    
    	
    
    	jQuery(window).load(function(){
    
    		
    
    		// Grid jQuery plugin: http://desandro.com/resources/jquery-masonry/
    
    		
    
    		jQuery('#sort').masonry({ 
    
    			columnWidth: 100%,
    
    			animate: true,
    
    			itemSelector: '.box'
    
    			//easing: 'linear'
    
    		}, 
    
    		function() { jQuery(this).css({
    
    			margin: '10px'
    
    			});
    
    		});
    
    		
    
    		// MouseOver Events
    
    		
    
    		jQuery('.box').hover(function(){
    
    			jQuery('img', this).fadeTo("fast", 0.75).addClass('box-hover');
    
    			jQuery('span.view-large', this).fadeTo("fast", 1)},
    
    			function(){
    
    			jQuery('img', this).fadeTo("fast", myOp).removeClass('box-hover');
    
    			jQuery('span.view-large', this).fadeTo("fast", 0)
    
    		});
    
    		
    
    		// Colorbox
    
    		jQuery("a[rel='gallery']").colorbox();
    
    		
    
    	});
    
    	// box width edit
    
    	jQuery('.box').each(function(){
    
    
    
    	var width = jQuery(this).find('img').width();
    
    
    
    	jQuery(this).width(width);
    
    
    
    });
    
    });
    
    

    
    

  • 08/10/10 11:59am
    
    Dave Smith says:

    sorry, didn't see your edit. now included quotes, it seems to be working fine. nice work, thanks for your help.

  • 08/10/10 12:00pm
    
    Utkarsh Kukreti says:

    It breaks due to the 100%. Put that in quotes.

  • 08/10/10 12:02pm
    
    Dave Smith says:

    erm, i needed to add the auto, instead of the '100%'. gonna split the money between you and Jonah, thanks for your efforts.

• 
  Last edited:
  08/10/10
  12:03pm
  Jonah Schulte says:

  Actually, the correct fix seems to be to use "auto" instead of "100%" for the columnWidth along with Utkarsh's jQuery solution. If you replace your script.js file with the following code it should work without error:
  
  

  
  
  jQuery.noConflict();
  
  
  
  jQuery(function(){
  
  	jQuery('span.view-large').hide();
  
  	myOp = 1;
  
  	
  
  	jQuery(window).load(function(){
  
  		
  
  		// Grid jQuery plugin: http://desandro.com/resources/jquery-masonry/
  
  		
  
  		jQuery('#sort').masonry({ 
  
  			columnWidth: auto,
  
  			animate: true,
  
  			itemSelector: '.box'
  
  			//easing: 'linear'
  
  		}, 
  
  		function() { jQuery(this).css({
  
  			margin: '10px'
  
  			});
  
  		});
  
  		
  
  		// MouseOver Events
  
  		
  
  		jQuery('.box').hover(function(){
  
  			jQuery('img', this).fadeTo("fast", 0.75).addClass('box-hover');
  
  			jQuery('span.view-large', this).fadeTo("fast", 1)},
  
  			function(){
  
  			jQuery('img', this).fadeTo("fast", myOp).removeClass('box-hover');
  
  			jQuery('span.view-large', this).fadeTo("fast", 0)
  
  		});
  
  		
  
  		// Colorbox
  
  		jQuery("a[rel='gallery']").colorbox();
  
  		
  
  	});
  
  });
  
  
  
  jQuery(document).ready(function(){
  
  	jQuery('div.box').each(function(){
  
  		var width = jQuery(this).find('img').width();
  
  		jQuery(this).width(width);
  
  	});
  
  });
  
  
  
  

  
  
  With width set to 100%, the layout becomes broken when you resize the browser window.

  Previous versions of this answer: 08/10/10 at 11:58am

This question has expired.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.