在新窗口中放大图像?

时间:2010-03-01 23:27:54

标签: html image-enlarge

我只是快速搜索了我的问题,并且无法直接找到任何内容。

我还是非常新的HTML,并想知道是否有人可以告诉我如何将图片添加到我的网站并设置代码,以便如果我点击它,它会在新窗口中放大图片。

我将在我的网站上添加大约600多张图片,所以我也想知道是否有一种方法可以编写一次代码,并将其应用于我添加的所有图片。

提前致谢, - 丹尼B。

5 个答案:

答案 0 :(得分:3)

有许多方法可以做到这一点。插入带有新窗口链接的图像的基本HTML将是:

<a href="enlarged.html" target="_blank">
     <img src="photos/photo-name.jpg" />
</a>

但如果你想能够动态显示大量照片,那就更复杂了。如果你想自己编写代码,你会想要使用像PHP这样的东西自动输出600多个图像的HTML代码。然后,您可能不想将每个链接指向新页面,而是考虑以一种很酷的方式加载图像,例如javascript灯箱/彩盒,其他一些答案建议。

一种可能的替代解决方案可能是寻找一些预先创建的相册脚本。我对这些没有任何经验,所以我会让别人就此提出一些建议。

答案 1 :(得分:0)

有几种方法可以做到这一点,但我假设你会在一个页面上有一个包含大量图像的简单网站,并且你希望这些图像能够以一种很酷的方式“打开”。

看看这个:http://colorpowered.com/colorbox/

...点击View Demonstration,然后查看各种照片处理选项。

这只需要一些基本的HTML和最低配置的Jquery。使用非常简单,效果很好。

答案 2 :(得分:0)

Google使用关键字lightbox。大多数解决方案都是随时可用的Javascripts。只包括一次,分配一些ID /类,在onload期间执行,就是这样。我个人对Lightbox2jQuery Lightbox plugin有很好的体验。

答案 3 :(得分:0)

我决定使用w / target =“_ blank” - Lightbox2似乎很棒,但我真的不确定如何使用它以及放置所有代码的位置。我发现它的说明仍然假设用户在该领域有一些标准知识,我目前没有。所以,我会坚持目标/空白方法,直到我可以更熟悉w /编码,然后我将升级到Lightbox。

我想再次感谢大家。你们总是快速而准确地回应。

非常感激,   - 丹尼B

答案 4 :(得分:-1)

最简单的方法是添加一个链接,并将target属性设置为target="_blank"。链接应指向图像本身。这会定期打开一个新选项卡,如果你想要一个全新的窗口,你应该尝试

href="javascript:window.open('myimage.png','_blank','toolbar=no,menubar=no,resizable=yes,scrollbars=yes')"
,这将打开一个新的独立窗口。如果您正在寻找淡入/调整大小效果等,请尝试发布其他答案之一。