Failure to load full images in slider... [SOLVED]

[wmdvanzyl]

Firstly, thanks to Goran for the template http://www.i-arts.eu/quattro/

I am having an issue using the template at http://www.rescuerefin.co.za.

Upon first load of the site (as far as i can tell), the slider loads the thumbnail instead of the full image and also displays the loading animation. Upon refresh, the images (usually) display correctly.

My question: How can i force the slider to wait for the images to be loaded?

Cheers!

[velden]

Without doing a thorough investigation I think it would help the browser if you specify witdh and height in the source:

Code: Select all

 <div class="teaser">
<img src="uploads/images/GalleryThumbs/19-8.png" alt="2010 Toyota Yaris T1" title="2010 Toyota Yaris T1" width="926" height="246" />
	<img src="uploads/images/GalleryThumbs/20-8.png" alt="Nissan Navara 4X4 4.0" title="Nissan Navara 4X4 4.0"  width="926" height="246" />
	<img src="uploads/images/GalleryThumbs/18-8.png" alt="Renault Laguna 3.5 V6" title="Renault Laguna 3.5 V6"  width="926" height="246" />
	</div>

This would involve changing the Gallery template used.

Another option would be adding some lines to stylesheet:

Code: Select all

div.teaser img {width:926px;height:246px;}

You need to let the browser know how large the images are BEFORE they are loaded. Because the slider will possibly start and do it's calculations before the images are actually available.

Further, do some html validation, there are some errors in the website.

[wmdvanzyl]

Thanks. I will start with the errors and work my way up towards telling the browser the image sizes.

Right - most errors sorted. The errors left are all from within the FormBuilder module. Will look at that later.

[wmdvanzyl]

Another option would be adding some lines to stylesheet:

Code: Select all

div.teaser img {width:926px;height:246px;}

This worked like a charm! Thanks!