使用錨點標記順利顯示大圖像

Question

我使用這個很酷的圖像滑塊http://www.jscraft.net/demo/plugins/filters/，但正如你所看到的，使用這個滑塊的大圖像可能是一個問題......我基本上想要做的是添加一個在每個較小的圖像周圍定位標籤（如滑塊所示），當您單擊圖像時，它會彈出（或任何類型的平滑顯示，而不會導航離開頁面）該圖像的尺寸較大......任何想法如何做到這一點？也許用jQuery或JavaScript？請注意，我不想使用其他滑塊，也不喜歡混合腳本...

謝謝！

Answer 1

OK OK我this..here是你的代碼..

臨屋的javascript：

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
    $('img.zoomable').css({ cursor: 'pointer' }).live('click', function() { 
     var img = $('img.bigImg'); 
     var bigImg = $('<img />').css({ 
      'max-width': '100%', 
      'max-height': '100%', 
      'display': 'inline' 
      //'margin': '-25% 0 0 -25%' 
     }); 
     bigImg.attr({ 
      src: img.attr('src'), 
      alt: img.attr('alt'), 
      title: img.attr('title') 
     }); 
     var over = $('<div />').text(' ').css({ 
      'height': '100%', 
      'width': '100%', 
      'background': 'rgba(0,0,0,.82)', 
      'position': 'fixed', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.0, 
      'cursor': 'pointer', 
      'z-index': 9999, 
      'text-align': 'center' 
     }).append(bigImg).bind('click', function() { 
      $(this).fadeOut(300, function() { 
       $(this).remove(); 
      }); 
     }).insertAfter(this).animate({ 
      'opacity': 1 
     }, 300); 
    }); 


</script> 

和HTML ：

<img class="zoomable" src="smallImage.jpg" height="100" width="100"/> 
<img class="bigImg" style="visibility:hidden" src="bigImage.jpg"/> 

您必須爲每張圖片添加兩個鏈接。

Answer 2

這是一個名爲Zoomable的插件。給你的形象被稱爲 「縮放」 類，並添加這個腳本

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
    $('img.zoomable').css({ cursor: 'pointer' }).live('click', function() { 
     var img = $(this); 
     var bigImg = $('<img />').css({ 
      'max-width': '100%', 
      'max-height': '100%', 
      'display': 'inline' 
      //'margin': '-25% 0 0 -25%' 
     }); 
     bigImg.attr({ 
      src: img.attr('src'), 
      alt: img.attr('alt'), 
      title: img.attr('title') 
     }); 
     var over = $('<div />').text(' ').css({ 
      'height': '100%', 
      'width': '100%', 
      'background': 'rgba(0,0,0,.82)', 
      'position': 'fixed', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.0, 
      'cursor': 'pointer', 
      'z-index': 9999, 
      'text-align': 'center' 
     }).append(bigImg).bind('click', function() { 
      $(this).fadeOut(300, function() { 
       $(this).remove(); 
      }); 
     }).insertAfter(this).animate({ 
      'opacity': 1 
     }, 300); 
    }); 


</script>