Question

我有http://communitychessclub.com，网站上散布着大约20-30个较小的jpeg。我想点击图片并让simplemodal弹出更大的照片。问题是我不想为每个缩略图使用单独的脚本。我只想将每个jpeg的高度和宽度传递给单个simplemodal脚本。这似乎会更快，因为计算机不知道该做什么而不搜索与其相关的每个图像的脚本。也许我可以通过＆＃34; 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

您的代码看起来确实很好，只需要纠正一些简单的错别字以使其正常工作：

您永远不会以$.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控制台可以让你看到来自拼写错误的错误信息，这样你就会知道你的概念是否有缺陷，或者是否有一个缺少的字符阻止你的代码运行

一个simplemodal脚本来处理图像

1 个答案: