Specifying height and width for jQuery dialog box in <a> tag

Question

I'm displaying an iframe (with a video in it) in a jQuery dialog box (http://jqueryui.com/demos/dialog/). There are two sizes of video I want to show. So, I'd like to have the dialog box come up with different height and width specs. depending on which link is clicked on the page.

The function that's making the dialog box pop up is in a php file that creates the HTML head. And that is...

  jQuery(document).ready(function() {
        jQuery("a.videobox").click(function(e) {
            e.preventDefault();
            var d = jQuery('<iframe src="' + this.href + '" />');
            d.dialog({
                title: this.title,  // allow video title to be specified like this: '<a href="..." title="..." ...'
                autoOpen: true,
                width: 800,
                height: 600,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { jQuery('.ui-icon-closethick').html(''); }  // remove the 'close' caption that overlaps with 'x' button
            }).width("100%");
        });
    });


jQuery(document).ready(function() {
        jQuery("a.videobox_smaller").click(function(e) {
            e.preventDefault();
            var d = jQuery('<iframe src="' + this.href + '" />');
            d.dialog({
                title: this.title,  // allow video title to be specified like this: '<a href="..." title="..." ...'
                autoOpen: true,
                width: 500,
                height: 300,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { jQuery('.ui-icon-closethick').html(''); }  // remove the 'close' caption that overlaps with 'x' button
            }).width("100%");
        });
    }); 

So, I was thinking something like...

<a title="Bigger Size" href="bigger_video.html" class="videobox">Play the Bigger Video</a>

And...

<a title="Smaller Size" href="smaller_video.html" class="videobox_smaller">Play the Smaller Video</a>

But then onclick, the class would be set based on which link was clicked.

I don't know anything about javascript, so I have no idea about how to go about this. I also don't know if my suggested solution is feasible, but it's not working.

Thoughts? Thanks.

Answer 1

Create the dialog values from a list of styles, include the style in the class definition

(i.e. class="video:sm")

<a href="foo.html" class="video:sm">small video</a>
<a href="bar.html" class="video:lg">large video</a>
<script>
(function($){
    var dialogStyles = {
        sm:{height:500,width:300},
        lg:{height:1200,width:800},
        sm_nomodal:{height:500,width:300,modal:false},
        lg_nomodal:{height:1200,width:800,modal:false}
    }
    $('[class*="video:"]').each(function(){
        var type = $(this).attr("class").match(/video:([-\w]+)/)[1];
        $(this).click(function(){
            var defaults = {
                title:$(this).attr("title"),
                autoOpen: true,
                width: 400,
                height: 400,
                modal: true,
                resizable: true,
                autoResize: true,
                show: 'blind',
                hide: 'explode',
                open: function(event, ui) { $('.ui-icon-closethick').html(''); }
            }
            var o = $.extend(defaults,dialogStyles[type]);
            // im trusting your open dialog code
            $('<iframe src="' + $(this).attr("href") + '" />').dialog(o);
            return false;
        }); 
    });
})(jQuery)
</script>

You can code golf this down, but I left it verbose for posterity :)