Question

我是jQuery / JavaScript的新手，所以我遇到了一些问题，希望你能指出我的正确轨道。

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

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

我可以用Ajax做这个，刷新简单的模态吗？我还在学习如何在jQuery中使用Ajax，并且似乎有很多方法可以做到。

这就是我所拥有的：

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，因为图像将在数据库中。但是会有更好的方法吗？

Answer 1

我对该模态插件没有任何线索。根据我的经验，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 { 身高：100％; 宽度：100％; }

看起来你对你的问题中的内容感到有些困惑。在你的情况下它是$（“img.overlay”）你可以通过调整

来避免所有的废话

<div id="bigPic">

以满足您的需求。

动态调整简单模态的大小取决于单击的内容

1 个答案: