Change slideshow div height on image change?

[GoogleCodeExporter]

When an image changes, the image's div does not resize to contain the image. 
Not a big problem, but it would be nice if there was a way to reset the div's 
height = displayed image height, so that other div's below it are pushed down 
instead of having the image overlap.

In theory, something like: 
 $('#slideshow').css({'height':image.height+'px'}) 

inside the buildImage: function should work, but I'm not sure how to capture 
the diplayed image's height or if that's where to insert this code so it will 
work. I suspect the height will also need some extra padding, so 
image.height+25+'px' or something to take into account CSS padding / margins?

I tried using imageData.height, but that didn't work.

In FireFox, the div seems to be large enough to contain my images, but in IE 
the image overlaps div's below it on the page for taller images.

THANKS!

Original issue reported on code.google.com by charles....@gmail.com on 20 Jan 2011 at 3:56

[GoogleCodeExporter]

Hm, it looks like this fixed my problem, though a resizing DIV would be nicer: 
div.slideshow img {border-style:solid; border-width:1px; max-width:450px; 
max-height:500px; height:auto; width:auto;}

Original comment by charles....@gmail.com on 24 Jan 2011 at 4:34

[GoogleCodeExporter]

The height of the slideshow container should definitely be configurable to 
change automatically with the content that is placed into it. 

Most artists have different heights and widths of artwork. The fact that height 
remains static makes the use of this gallery VERY limited. 

If anyone has found a way to do this, please post your temporary solution here? 
Thanks.

Original comment by kathkeat...@gmail.com on 10 Feb 2011 at 9:00

[GoogleCodeExporter]

after much angst, I was able to auto-adjust the height of the slideshow 
container based on the content that was placed into it. Probably not the most 
efficient way, but it worked.

in the "gotoImage" function I added the following code directly above 
this.refresh():

//auto-adjust the slideshow container height 
var img = new Image();
img.src = this.currentImage.slideUrl;
this.$imageContainer.css("height", img.height + 100);

Original comment by kathkeat...@gmail.com on 10 Feb 2011 at 9:28

[GoogleCodeExporter]

I just can't imagine JS gallery with... FIXED image size...
I spent a lot of time to integrate it, to setup and to realize that the 
Galleriffic don't use dynamic height/width... I agree with Charles - this 
gallery is VERY limited.

I am using the fix from Comment 3, but with little workaround:

var img = new Image();
img.src = this.currentImage.slideUrl;
var height = img.height / (img.width / 736 /*fixed width, related with site 
layout*/);
this.$imageContainer.css("height", height);

But the first load of the gallery, height is not present (?).
However, I'll try with another library.
I have to used Galleriffic before, but now I see that integration and futures 
are little strange.

Original comment by Sim...@gmail.com on 21 Jun 2011 at 9:04

[GoogleCodeExporter]

Here is the final fix, with img.onload added:

var img = new Image();
img.src = this.currentImage.slideUrl;
var that = this;
img.onload = function (){
    var height = img.height / (img.width / 736);
    that.$imageContainer.css("height", height);
}

Original comment by Sim...@gmail.com on 21 Jun 2011 at 10:43

[GoogleCodeExporter]

This did add a lot of white space under my image, when the image was higher and 
loaded after smaller one.

What's wrong?

I adjusted before the css file with height: auto;

Original comment by sinimaar...@gmail.com on 29 Nov 2011 at 12:40

[GoogleCodeExporter]

I faced an issue with dynamic image heights if using Chrome/explorer, the 
portrait images were over flowing outside the gallery div, I had to modify the 
script and specially the getHeight function as following:

function getHeight(imageData){
    var imgSrc = imageData.slideUrl;
    var aImg = new Image();
    aImg.src = imgSrc;
    aHeight = aImg.height; 
    if(aHeight == 0) 
        return imageData.image.height;
    return aHeight;
  }

This helped solve the issue, I think there is a difernet behaivour for (new 
image()) in these browsers that should be considered.

Original comment by hussein....@gmail.com on 6 Feb 2013 at 9:07

[GoogleCodeExporter]

In this plugin, I have added few lines of code to achieve below tasks:
1. Dynamically resize image container's height.
2. Dynamically resize description container's height.

I think this will help others.

Thanks for comment number #3.

Original comment by b2r...@gmail.com on 31 May 2013 at 7:47

Attachments:

• jquery.galleriffic.js

[GoogleCodeExporter]

One more thing remove div.content & div.slideshow-container height from CSS.

Original comment by b2r...@gmail.com on 31 May 2013 at 8:58