Question

var j$ = jQuery.noConflict();

j$(document).ready(function(){

j$.fn.slideShow = function(timeOut){

var $slidecontainer = this;
this.children(':gt(0)').hide();

setInterval(function() {

$slidecontainer.children().eq(0).fadeOut(2000).next().fadeIn(2000).addClass('on').nextAll().removeClass('on').end().appendTo($slidecontainer);}, timeOut || 1000);

var imgheight = this.children('.on').outerHeight();
this.css('height', imgheight );
};

j$(function() {
j$('.slideshow').slideShow(7000);});
});

For the most part the above script works well. The only problem is the css for image height isn’t being applied to the parent container. When I try this in the browser console it works perfectly. When I have the script called in the page it doesn’t apply the image height. It does everything else though.

this is the html

<div id="slideshow" class="slideshow">
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
<img width="970" height="300" src="someimage.jpg" class="" >
</div>

The following turned out to be the answer:

var j$ = jQuery.noConflict();
j$.fn.slideShow = function (timeOut) {

    var $slidecontainer = this;
    $slidecontainer.children(':gt(0)').hide();

    setInterval(function () {

        $slidecontainer.children().eq(0).fadeOut(2000).next().fadeIn(2000).addClass('on').nextAll().removeClass('on').end().end().appendTo($slidecontainer);
    }, timeOut || 1000);

    var imgheight =  $slidecontainer.children('img').first().outerHeight();   
     $slidecontainer.css('height', imgheight);
};
j$(window).load(function () {
   j$('.slideshow').slideShow(7000);
});

Answer 1

Try,

<div id="slideshow" class="slideshow">
       <img width="970" height="300" src="s_logo_lg.gif" class="" >
       <img width="970" height="300" src="lg.gif" class="" >
       <img width="970" height="300" src="es_logo_lg.gif" class="" >
       <img width="970" height="300" src="g.gif" class="" >
       <img width="970" height="300" src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" class="" >
 </div>

---

var j$ = jQuery.noConflict();
j$.fn.slideShow = function (timeOut) {

    var $slidecontainer = this;
    this.children(':gt(0)').hide();

    setInterval(function () {

        $slidecontainer.children().eq(0).fadeOut(2000).next().fadeIn(2000).addClass('on').nextAll().removeClass('on').end().end().appendTo($slidecontainer);
    }, timeOut || 1000);

    var imgheight = this.children('img').first().outerHeight();   
    this.css('height', imgheight);
};
j$(window).load(function () {

    j$(function () {
        j$('.slideshow').slideShow(7000);
    });
});

http://jsfiddle.net/RTZK6/

$(window).load ensures that images are loaded, so that their hieght calcualtion goes fine in all browsers. You can specifically look for each img element also.

Looks like you missed one end(), you selected next() and then nextAl() so you will need two end() to point selection back to current element.

Updated fiddle

http://jsfiddle.net/RTZK6/2/