Jquery Image Hover

balkan7 · June 3, 2012

Hello

I'm trying to make jquery hover images but show me nothing, where is my mistake ?

gallery.html

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div class="gallery">
	 	 <ul class="items">
	 	 	<ul>
     	 <li><span class="img_frame"><a href="img/s6300159.jpg"><img src="img/test1.jpg" /></a></span><div class="img_desc"><span>22</span></div></li>
     	 <li><span class="img_frame"><a href="img/s6300159.jpg"><img src="img/test1.jpg" /></a></span><div class="img_desc"><span>23</span></div></li>
     	 <li><span class="img_frame"><a href="img/s6300159.jpg"><img src="img/test1.jpg" /></a></span><div class="img_desc"><span>24</span></div></li>
      </ul>
      </ul>
</div>
</body>
</html>

style.css

/*
GALLERY STYLES
*/

.gallery {overflow:hidden; width:1000px;}
.gallery .items { margin-bottom:50px; height:320px; }
.gallery .items li { position:relative; float:left;  width:290px; height:180px; margin-right:38px; margin-bottom: 30px; }
.gallery .items li img { width:277px; height:165px; }

.img_desc {
position: absolute;
  display: block;
  top: 10px; 
text-shadow: 1px 1px 0 #ffffff;
color: #262626;  
background: url(img/benefits_on.png) repeat;
width: 36px;
right: 5px;
text-align: center;
}


.img_frame {
  margin-top:3px;
    padding:1px;
    display:inline-block;
    line-height:0px;
    background:#fff;
    border:1px solid #ccc;
}

.img_frame img {
    padding:1px;
    border:4px solid #f2f1f0;
}
.img_frame a { display:block; }

.hover_image { background:url("img/preview_image.png") center center no-repeat; }

default.js

<!-- Image hover effect -->
function image_hover(frame){
    var link_content = jQuery(frame).find('a[href^=http], a[href*=www], a[href=#], a[href$=html], a[href$=php], a[href$=asp], a[href$=htm], a[href$=shtml], a[href$=aspx]');
    var image_content = jQuery(frame).find('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]');
    var video_content = jQuery(frame).find('a[href*=vimeo], a[href*=youtube], a[href*=swf], a[href*=flv], a[href*=avi], a[href*=mov], a[href*=mpg]');
    
    link_content.addClass("hover_link");
    image_content.removeClass("hover_link").addClass("hover_image");
    video_content.removeClass("hover_link").addClass("hover_video");
    
jQuery(frame).find("a > img").hover(
	function() {
	    if(!jQuery(this).parent().hasClass("no_hover")){
			jQuery(this).stop().animate({"opacity": ".6"}, "400");
		}
	},
	function() {
		jQuery(this).stop().animate({"opacity": "1"}, "400");
});
    
    jQuery(frame).children("a.no_hover").removeClass("hover_image");
    return false;
}

jQuery(function(){

    image_hover('.img_frame');
});

Sign In

Jquery Image Hover

Recommended Posts

balkan7

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information