一个用于处理图像的简单模式脚本

Question

我有大约20-30个较小的jpeg分散在整个网站的http://communitychessclub.com。我想点击图像，并有简单的模式弹出较大的照片。问题是我不想对每个缩略图使用单独的脚本。我只想将每个jpeg的高度和宽度传递给一个简单的模式脚本。这似乎会更快bc计算机将知道做什么，而不是搜索与它相关的每个图像的脚本。也许我可以用"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>

Answer 1

你的代码实际上看起来不错，只是你需要纠正一些简单的拼写错误才能让它正常工作：

你永远不会用一个最终的).

• You来结束你对$.modal的调用，也不会实际关闭你的$(document).ready函数。

下面是一个固定的版本：

<script>
  $(document).ready(function(){
    $(".photo").click(function(e) {
      var hrefval= $(this).attr("href"); 
      $.modal('<img src=" ' + hrefval + '">', { 
        containerCss: { height:'auto',width:'auto'}, 
        overlayClose: true 
      });
      e.preventDefault();
    });
  });
</script>

和a working jsFiddle

我建议您对适当的空格嵌套保持谨慎，这样您就可以一目了然地发现这样的问题。

此外，当你进行这样的开发时，使用javascript控制台可以让你看到打字错误的错误消息，这样你就可以知道你的概念是否有缺陷，或者是否有一个缺失的字符阻止了你的代码运行。