My nearly completed jQuery slideshow is working well except for one issue - the height of the slideshow remains fixed at the height of the first displayed slide, causing problems. View the issue here: . I have tried different jQuery solutions from StackOverflow without success.
To resolve this, I'm trying to loop through each .slideshow element on the page, then iterate over the slides in each slideshow to find the largest height and adjust all the slides accordingly. Here's the code I attempted:
var maxheight = 0;
$('.slideshow').each(function() {
$(this).children().each(function(){
maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight);
console.log(maxheight);
})
$(this).children().height(maxheight);
console.log('Final:' + maxheight);
maxheight = 0;
})
However, this code messed up the slideshow completely as shown in this JSFiddle: http://jsfiddle.net/B4rqz/
If anyone can offer guidance on solving this issue, I would greatly appreciate it. Here's the HTML and CSS snippets:
HTML:
(HTML snippet here)CSS:
(CSS snippet here)jQuery:
(jQuery snippet here)View the complete set-up on JSFiddle for reference: http://jsfiddle.net/B4rqz/