one simplemodal script to handle images

问题

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>

回答1:

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

You never close your call to $.modal with a final ).
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.

来源：https://stackoverflow.com/questions/7780229/one-simplemodal-script-to-handle-images

标签

jquery

simplemodal