Question

To better learn jquery I decided to write a plugin that creates a gallery collage effect like google+. Here’s an example.

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.

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.

;(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 );

Answer 1

You’re using .data() wrong. When you pass 1 parameter to the .data function, it returns the value for the given key. When you pass 2 parameters, .data will set the value for that key.

This block:

//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();

Should be:

var $this = $(this); //caching your selector
if (!$this.data('width')) //if this element doesn't have a width stored
    $this.data('width', $this.width()); //stores currently computed width
if (!$this.data('height')) //repeat
    $this.data('height', $this.height());

And of course, to retrieve the data later:

alert($this.data('width')) //alerts currently stored width

Fiddle Demo

You can also store an object in the .data passing a map of properties:

if (!$(this).data('size'))
    $(this).data('size', { width: $(this).width(), height: $(this).height() });

Now width and height are properties of the object stored in the .data('size'), which can retrieved with:

alert($(this).data('size').width);

Fiddle

For the sake of simplicity, I’d primarily go with the first option. However the second one looks tidier. Choose whichever you find more readable and maintainable.