懸停與PrettyPhoto /燈箱效果？

當用戶翻滾每張圖片時，我想把所有東西都黑掉，並且有一個彈出窗口，用戶可以在其中閱讀某些信息並單擊圖片將它們帶到不同的頁面。

我有什麼，我通過prettyphoto想要的，但用戶需要點擊圖片/不只是在它懸停，

<table class="gallery clearfix" cellpadding="10" cellspacing="40" border="0"> 
      <tr> 
      <td valign="top" width="200px"> 
       <a href="#info_leadership" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/leadership_development.jpg" style="border:none" height="300" /></a> 
      </td> 
      <td valign="top" width="200px"> 
       <a href="#info_team_development" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/team_development.jpg" style="border:none" height="300" /></a> 
      </td> 

     </tr> 
     <tr> 

      <td valign="top"> 
       <a href="#info_strategic_intelligence" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/strategic_intelligence.jpg" style="border:none" height="300" /></a> 
      </td> 
      <td valign="top"> 
       <a href="#info_emotional_social" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/emotional_social.jpg" style="border:none" height="300" /></a> 
      </td> 
     </tr> 
     </table> 
     <div id="info_leadership" style="display:none;"> 
      <p class="table"><b>Leadership Development</b></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
      cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
      Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, 
      varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
      ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> 
     </div> 
     <div id="info_team_development" style="display:none;"> 
      <p class="table"><b>Team Development</b></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
      cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
      Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, 
      varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
      ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> 
     </div> 
     <div id="info_strategic_intelligence" style="display:none;"> 
      <p class="table"><b>Strategic Intelligence</b></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
      cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
      Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, 
      varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
      ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> 
     </div> 
     <div id="info_emotional_social" style="display:none;"> 
      <p class="table"><b>Emotional &amp; Social Intelligence</b></p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
      cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
      Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula, 
      varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
      inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
      ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p> 
     </div> 


     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function() { 
       $("area[rel^='prettyPhoto']").prettyPhoto(); 
       $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ theme: 'light_square' }); 
       $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({ hideflash: true }); 
      }); 
     </script>

來源

2013-01-21 Gazza T

您應該檢查PrettyPhoto文檔，如果有任何的方式來通過懸停觸發。
但我首先想到的是用jQuery來模擬點擊事件。

事情是這樣的：

$(document).ready(function() { 

    $('div').hover(function() { 
     $(this).trigger('click'); 
    }); 

    $('div').click(function() { 
     alert("clicked"); 
    }); 

});

JSFiddle

來源

2013-01-21 03:11:34 intelis

懸停與PrettyPhoto /燈箱效果？

回答

相關問題