内部缩放css图像库

我有一个工作内部可缩放图像使用下面的代码，我想修改它到一个图像库缩放选定的图像元素，但无法弄清楚如何开始。我想是在下面的第二超链接的图像源（“img_02” SRC =“），以取代所述第一。任何棚任何光好吗？内部缩放css图像库

<html> 
<head> 
<script src="../jquery-1.8.3.min.js"></script> 
<script src="../jquery.elevatezoom.js"></script> 
</head> 
<body> 

    <img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg"> 
     <img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">  
     <div id="zoom_01"> 
       <a href="#" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg"> 
       <img id="img_01" src="../images/package_thumb.jpg" /></a> 

       <a href="#" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg"> 
       <img id="img_02" src="../images/coffee_thumb.jpg" /></a> 
     </div> 

<!--initiate the plugin and pass the id of the div containing gallery images--> 

<script> 
$('#zoom_01').elevateZoom({zoomType: "inner", cursor: "crosshair",}); 
</script> 

</body> 
</html>

来源

2014-04-22 user3492855

通过画廊，你的意思就像这里显示的那样：http://www.elevateweb.co.uk/image-zoom –

你试过按照文档？ http://www.elevateweb.co.uk/image-zoom/examples#gallery-lightbox – leo

或多或少的伊姆兰，是的，我做过，但我没有设法制作他们的“画廊和灯箱”的作品。由于我已经有了基本的内部缩放工作（并理解它为什么会这样做），所以我想尝试将图像源扩展为具有可选元素的图库。 – user3492855

1）ID不应该被用来更然后曾经在一个HTML〜你曾用“zoom_01” 3次，只使用它的第一个图像

2）要创建一个画廊，你应该使用此代码：

$("#zoom_01").elevateZoom({gallery:'gallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

这里是固定的HTML ：

<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg"> 
<div id="gallery"> 
     <a href="../images/package_big.jpg" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg"> 
     <img id="img_01" src="../images/package_thumb.jpg" /></a> 

     <a href="../images/coffee_big.jpg" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg"> 
     <img id="img_02" src="../images/coffee_thumb.jpg" /></a> 
</div>

是的演示网站HTMl代码是错误的:)〜我会给他们发一封邮件。

来源

2014-04-22 08:36:10

我已经表明我跟随了这个例子，并且无法让它正常工作，所以简单地把我引回去就没有添加任何东西。我已经提出了更具体的问题，表明我在哪里，希望别人能够提供帮助。我想要的是上面第二个超链接（“img_02”）中的图像源代替第一个超链接。 – user3492855

我改变了我的答案，更新你的代码，并让我知道这是否解决了问题！ –

代码现在可以运行Imran，谢谢。一个问题：画廊链接是基于js的，并且在javascript被禁用或阻止时不会运行。我不介意在这种情况下缩放无效，但图像链接必须保持有效。我正在调查这个，现在，如果你可以进一步建议，将不胜感激 – user3492855

内部缩放css图像库

回答

相关问题