Apologies in advance if my issue is a bit convoluted. I've integrated the Automatic Image Montage jQuery plugin into a page I'm currently working on. However, I seem to have disrupted the functionality that automatically resizes images when the window is resized. Everything else with the plugin is functioning correctly. Can anyone spot what I might be doing incorrectly?
I'm not well-versed in jQuery and JavaScript, but I've only made a few adjustments to the max/min image size options in the plugin's js file. The segment within the js file that appears to be linked to this issue is 'smartresize.' If you prefer not to download the demo from the provided link, I've included a de-minified version of the js file below. First, here are the relevant CSS and HTML:
CSS
/*=========================automontage==============================*/
.am-container {
margin-top:75px;
}
.am-wrapper{
float:left;
position:relative;
overflow:hidden;
}
.am-wrapper img{
position:absolute;
outline:none;
}
/*=========================automontage==============================*/
HTML
<div class="am-container" id="am-container">
<a href="#="asdf"><img src="img/265_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/mont1_cloud_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/san_diego_street.jpg"></img></a>
<a href="#" title="asdf"><img src="img/IMG_8576_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/IMG_9827_1_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/IMG_0999_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/Lake_pano_11.jpg"></img></a>
<a href="#" title="asdf"><img src="img/IMG_8967_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/IMG_1346_s.jpg"></img></a>
<a href="#" title="asdf"><img src="img/IMG_2450.jpg"></img></a>
</div>
In HTML script
<script type="text/javascript" src="js/jquery.montage.min.js"></script>
<script type="text/javascript">
/*automontage*/
$(function() {
var $container = $('#am-container'),
$imgs = $container.find('img').hide(),
totalImgs = $imgs.length,
cnt = 0;
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
fillLastRow : true,
alternateHeight : true,
alternateHeightRange : {
min : 150,
max : 350
}
});
}
}).attr('src',$img.attr('src'));
});
});
</script>
jQuery Plugin File Code (de-minified)
/**
* jQuery Montage plugin
* http://www.codrops.com/
*
* Copyright 2011, Pedro Botelho
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Date: Tue Aug 30 2011
*/
(function( window, $, undefined ) {
/*
* Array.max, Array.min
* @John Resig
* http://ejohn.org/blog/fast-javascript-maxmin/
*/
// function to get the Max value in array
Array.max = function( array ){
return Math.max.apply( Math, array );
};
// function to get the Min value in array
Array.min = function( array ){
return Math.min.apply( Math, array );
};
// Rest of the code has been omitted for brevity