个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个使用下面代码的可内部缩放的工作图像，我想将其修改为具有所选图像元素缩放功能的图库，但不知道如何开始。我想要的是用下面第二个超链接 ("img_02"src=") 中的图像源替换第一个。有人能解释一下吗？
<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>
最佳答案
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 代码是错误的 :) ~ 我会给他们发邮件。
关于javascript - 具有内部缩放功能的 css 图片库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23214350/
24
4
0
我正在尝试制作一个图片库，我在使用以下代码时遇到的问题是图像不会向左浮动，因为图像大小不同。同样，当我单击图像以查看全尺寸时，它非常 pig 。有没有办法解决这个问题，或者在厨房模式下显示一半的图片。
我正在开发一个简单的照片库/图书馆。到目前为止，我只了解 CSS。我有一个 2 x 3 的 div 网格(很快就会成为照片图标)。 我想做的是给每个 div 图标一个独特的背景图像。现在我该怎么做，因
我正在为 iPhone(照片查看器)寻找一个简单的图片库。我用的是 EasyGallery在 iOS 4 上，我在 iOS 5 下遇到这个画廊的一些问题。Three20 的画廊对我来说太复杂了，有很多
(我的编码经验有限) 我有一个网站模板文件，目前该网站的图片库在新页面中打开，我希望图片库不要打开其他页面/选项卡，而是包含五行和一行的图片同一页面内所有行下方的大主图像，我希望用鼠标滚动时主图像会放
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 6 年前。
我使用模式制作了一个图像库，因此当我单击任何图像时，它将在模式中打开，但有一个问题，我不知道为什么不起作用，任何人都可以看一下下面的代码并尝试帮助我？我认为 JavaScript 代码一切正常，但我不
有数百个 jquery 图像 slider 示例，但找不到文件夹图像库。这是完美的候选人jquery-photo-gallery但不能创建多个组。基本上会有如下的专辑结构: -root_folder
我将使用 Galleriffic jquery 插件来显示我的图像(请查看此处的演示:http://www.twospy.com/galleriffic/advanced.html 我想在图库上方包含
我如何从一个不是最上面的 ul 中隐藏所有 li。 代码:http://jsfiddle.net/mSmbv/375/ 我需要顶部的 li 是唯一隐藏的。所有其他的都应该隐藏起来，直到它们向上滑动进入
我正在尝试在 Django 中制作一个图片库模板，当新图片添加到博客时，它会引入新图片。我想要的是网格中的三列或四列缩略图大小的图像。 到目前为止，我的模板如下所示: {% for image in
所以我是 HTML、CSS、Bootstrap 和 JavaScript 的新手，我制作了这个画廊，它看起来不错，但我需要为移动设备和较小的屏幕修复它。我应该改变什么？ 那些#myImg4,5,12,
我的图库在滚动时工作正常，虽然在图像放大的部分，我希望图库中的第一张图片自动出现在那里，目前它只显示一个空白框，直到你悬停在图像上。 Welcome! M0
I wanted to do something similar to this. 在这种情况下，当用户单击图像时，该图像将以 100% 的浏览器高度显示，并且用户可以转到下一张/上一张图像。当用户再
我有一个使用 jquery 的图片库，我应该从头开始创建它。我无法从左右导航的一部分开始，其中它应该导航到每个图像以全 View 预览并在右侧的右侧缩略图图标上为当前所选图像提供事件类。 我已经做了这
谁能推荐一个好的 javascript 图片库，它具有图像处理功能，例如裁剪、旋转和缩放？ 我到处搜索，只找到一个或其中一个，但没有找到两者的组合。 谢谢。 最佳答案 StudioJS 是一个快速增长
所以我基本上希望能够单击任何小图像并让它们显示在它们上方的较大图像区域中。就像一个画廊。无论如何，它可以用 HTML/CSS 做到这一点吗？ 这是我的代码: HTML
您好，感谢您花时间回答我的问题。 我有一个带有典型文件上传 html 元素的自定义 portlet。但是，我被告知用户应该能够选择已经上传的图像而不是上传新图像。目前，我正在随机页面上加载 Web 内
我将要开发一个需要向用户显示图像组的触摸屏应用程序(不是网络应用程序)。期望呈现具有页面向前/向后功能的 3x3 图像网格。他们可以选择一些，我将只展示这些图片。 我没有看到 ListView 完全符
我尝试结合 react-image-gallery与 react-image-magnify获得具有放大预览效果的画廊并根据react-image-gallery我正在传递的文档 MyReactIma
我正在寻找一个带有水平缩略图和灯箱的 jQuery 图片库。基本上，看起来像 Steam 创意工坊的图片库:http://steamcommunity.com/sharedfiles/filedeta
我是一名优秀的程序员,十分优秀！