Указание высоты и ширины для диалогового окна jQuery в теге <a>

Question

Я отображаю iframe (с видео в нем) в диалоговом окне jQuery (http://jqueryui.com/demos/dialog/).. Есть два размера видео, которые я хочу показать. Итак, я хотел бы, чтобы диалоговое окно появилось различные спецификации высоты и ширины в зависимости от того, какая ссылка нажата на странице.

Функция, которая делает диалоговое окно всплывающим, находится в файле php, который создает заголовок HTML. И это ...

  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%");
        });
    }); 

Итак, я думал что-то вроде ...

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

И ...

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

Но тогда при клике класс будет установлен в зависимости от того, какая ссылка была нажата.

Я ничего не знаю о javascript, поэтому понятия не имею, как это сделать. Я также не знаю, возможно ли мое предложенное решение, но оно не работает.

Мысли? Благодарю.

Answer 1

Создайте значения диалога из списка стилей, включите стиль в определение класса

(т. Е. 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>

Вы можете закодировать это, нооставил это многословным для потомков:)