CODEWITHSUNDEEP
jquerycssfancybox
Christian Dechery
Christian Dechery

Reputation: 876

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.

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>

The 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;
}

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.

Upvotes: 0

Views: 1623

Answers (2)

JFK
JFK

Reputation: 41143

...Because they both need the <a> element

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"...

Then set the href, title and group attributes like :

<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>

See JSFIDDLE

Upvotes: 1

Chris Hawkes
Chris Hawkes

Reputation: 12410

Can you try, 

.image-thumb a.fancybox { 
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.fancybox { 
display: block;
}

and just keep fancybox as the class name for your a element.

Upvotes: 1

Related Questions