Asp.net中的Fancybox [英] Fancybox in Asp.net

问题描述

我有一个文件上传器，我正在预览我在下面的div中上传的图片.但是我必须通过在预览图像上单击/鼠标悬停在一个较大的弹出窗口中突出显示要预览的图像谁能帮我吗?

aspx:

I have a file uploader,i am previewing the picture what i am uploading in a div below.but i have to highlight the image in a popup window with a larger size what i am previewing by clicking/mouseover on the preview image.Can anyone help me?

aspx:

<div style="width: auto; height: auto;">
                                            <asp:FileUpload ID="QuestionUp" clientIDMode="Static" runat="server" onchange="imageURL(this)" />
                                            <br />
                                            <img id="replaceMe" style="height: 24px; width: 222px" title="Test Image" src=""

                                                alt="" name="uu" height="80" width="200" onmouseover="applyPirobox(this);"  önmouseout="removePiro(this);" />
                                            <div id="popDiv" style="display: none; height: 150; width: 180;">
                                                <img id="popImage" alt="No image" src="" height="150" width="222" />
                                            </div>
                                            <br />
                                        </div>

javascript:

javascript:

<script type="text/javascript">
        function imageURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#replaceMe').attr('src', e.target.result)
                 .width(222)
                 .height(86);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

推荐答案

(' ' 222 ) .height( 86 ); } reader.readAsDataURL(input.files [ 0 ]); } } </script>

('#replaceMe').attr('src', e.target.result) .width(222) .height(86); } reader.readAsDataURL(input.files[0]); } } </script>

查看以下文章是否有帮助:
http://www.dotnetcode.in/2011/07/how-to-show-large-image-on-mouseover.html [ http://www.techrepublic. com/blog/webmaster/how-to-create-an-image-hover-preview-effect-using-jquery/1603 [

See if following articles are of any help:
http://www.dotnetcode.in/2011/07/how-to-show-large-image-on-mouseover.html[^]
http://www.techrepublic.com/blog/webmaster/how-to-create-an-image-hover-preview-effect-using-jquery/1603[^]

这篇关于Asp.net中的Fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！