[英]Image rollover effect on fancybox
I'm having some trouble overlaying a .png on my existing .jpg fancybox thumbnail image. 我在将现有的.jpg fancybox缩略图上覆盖.png时遇到了一些麻烦。 The rest works perfect.
其余的完美。
I have 9 images and coded a loop to create my fancybox gallery in PHP. 我有9张图片并编写了一个循环,用PHP创建了我的fancybox画廊。 I'm having some dificulty applying the .png over the existing .jpg thumbnail.
我在将.png应用于现有的.jpg缩略图时有些困难。
This is my PHP code: 这是我的PHP代码:
<?php
$i=1;
$title=array("", "t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9");
for($i; $i<10; $i++)
{
echo "<div id='galeria' class='one-third column alpha'>
<a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a>
</div><!--end 1\3 -->";
$i++;
echo "<div id='galeria' class='one-third column'>
<a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a>
</div><!--end 1\3 -->";
$i++;
echo "<div id='galeria' class='one-third column omega'>
<a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a>
</div><!--end 1\3 -->";
}
?>
I've tried using onMouseOver and onMouseOut with no success. 我尝试使用onMouseOver和onMouseOut没有成功。 (I'm new to JS and jQuery if you can provide detailed help I would really apreciate it).
(如果您可以提供详细的帮助,我是JS和jQuery的新手,我会很感激)。
I don't know if I understand your question, but try this: 我不知道我是否理解您的问题,请尝试以下操作:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(".fancybox").hover(
function(){
$(".imagem-hover",this).fadeIn(100);
},
function(){
$(".imagem-hover",this).fadeOut(100);
}
);
});
</script>
<style>
* {position:relative;}
.fancybox .imagem-hover {position:absolute; z-index:1; display:none;}
</style>
<div id="galeria">
<a class="fancybox" href="imagemGrande.jpg">
<img class="imagem-hover" src="over.png" />
<img src="thumb.jpg" />
</a>
<a class="fancybox" href="imagemGrande.jpg">
<img class="imagem-hover" src="over.png" />
<img src="thumb.jpg" />
</a>
<a class="fancybox" href="imagemGrande.jpg">
<img class="imagem-hover" src="over.png" />
<img src="thumb.jpg" />
</a>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.