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

发布于 12-10 09:52 字数 975 浏览 1 评论 0 原文

我有 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>

I have http://communitychessclub.com with about 20-30 smaller jpegs scattered throughout the website. I want to click on the image and have simplemodal popup the larger photo. Problem is I don't want to use separate scripts for each thumbnail. I just want to pass the height and width of each jpeg to a single simplemodal script. This seems like it would be faster bc the computer would know what to do w/o searching for a script for each image related to it.
Maybe I could pass a css height and width with an "onclick= ... etc.

http://chesstao.com/test-2.php is the sample page.

Is this possible? What should I do?

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

栖竹 2024-12-17 09:52:13

您的代码实际上看起来不错,只是需要纠正一些简单的拼写错误才能使其正常工作:

  1. 您永远不会用最终的 ) 关闭对 $.modal 的调用。
  2. 您实际上并没有关闭 $(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>

一个工作的 jsFiddle

我建议认真考虑正确的空白嵌套,这样你就可以一眼就能发现此类问题。

此外,在进行这样的开发时使用 JavaScript 控制台可以让您看到拼写错误的错误消息,这样您就可以知道您的概念是否有缺陷,或者是否缺少字符导致代码无法运行。

Your code actually looks good, there are just some simple typos you need to correct to make it work properly:

  1. You never close your call to $.modal with a final ).
  2. You don't actually close your $(document).ready function.

Here's a fixed version:

<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>

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文