一个处理图像的简单模式脚本
我有 http://communitychessclub.com,网站上散布着大约 20-30 个较小的 jpeg。我想单击图像并让 simplemodal 弹出较大的照片。问题是我不想为每个缩略图使用单独的脚本。我只想将每个 jpeg 的高度和宽度传递给单个 simplemodal 脚本。这似乎会更快,因为计算机知道要做什么,而无需为与其相关的每个图像搜索脚本。 也许我可以用“onclick = ...等”传递CSS高度和宽度。
http://chesstao。 com/test-2.php 是示例页面,
我该怎么办?
<a href="images/aveskulov-medium.jpg" class="photo" />pic-1</a>
<a href="images/Jeff%20Plew.jpg" class="photo" />pic-2</a>
<!-- new code which works, but modal isn't centered V or H-->
<script>
$(document).ready(function(){
$(".photo").click(function(e) {
var hrefval= $(this).attr("href");
$.modal('<img src=" ' + hrefval + '">', {
containerCss: {autoPosition:'true'},
overlayClose: true
});
e.preventDefault();
});
});
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您的代码实际上看起来不错,只是需要纠正一些简单的拼写错误才能使其正常工作:
$.modal
的调用。$(document).ready
函数。这是一个固定版本:
一个工作的 jsFiddle
我建议认真考虑正确的空白嵌套,这样你就可以一眼就能发现此类问题。
此外,在进行这样的开发时使用 JavaScript 控制台可以让您看到拼写错误的错误消息,这样您就可以知道您的概念是否有缺陷,或者是否缺少字符导致代码无法运行。
Your code actually looks good, there are just some simple typos you need to correct to make it work properly:
$.modal
with a final)
.$(document).ready
function.Here's a fixed version:
And a working jsFiddle
I'd recommend being diligent about proper whitespace nesting so you can spot issues like this with a glance.
Additionally, using a javascript console when you're doing development like this can allow you to see error messages from typos, that way you'll know if your concept is flawed, or if there's a missing character preventing your code from being run.