jQueryはマウスオーバーで1つ、クリックで別のことを行うにはどうすればよいですか？

Question

イメージを表示する2つの方法があるフォトギャラリーを構築しています。最初はマウスオーバーでツールチップのプレビューイメージが表示され、2つ目はクリックするとプレビューイメージで新しいページに移動し、画像の詳細については、あなたはiStockの写真の上になければなりません同じよう：http://ee.rouviere.com/%5Ehtml/photography/index.html

現在、私はあなたがクリックすると、プレビュー画像を育てるためにうまく動作fancyboxを使用しています：http://www.istockphoto.com/stock-photo-2159036-hot-air-balloons.php

をあなたはここに私の開発ページを表示することができますサムネイルに。ただし、サムネイルの上にマウスを移動すると表示されるように変更したいと考えています。 http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/画像をクリックすると、画像を新しいウィンドウに読み込むのではなく、画像の詳細ページに移動すると、これは完璧です。

現在fancybox jQueryのコードは次のようである：

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $("a.view-preview").fancybox({ 
     'titleShow'  : false, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic' 
    }); 
}); 
</script> 

私はこの上で取得することができます任意の助けをいただければ幸いです。ありがとう！

Answer 1

ライトボックス（ファンシーボックス）の代わりにツールチップが必要です。 jQueryTools Tooltipのようなツールチッププラグインを試してみてください。

---

アップデート：次のHTMLレイアウトで動作するようにプラグインコードを更新しました。 <a>タグの#を、ユーザーが画像をクリックしたときに移動したいページに置き換えます。また、ここにはdemoがあります。

<ul> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" data-caption="Lake and a mountain" alt="gallery thumbnail" /> 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" data-caption="Fly fishing" alt="gallery thumbnail" /> 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" data-caption="Autumn" alt="gallery thumbnail" /> 
    </a> 
    </li> 
    <li> 
    <a href="#"> 
     <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" data-caption="Skiing on a mountain" alt="gallery thumbnail" /> 
    </a> 
    </li> 
</ul> 

これは、更新されたスクリプトは次のようになります。

/* 
* Image preview script 
* powered by jQuery (http://www.jquery.com) 
* 
* written by Alen Grakalic (http://cssglobe.com) 
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery 
* 
*/ 

this.imagePreview = function(){ 
    /* CONFIG */ 

    xOffset = 10; 
    yOffset = 30; 

    // these 2 variable determine popup's distance from the cursor 
    // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $("img.preview").hover(function(e){ 
    var t = $(this).attr('data-caption'); 
    var c = (t != "") ? "<br/>" + t : ""; 
    $("body").append("<p id='preview'><img src='"+ $(this).attr('data-fullimg') +"' alt='Image preview' />"+ c +"</p>"); 
    $("#preview") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast"); 
    }, function(){ 
    $("#preview").remove(); 
    }); 
    $("img.preview").mousemove(function(e){ 
    $("#preview") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px"); 
    }); 
}; 

// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
});