Question

我是JavaScript和jQuery的新手，我知道HTML＆amp; CSS相当不错。

我有一张20张最小化的图片（很快就会有500多张图片），点击后会打开一个新页面。

我在那里没有任何问题。我想要的是，当点击一张图片时，它会在已经打造的页面中打开，并且所选图片将被放置在该页面的中心（或者我希望放置的位置）。

我知道我必须将图片ID带到新页面，但我完全不知道要使用什么代码。以下是我现在正在使用的新页面。

<img src="img/1.jpg" class="thumbnail" id="preview">

并在新窗口中打开此图片我正在使用

<script>
$(document).ready(function() {
    $('img.thumbnail').click(function() {
        window.location.href = this.id + '.html';
    });
});
</script>

此代码在另一个窗口中打开图像，但它没有样式，我想将它设置为样式，并将所选的图像放置在我选择它的位置。

我不想为每张图片创建500多页，我知道我已经看过它了，我只是不知道该怎么做。

感谢您提供任何帮助。

Answer 1

为什么不将src属性的值作为querystring传递给jQuery？

window.location.href = 'preview.html?src='+$(this).attr('src');

然后在 preview.html 中，使用提供的函数here使用javascript获取src参数。

示例：

var src = getParameterByName('src');

如果您能够使用服务器端脚本，那将会更加简单。

Answer 2

我知道我必须将图片ID带到新页面

可能不是，如果你想显示一个样式化的图像，我希望你想要通过Ajax请求请求图像，或者如果你想使用你的{{1基于方法。

我说的原因，不是新页面，如果您说，加载模式对话框或其他内容以显示您的照片，它将更容易维护您的网站样式。

有许多模态对话框插件可以处理zurb reveal插件等图像：

http://foundation.zurb.com/docs/components/reveal.html

还有一系列特定于照片的jquery插件，可以为您提供前一个/下一个，描述和键盘导航等附加功能。

虽然您可以使用您描述的方法并在单独的页面中打开它们，但我建议您使用插件进行调查，以避免需要重新发明轮子。

我做了一个快速的谷歌，这个看起来很有趣：http://galleria.io/但是那里有数百个类似的工具。

Answer 3

将图像用作GET参数：

$('img.thumbnail').click(function() {
    window.location.href = 'template.html?image='+ encodeURIComponent( $(this).attr("src"));
});

然后在您的template.html中为您的图片准备布局

<img src="<? echo urldecode($_GET['image']); ?>" />

点击的图片页面转到新样式页面

3 个答案: