balkan7 Posted June 3, 2012 Share Posted 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'); }); Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.