Javascript 在模式中动态加载图像

下面是我的代码。我正在尝试在模式中加载图片。该图片存在于页面上，我能够获得源代码。有没有一种方法可以像我在这里尝试的那样，在点击时将图像加载到一个模式中？我能够点击一张图片，并提醒出来源；但是当我尝试将源代码插入函数时；什么也没发生

我正在使用ZEND，但我认为这与当前的情况无关，因此我没有使用ZEND标签来标记问题

有人能解释一下我需要做什么才能在点击模式下加载我的图像吗？

<?php
    $this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
    $this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
    pic1 = document.getElementById(this.id).getAttribute('src');
    alert(pic1);

    $(pic1).dialog(
        {
            modal:      true,
            draggable:  false,
            title:      'Designs',
            height:     'auto',
            width:      'auto',
            open:       function(){
                            jQuery('.ui-widget-overlay').bind('click',function(){
                                jQuery(pic).dialog('close');
                            })
                        }
        }
    );
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">

    <div id="title">
        <?php echo strtoupper($this->object->GetType()); ?>
    </div>

    <div id="boxText">
        <?php echo $this->object->GetDescription(); ?>
    </div>

    <?php $links = $this->object->GetLinks(); ?>
    <div id="pictureBox">
        <ul id="grid">
            <li>
                <a href="#">
                    <img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
            </li>
            <li>
                <a href="#">
                    <img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
            </li>
            <li>
                <a href="#">
                    <img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
            </li>
            <li>
                <a href="#">
                    <img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
            </li>
        </ul>
    </div>
    <div style="clear: both;"> </div>
</div>

$（'.boxDES'）。单击（函数（）{
pic1=document.getElementById（this.id）.getAttribute（'src'）；
警报（pic1）；
$（pic1）。对话框(
{
莫代尔：是的，
可拖动：错误，
标题:"设计",，
高度：“自动”，
宽度：“自动”，
打开：函数（）{
jQuery（'.ui小部件覆盖'）.bind（'click'，function（）{
jQuery（pic）.dialog（'close'）；
})
}
}
);
});

这是如何构建保存我的IMG的变量。
变量catIMG=$（'
下面是现已修复且完整的JSCRIPT-

$('.boxDES').click(function() {
    pic1 = document.getElementById(this.id).getAttribute('src');
    var catIMG = $('<img/>', {
                        "class" :"inline",
                        src:pic1
                });

    $(catIMG).dialog(
        {
            modal:      true,
            draggable:  false,
            title:      'Designs',
            height:     'auto',
            width:      'auto',
            open:       function(){
                            jQuery('.ui-widget-overlay').bind('click',function(){
                                jQuery(pic).dialog('close');
                            })
                        }
        }
    );
});

$（'.boxDES'）。单击（函数（）{
pic1=document.getElementById（this.id）.getAttribute（'src'）；
变量catIMG=$（'
我在这里找到了这些信息

$('.boxDES').click(function() {
    pic1 = document.getElementById(this.id).getAttribute('src');
    var catIMG = $('<img/>', {
                        "class" :"inline",
                        src:pic1
                });

    $(catIMG).dialog(
        {
            modal:      true,
            draggable:  false,
            title:      'Designs',
            height:     'auto',
            width:      'auto',
            open:       function(){
                            jQuery('.ui-widget-overlay').bind('click',function(){
                                jQuery(pic).dialog('close');
                            })
                        }
        }
    );
});