fancybox - イメージ（親指）をクリックするとFancyBoxに大きなimg /別のURLをロードする方法を教えてください

Question

私はサムネイルである画像の長いリストを持っています。ユーザーがこれらの画像の1つをクリックすると、fancyboxに画像とは異なるURLで大きな画像をロードします。それ、どうやったら出来るの？

ありがとうございました

Answer 1

私はそれを試していませんが、このようにしてみてください。

$("a#example1").fancybox({ 
    // some other options, 
    'href'  : 'http://link/of/the/true/image.jpg' 
}); 

このようなHTML、

<a href="#" id="example1"><img src="/link/to/thumb.jpg" /></a> 

---

またはこれが動作するようにHTMLで、

<a href="http://link/of/the/true/image.jpg" id="example1"> 
    <img src="/link/to/thumb.jpg" /> 
</a> 

jqueryの

$("a#example1").fancybox({ 
    'titleShow'  : false 
}); 

Answer 2

私がこれをやろうとしていたのであれば、ファイル名のフラグを除いて類似のファイル名を持つ2つの画像を作成するだけで、そのサイズに応じて-thumb AND -largeのように表示されます。

<script> 
var openFancyBox = function(url,w,h){ 
    $.fancybox({ 
     type: 'iframe', 
     href: url, hideOnContentClick: true, 
     showCloseButton: false, 
     overlayShow: true, 
     overlayOpacity: 0.15, 
     'scrolling': 'no', 
     centerOnScroll: true, 
     titleShow: false, ' 
     padding': 0, 
     'autoDimensions': false, 
     'margin': 0, 
     'width' : w, 
     'height': h 
    }); 
}; 
</script> 

次にあなたがその場であなたのfancyboxを作成して呼び出すことができます：

openFancyBox('/path-to-my/image-thumb.jpg', 200, 50); 

あなたは、単にあなたのガイドとして次のスクリプトを使用して、URLを切り替えることをやっBY