Obtenir fancybox et survolez l’icône de suppression pour travailler sur la même image

J’utilise les astuces sur cette question Vignette de superposition avec le bouton Supprimer une image? pour obtenir une icône de survol en surimpression de la superposition à afficher sur les vignettes de ma page.

Mais j’utilise aussi fancybox et je n’arrive pas à faire en sorte que les deux travaillent en même temps. Parce qu’ils ont tous deux besoin de l’élément .

En ce moment, c’est mon code.

 <div class="image-thumb" style="display: inline-block; background-image: url('');" align="center"> <a class="fancybox" href="https://stackoverflow.com/questions/20749253/getting-fancybox-and-hover-remove-icon-to-work-on-the-same-image/filename; ?>" rel="galery1" title="description; ?>">   
 description; ?>

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

Dans l’élément , si je règle la classe sur fancybox, cela fonctionne et si je la supprime, l’icône de survol fonctionne. À court d’idées pour les faire fonctionner tous les deux. Toute aide est la bienvenue.

… parce qu’ils ont tous deux besoin de l’élément

En fait, vous pouvez lier fancybox à n’importe quel élément HTML autre que utilisant les atsortingbuts spéciaux fancybox data-fancybox-* donc la classe fancybox de votre balise et ajoutez-la à sa


 parent

Puis définissez les href , title et group comme suit:

   description; ?>

Voir JSFIDDLE

Peux-tu essayer,

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

et conservez simplement fancybox comme nom de classe pour votre élément.