2012-02-14 10 views
0

イメージギャラリーをズームするための「方法」に従おうとしています。jQuery html imagem gallery

問題は、それらが提供する "例"で動作しますが、それは私のPC上ではなく、私が想定しているすべてのことをやったことです。

<script type="text/javascript"> 
      $(document).ready(function(){ 
       //Examples of how to assign the ColorBox event to elements 
       $(".group1").colorbox({rel:'group1'}); 
       $(".group2").colorbox({rel:'group2', transition:"fade"}); 
       $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"}); 
       $(".group4").colorbox({rel:'group4', slideshow:true}); 
       $(".ajax").colorbox(); 
       $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); 
       $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"}); 
       $(".inline").colorbox({inline:true, width:"50%"}); 
       $(".callbacks").colorbox({ 
        onOpen:function(){ alert('onOpen: colorbox is about to open'); }, 
        onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, 
        onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, 
        onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, 
        onClosed:function(){ alert('onClosed: colorbox has completely closed'); } 
       }); 

       //Example of preserving a JavaScript event for inline calls. 
       $("#click").click(function(){ 
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 
        return false; 
       }); 
      }); 
     </script> 

<p><a class="group2" href="../images/slider/slide1.png" rel="thumbnail" title="This is beautiful castle for sale!"><img src="../images/slider/slide1.png" style="width: 150px; height: 100px" /></a></p> 

このようにサムネイルをクリックすると、ズームインして背景をブロックする必要があります。これも

アイブ氏:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="../js/jquery.colorbox.js" type="text/javascript"></script> 
<script src="../js/jquery.colorbox-mint.js" type="text/javascript"></script> 

しかし、私はズームしたい画像をクリックすると、それはそのイメージを使用して新しいページを開き、私は私のウェブサイトに再びバックアップする必要があります|やろうとすると、この何ですかイム

:あなたはすべてのそのコードを必要としないhttp://jacklmoore.com/colorbox/example5/

+0

ヒント:アンカータグがあなたのjqueryのコードには表示されません 'のrel = "サムネイルを"'持っています。 – Scott

+0

はサムネイルを作成する別のコードのものです。しかし、それを削除してもまだ動いていません: – user1148875

答えて

0

...

は1つだけの行にjqueryのを編集することができます。

$(document).ready(function(){ 
    $(".group2").colorbox({rel:'group2', transition:"fade"}); 
    });​ 

あなたはページの<head></head>タグの間にスクリプトタグを配置していることを確認する必要があります。

DEMO HERE

+0

助けてくれてありがとう!私はリンク - >オープンイメージを作れば動作します。私が本当に望んでいるのは、サムネイル画像 - >オープンオリジナル画像です。 – user1148875

+0

上記のリンクをもう一度チェックしてください。私は2つの画像を作成しました。 – Scott

+0

私はそれが働いて見る!ありがとうございますが、私のウェブサイトではまだ動作しません:■サムネイルはOKですが、別の画像はズーム自体の代わりに新しいWebページで開きます – user1148875