画像を扱うためのシンプルモールドスクリプト

Question

私はhttp://communitychessclub.comを持っていて、ウェブサイト全体に散らばっている約20-30個の小さなjpegを持っています。私は画像をクリックして、シンプルモールドのポップアップに大きな写真を載せたいと思います。問題は、サムネイルごとに別々のスクリプトを使用したくないということです。私はちょうど単一のシンプルモダールのスクリプトに各JPEGの高さと幅を渡したいと思います。これは、コンピュータがそれに関連する各画像のためのスクリプトを検索することなく何をすべきかを知ることがより速くなるように思われる。 たぶん私は

http://chesstao.com/test-2.phpは、サンプル・ページである「onclickの= ...などとCSSの高さと幅を渡すことができます。

が可能これますか？私は何をすべきか？

<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

あなたのコードは実際によさそうだ、あなたはそれが正常に動作するように修正するために必要なだけのいくつかの単純なタイプミスがあります。

1. あなたは$.modalウィットにお電話を閉じることはありませんhは最終的に)です。
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> 

そしてa working jsFiddle

は、あなたが一目でこのような問題を見つけることができますので、私は適切な空白のネストについて勤勉であることをお勧めしたいです。

また、このような開発を行っているときにjavascriptコンソールを使用すると、誤植からエラーメッセージが表示され、コンセプトに欠陥があるかどうかを知ることができます。走っている。