Where should I store jQuery data for html elements?
<p>To better learn jquery I decided to write a plugin that creates a <a href="https://github.com/ed-lea/jquery-collagePlus" rel="nofollow">gallery collage effect</a> like google+. Here's an <a href="http://www.devurl.co.uk/collagePlus/" rel="nofollow">example</a>. </p>

<p>I want to trigger it again on resizing the html element that contains the images. Part of the problem I'm having is that I need to store the original image size in order to recalculate the image sizes to make them fit.</p>

<p>I don't know where to store and how to retrieve those original image sizes. Full plugin is linked above, but I'll put a summary here.</p>

<pre><code>;(function( $ ) {
    $.fn.collagePlus = function( options ) {

        var settings = $.extend( 
            //... 
            'images'          : $('img', $(this))
            //... 
        );

        return this.each(function() {
            settings.images.each(function(index){
                //... 

                /*
                * get the current image size
                */
                var w = (typeof $(this).data().width != 'undefined') ? $(this).data().width : $(this).width();
                var h = (typeof $(this).data().height != 'undefined') ? $(this).data().height : $(this).height();

                /*
                * store the original size for resize events
                */
                $(this).attr( "data-width" , w  );
                $(this).attr( "data-height" , h  ); 
                //... Do some other stuff
                }
            );
        });
    }
})( jQuery );
</code></pre>
