一种用于处理图像的简单模式脚本 [英] one simplemodal script to handle images

问题描述

我有 http://communitychessclub.com ，其中大约20-30个较小的jpeg散布在整个网站上.我要单击图像，并在单模态弹出较大的照片.问题是我不想为每个缩略图使用单独的脚本.我只想将每个jpeg的高度和宽度传递给单个simplemodal脚本.这似乎会使计算机知道不为与之相关的每个图像搜索脚本而要做什么的速度会更快. 也许我可以通过"onclick = ...等"来传递css的高度和宽度.

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.

是示例页面， ="a href =" http://chesstao.com/test-2.php"rel =" nofollow> http://chesstao.com/test-2.php .

这可能吗?我该怎么办?

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>

推荐答案

您的代码实际上看起来不错，只需纠正一些简单的错字即可使其正常工作:

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

1. 您永远都不会以最后一个)结束对$.modal的呼叫.
2. 您实际上并没有关闭$(document).ready函数.

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

这是固定版本:

<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

我建议您对正确的空格嵌套保持勤奋，以便您一眼就能发现此类问题.

I'd recommend being diligent about proper whitespace nesting so you can spot issues like this with a glance.

此外，在进行这样的开发时使用javascript控制台可以使您看到来自错别字的错误消息，这样您就可以知道您的概念是否存在缺陷，或者是否有缺少的字符阻止代码被执行运行.

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.

这篇关于一种用于处理图像的简单模式脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！