how to show a large jpg image to the right in jqGrid's edit form?
<p>Is it possible to show a large (i.e. bigger than a thumbnail) jpeg image in the right-hand side of jqGrid's edit form ?</p>

<p>Users want to look at a photo while entering data into fields ... they are describing things in the photo.</p>

<p>I'm sure all things are possible with jQuery, but I don't know where to begin.
thanks</p>

<p>CODE:</p>

<pre><code>function afterSubmit(r, data, action) {
    // if session timeout returned:
    if (r.responseText == "logout") {
        window.location = '../scripts/logout.php';
    }
    // if an error message is returned:
    if (r.responseText != "") {
        $('#submit_errors').html('&lt;strong&gt;Alert:&lt;/strong&gt;&lt;p&gt;' + r.responseText + '&lt;/p&gt;');
        // show div with error message
        $('#submit_errors').slideDown();
        // hide error div after 10 seconds
        window.setTimeout(function () {
            $('#submit_errors').slideUp();
        }, 10000);
        return false; // don't remove this!
    }
    return true; // don't remove this!
}


&lt;div id="content"&gt;
    &lt;div id="left"&gt;
        &lt;div id="wrapper" style="margin:0 auto; width:700px;"&gt;
            &lt;div class="ui-widget"&gt;
                &lt;div class="ui-state-error ui-corner-all" id="submit_errors"     style="padding: 0 .7em; display:none"&gt;
                    &lt;p&gt; &lt;span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"&gt;&lt;/span&gt;

                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;script type="text/javascript"&gt;
                var lastsel;
                jQuery(document).ready(function () {
                    var mygrid = jQuery("#mobile_incidents").jqGrid({
                        url: 'list.php?q=e',
                        editurl: 'edit.php',
                        datatype: "json",
                        // note: all column names are required even though some columns are hidden
                        colNames: ['Rec#', 'Date', 'Line', 'Photo'],
                        colModel: [{
                            name: 'id',
                            index: 'id',
                            editable: true,
                            editoptions: {
                                readonly: 'readonly'
                            }
                        }, {
                            name: 'mobile_discoveryDate',
                            index: 'mobile_discoveryDate',
                            sortable: false,
                            editable: true,
                            edittype: 'text',
                            formatter: 'date',
                            formatoptions: {
                                srcformat: 'Y/m/d',
                                newformat: 'm/d/Y'
                            },
                            editoptions: {
                                size: 12,
                                maxlength: 10,
                                dataInit: function (element) {
                                    $(element).blur();
                                    $(element).datepicker({
                                        dateFormat: 'mm/dd/yyyy'
                                    })
                                }
                            }
                        }, {
                            name: 'mobile_lineName',
                            index: 'mobile_lineName',
                            editable: true,
                            sortable: false
                        }, {
                            name: 'mobile_photo_name',
                            index: 'mobile_photo_name',
                            editable: false,
                            sortable: false
                        }],
                        pager: '#mobile_incidents_pager',
                        altRows: false,
                        rowNum: 10,
                        rowList: [10, 20],
                        imgpath: '../include/images/jqgrid',
                        viewrecords: true,
                        emptyrecords: 'No submissions found!',
                        height: 260,
                        sortname: 'id',
                        sortorder: 'desc',
                        gridview: true,
                        scrollrows: true,
                        autowidth: true,
                        rownumbers: false,
                        multiselect: false,
                        subGrid: false,
                        caption: ''
                    })
                        .navGrid('#mobile_incidents_pager',
                    // params:
                    {
                        add: false,
                        edit: true,
                        del: false,
                        search: false,
                        view: false,
                        refresh: true,
                        alertcap: ' to edit:',
                        alerttext: ' . . . click on a row to highlight'
                    },
                    // edit params:
                    {
                        top: 50,
                        left: 5,
                        editCaption: 'Edit Submission',
                        bSubmit: 'Approve/Save',
                        closeAfterEdit: true,
                        afterSubmit: function (r, data) {
                            return afterSubmit(r, data, 'edit');
                        }
                    }, {}, // add params
                    {}, // delete params
                    // search params:
                    {
                        multipleSearch: false
                    },
                    // view params:
                    {
                        top: 150,
                        left: 5,
                        caption: 'View Mobile Rail Submission'
                    });
                });
            &lt;/script&gt;
            &lt;table id="mobile_incidents" class="scroll" cellpadding="0"     cellspacing="0"&gt;&lt;/table&gt;
            &lt;div id="mobile_incidents_pager" class="scroll" style="text-align:center;"&gt;            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
