Strange bouncing on jQuery portfolio

HTML & CSS
1

Hello,

I am building a new jQuery portfolio for my website:

Link to Portfolio

I am using a simple jQuery function to fade in all the thumbnail images.

But for some reason each thumbnail bounces a few pixels when the image has finished loading.

Can anybody tell me how to fix this?

This is my CSS:


#portfolio td {padding: 0;}

#portfolio div {width: 240px; height: 150px; background: url(/images/project-frame.png) center center no-repeat; padding: 5px; margin-right: 70px;}

#portfolio div a {display: block; width: 240px; height: 150px; background: url(/images/loader.gif) center center no-repeat;}

#portfolio div a img {width: 240px; height: 150px;}

My jQuery function can be found here: Link to jQuery code (the one at the top)

Thanks to anyone who can help!

2

Just a guess here, but I wonder what would happen if you set heights on the table cells.

3

Hey Ralph,

Thanks for your help. I just set the height to 20ems, but not much has changed :frowning:

4

Oh and I just changed the <div> to a <span> tag because I think that’s more semantically correct? Correct me if I’m wrong…

5

OK, looks like I’ve the solution. There has to be a “display: block;” on the img for some reason. I have no idea why, but it works fine now…

6

Hmm, I think I’d use a div rather than span; but still, glad you got it working.

7

<div> and <span> have no semantic difference. It’s just that one is an inline element and one is a block, use either as you desire. It was probably whitespace under the image, vertical-align:bottom would have fixed it as well (maybe) along with float:left (maybe ;))

8

I just suggested div there because it is sitting alongside other block elements, and the span only worked because it was set to display: block. So I figured that a block element was preferable anyway.

9

I know, I was more referring to Pixelateurs’ post in regards to him saying he changed it to a span because he thought it was more semantic :).

Sorry for the confusion.

10

I would be asking why the blazes are you making the page-load take twice as long by even using jquery to load the sub-images in the first place? You want to use it for that bloated slow lightbox nonsense, fine - but wrapping the load of six measly thumbnails in javascript for no good reason? Waste of time.

Strip the javascripted nonsense for the ‘loading’ bit off those, use a normal lightbox effect on them, and load them flat… and if you rip out trying to add heights to the TD and instead just declare the width and height on the image, you’ll lose that up and down bouncing effect.

Losing the ‘table for nothing’ wouldn’t hurt much either… and the unneccessary classes couldn’t hurt to take an axe to either - style off the parent.

Where you have:


<table id="portfolio">

<tr>

<td>
<span>
<a class="zoom" href="http://new.designbits.de/images/portfolio/rub.jpg"><img class="attachment-fadeIn" src="http://new.designbits.de/images/portfolio/rub_thumb.jpg" alt="Webdesign Projekt Rolf & Bernd GmbH" /></a>
</span>
<ul>
<li><b>Kunde: </b>Rolf & Bernd GmbH <em>(2010)</em></li>
<li><b>Leistungen: </b>Webdesign & Programmierung</li>
<li><a href="http://www.rolfundbernd.de">Website ansehen &rarr;</a></li></ul>
</td>

I’d probably have:


<div id="portfolio">
	<div>
		<a href="/images/portfolio/rub.jpg">
			<img src="/images/portfolio/rub_thumb.jpg"
				alt="Webdesign Projekt Rolf & Bernd GmbH"
			/>
		</a><br />
		<b>Kunde: </b>Rolf & Bernd GmbH <em>(2010)</em><br />
		<b>Leistungen: </b>Webdesign & Programmierung<br />
		<a href="http://www.rolfundbernd.de">Website ansehen &rarr;</a>
	</div>

MORE than enough hooks there for the styling you are trying to accomplish.