Possible auto height bug

[nathansearles]

Set autoheight true Chrome won’t load the first slide properly if you don’t have a height specified

[zrod]

This also happens on Safari, I'll post a sample code soon.

[forrestbaer]

A temporary workaround, set the first

's min-height explicitly like :

I don't know why min-height works and height doesn't. But there you go.

[alexlande]

I can duplicate this in webkit browsers on Mac, but not PC. Workaround does the job for now though.

[brazero]

<div style="min-height:XXXpx"></div> works ! but if the second content have less height, the div won't stretch down :-(

[brazero]

I found a solution... It's ok for my needs... don't know for yours... I add a firstheight option

Here is the full js and tutorial : http://www.carbon14.biz/slide.zip

Hope this help !

[rsnoke]

I was trying to figure this out and was able to fix this issue by changing a small part in the js file. In version 1.1.9, if you go to line 334. Change the following line: height: control.children(':eq('+ start +')').outerHeight()

-to-

height: height

I didn't test this on a Windows machine yet but its works on Mac Chrome, FF, Safari

[artmov]

It didn't work with min-height on Chrome (15) for Mac OS X and replacing height: control.children(':eq('+ start +')').outerHeight() with height: height did took the first slide height properly, but the other slides took the same height.

Another solution is to remove any padding references from within the control children. In my case, I've moved the padding from li div.padding to ul.slides_container which did the trick.

Max.

[forrestbaer]

I think the real solution to this problem is to abandon this project for http://flex.madebymufffin.com/ a decent flexible slider.

[blustrps]

Another option that you can just put in your css:

.slides_container div:first-child { min-height:735px; }

OR, if you are not wrapping your images in a div:

.slides_container img:first-child { min-height:735px; }

[danielogden]

The document.ready function executes after the DOM is loaded but some graphic elements might not be loaded completely yet so the plugin can't to get the height initially, but then it can on the first click because it's been loaded.

Instead of calling your script on document.ready try on window.load, so replace your function call from this:

... to this:

That worked for me!

[buzzguy]

I tried the $(window).load(function() { and works great, but now it loads all the images into one long div before it disappears into the slideshow. Depending on how fast one's connection speed is, each image could load for a while making the site a bit messy. Is there a way to show only the ajax loader while all the images load?

if ( !function_exists( 'tz_gallery' ) ) { function tz_gallery($postid, $imagesize) { ?>

<?php 
    $loader = 'ajax-loader.gif';
    $thumbid = 0;

    // get the featured image for the post
    if( has_post_thumbnail($postid) ) {
        $thumbid = get_post_thumbnail_id($postid);
    }
    echo "<!-- BEGIN #slider-$postid -->\n<div id='slider-$postid' class='slider' data-loader='" . get_template_directory_uri() . "/images/$loader'>";

...