如何将 Color box jQuery 插件用于直接 <img> 元素?
How can I use Color box jQuery plugin For direct <img> elements?
我创建了一个媒体库,我想在其中显示带有 colorbox 的图像。
我尝试在其上使用 colorbox 的 HTML 结构如下所示:
<div class="image-gallary">
<img src="/patch_to_image/image_1.png">
<img src="/patch_to_image/image_2.png">
<img src="/patch_to_image/image_3.png">
<img src="/patch_to_image/image_4.png">
</div>
和jQuery初始化是:
$('div.image-gallary>img').colorbox({
rel:'images',
transition:"fade",
opacity:0.5 ,
rel:'group1'
});
当我点击图像时,clorbox 加载并弹出窗口出现,但图像未加载(不显示,仍在加载图像)。
这是因为 Colorbox 依赖锚元素上的 href
属性才能正确加载页面。简单的解决方案是简单地用相应的 <a href="/path/to/image">
包裹每个 <img src="/path/to/image">
元素,这样就可以了。
这背后的原因很简单:从 UI 的角度来看,图像是用来点击的,所以直觉上它们应该被包裹在一个可交互的元素中 (<a>
将是您的必备元素)。想象一下,如果 JS 在页面上不起作用:那将意味着图像仍然可以点击 ;) 这很好 UI!
$(function() {
$('div.image-gallary>a').colorbox({
rel: 'images',
transition: "fade",
opacity: 0.5,
rel: 'group1'
});
});
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
<div class="image-gallary">
<a href="http://i.imgur.com/YzuqChn.gif"><img src="http://i.imgur.com/YzuqChn.gif"></a>
<a href="http://i.imgur.com/Am3foce.gif"><img src="http://i.imgur.com/Am3foce.gif"></a>
</div>
如果您不想修改标记,还有一个替代解决方案:您可以简单地使用插件的 href
选项来指定 URL。请注意,在这种情况下,您将需要遍历所有图像(而不是将集合传递给 .colorbox()
方法,因为您需要分别指向它们的每个 src
属性的指针:
$(function() {
$('div.image-gallary>img').each(function() {
// Iterate through individual images...
// because we need access to their 'src' attribute
$(this).colorbox({
rel: 'images',
transition: "fade",
opacity: 0.5,
rel: 'group1',
href: $(this).attr('src')
});
});
});
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
<div class="image-gallary">
<img src="http://i.imgur.com/YzuqChn.gif" />
<img src="http://i.imgur.com/Am3foce.gif" />
</div>
我创建了一个媒体库,我想在其中显示带有 colorbox 的图像。
我尝试在其上使用 colorbox 的 HTML 结构如下所示:
<div class="image-gallary">
<img src="/patch_to_image/image_1.png">
<img src="/patch_to_image/image_2.png">
<img src="/patch_to_image/image_3.png">
<img src="/patch_to_image/image_4.png">
</div>
和jQuery初始化是:
$('div.image-gallary>img').colorbox({
rel:'images',
transition:"fade",
opacity:0.5 ,
rel:'group1'
});
当我点击图像时,clorbox 加载并弹出窗口出现,但图像未加载(不显示,仍在加载图像)。
这是因为 Colorbox 依赖锚元素上的 href
属性才能正确加载页面。简单的解决方案是简单地用相应的 <a href="/path/to/image">
包裹每个 <img src="/path/to/image">
元素,这样就可以了。
这背后的原因很简单:从 UI 的角度来看,图像是用来点击的,所以直觉上它们应该被包裹在一个可交互的元素中 (<a>
将是您的必备元素)。想象一下,如果 JS 在页面上不起作用:那将意味着图像仍然可以点击 ;) 这很好 UI!
$(function() {
$('div.image-gallary>a').colorbox({
rel: 'images',
transition: "fade",
opacity: 0.5,
rel: 'group1'
});
});
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
<div class="image-gallary">
<a href="http://i.imgur.com/YzuqChn.gif"><img src="http://i.imgur.com/YzuqChn.gif"></a>
<a href="http://i.imgur.com/Am3foce.gif"><img src="http://i.imgur.com/Am3foce.gif"></a>
</div>
如果您不想修改标记,还有一个替代解决方案:您可以简单地使用插件的 href
选项来指定 URL。请注意,在这种情况下,您将需要遍历所有图像(而不是将集合传递给 .colorbox()
方法,因为您需要分别指向它们的每个 src
属性的指针:
$(function() {
$('div.image-gallary>img').each(function() {
// Iterate through individual images...
// because we need access to their 'src' attribute
$(this).colorbox({
rel: 'images',
transition: "fade",
opacity: 0.5,
rel: 'group1',
href: $(this).attr('src')
});
});
});
img {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
<div class="image-gallary">
<img src="http://i.imgur.com/YzuqChn.gif" />
<img src="http://i.imgur.com/Am3foce.gif" />
</div>