CODEWITHSUNDEEP
javascriptjquery
iyal
iyal

Reputation: 1285

Get the height of image of 100% width

I am trying to get the image height of its width of 100% from the browser's width. 

$(document).ready(function(){
    var heightImage = $('ul.images img').height();
    $('ul.images').css("height", heightImage + "px");
});

The problem with the code above is when I resize the browser, and the height of images of 100% widths changes, the heightImage doesn't change.

So i decide to use: 

$(window).resize(function(){
    var heightImage = $('ul.images img').height();
    $('ul.images').css("height", heightImage + "px");
});

There are two problem with the code above:

the image is in absolute position. Sometimes it display block, and sometime it display none. It catch the image height before the image fadein to show from the slideshow. It changes the height of the image when the browser size is changed. But if we resize the browser when the image is fading, while all images are display none, it will catch the height of image to be 0px.

and the second problem of that code is it only detects the height of the image when the browser size changes.

Can anyone please give me an alternative how to catch the height of images on slideshow with the width of 100% + on browser resize?

Thanks in advance.

My HTML CODE

<ul class="images">
   <li><img src="1.jpg" /></li>
   <li><img src="2.png" /></li>
   <li><img src="3.jpg" /></li>
   <li><img src="4.jpg" /></li>
</ul>

I just copy pasted this code from somewhere around here: 

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(500).eq(target).fadeIn(500);
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

Upvotes: 1

Views: 148

Answers (2)

Amin Jafari
Amin Jafari

Reputation: 7207

EDITED 2:

one simple way is to write the whole thing inside a function and call it in a loop if the height is 0.

function setHeight(){
    var imageHeight=$('ul.images img').height();
    if(imageHeight==0){
        clearTimeout(window.TO);
        window.TO=setTimeout(setHeight(),100);
    }
    else{
        $('ul.images').css("height", imageHeight + "px");
    }
}
setHeight()
$(window).resize(function(){
    setHeight()
});

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Do like this:

var heightImage = $('ul.images img').height();
$(window).resize(function(){
    heightImage = $('ul.images img').height();
    $('ul.images').css("height", heightImage + "px");
}).resize();

Upvotes: 1

Related Questions