获取fancybox和hover remove图标可在同一图像上工作 [英] Getting fancybox and hover remove icon to work on the same image

问题描述

我正在使用有关此问题的提示重叠缩略图和删除图片按钮？获取覆盖悬停移除图标，以便在我的页面上的缩略图上显示。

I'm using the tips on this question Overlay thumbnail with remove image button? to get a overlay hover remove icon to be shown on thumbnails on my page.

但我也使用fancybox，工作在同一时间。因为他们都需要< a> 元素。

But I'm also using fancybox and I can't seem to get both working at the same time. Because they both need the <a> element.

现在，这是我的代码。 >

Right now, this is my code.

<div class="image-thumb" style="display: inline-block; background-image: url('<?php echo base_url().$path.$thumb; ?>');" align="center">
<a class="fancybox" href="<?php echo base_url().$path.$file->filename; ?>" rel="galery1" title="<?php echo $file->description; ?>">
    &nbsp;
</a><br>
<?php echo $file->description; ?></strong>
</div>

CSS：

.image-thumb { 
position: relative; 
width: 150px;
height: 150px; 
/* apply background-image url inline on the element since it is part of the content */
background: transparent url() no-repeat center center;
}

.image-thumb a { 
display: none;
position: absolute; 
top: 2px;  /* position in bottom right corner, assuming image is 16x16 */
left: 126px; 
width: 22px; 
height: 22px; 
background: transparent url('/path/to/remove-icon.gif') no-repeat 0 0;
}   

.image-thumb:hover a { 
display: block;
}

在< a> 元素，如果我将类设置为fancybox，它的工作，如果我删除它，悬浮图标工作。从想法，让他们都工作。任何帮助将是巨大的。

In the <a> element, if I set the class to fancybox, it works, and if I remove it, the hover icon works. Out of ideas to get them both working. Any help would be great.

推荐答案

...因为他们都需要< a>

实际上，您可以绑定fancybox到< a> 之外的任何html元素使用特殊fancybox属性 data-fancybox - * 在< a> 标记中的 fancybox ，并将其添加到其父< div class =image-thumb fancybox...

Actually, you can bind fancybox to any html element other than <a> using the special fancybox attributes data-fancybox-* so get rid of the class fancybox in your <a> tag and add it to its parent <div class="image-thumb fancybox"...

然后设置 href ， title 和 group 属性如：

<div class="image-thumb fancybox" data-fancybox-href="<?php echo base_url().$path.$file->filename; ?>" data-fancybox-group="gallery1" data-fancybox-title="<?php echo $file->description; ?>" style="...">
    <a>&nbsp;</a><strong><?php echo $file->description; ?></strong>
</div>

请参阅 JSFIDDLE

See JSFIDDLE

这篇关于获取fancybox和hover remove图标可在同一图像上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！