1

我对 jQuery/JavaScript 相当陌生，所以我遇到了一些问题，希望你能指出我正确的轨道。

在我的项目中，我有一排图像，显示图像的预览。一种图片库。

我希望能够单击较小的图像，然后获得简单的模态来显示全尺寸图像，动态调整大小和动画。

我可以用 Ajax 来刷新简单的模式吗？我仍在学习如何将 Ajax 与 jQuery 一起使用，并且似乎有很多方法可以做到这一点。

这是我所拥有的：

jQuery：

$('.col1').find('img.overlay').click(function() {

                $('#imgpreview').modal({overlayClose:true});

                var img = $(this).parent().find('img.shared').attr('src');
                var imgW = $(this).parent().find('img.shared').attr('width');
                var imgH = $(this).parent().find('img.shared').attr('height');

                $('#imgpreview').css('width', imgW);
                $('#imgpreview').css('height', imgH);                   
                $('#imgpreview').find('img').attr('src', img);

            });

    });

HTML：

            <div id="imgpreview"><img src=""></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img1.jpg"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img2.jpg"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img3.jpg"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img4.png"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img5.jpg"></div>
                        <div class="col1 bg nmr"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" src="img/uploaded/img6.jpg"></div>

我可以在简单模态中显示图像，但图像不在图像的尺寸内，所以我可以给它一个边框和样式，也意味着它不在中间。

另一种选择是为每个图像创建一个简单的模式对话框，并使用 PHP 回显 jQuery，因为图像将在数据库中。但是会有更好的方法吗？

4

1 回答 1

0

我对那个模态插件一无所知。根据我的经验，jQuery 插件几乎不值得费心去弄清楚。话虽如此，你可以试试这个......

<head>
    $(document).ready( function() {
        $('.overlay).click( function() {
            $('#bigPic).append('<img id="myPic" src="my dynamic source.gif"/>');
        });//end click
    });//end ready
</head>

<body>
    <div id="previews">

        //Your posted html here
    </div>
    <div id="bigPic">

    </div>
</body>

然后 CSS 会有类似：img #myPic{ height: 100%; 宽度：100%；}

看起来你对你的问题有点困惑。在您的情况下，它是 $("img.overlay") 您可以通过调整

<div id="bigPic">

以满足您的需求。

于 2012-08-04T09:53:53.563 回答