Below is a html code for creating simple image gallery. Image effect is given by jquery code below it.
<!DOCTYPE html>
<html>
<head><title>effect in image gallery with jquery code example</title></head>
<body>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="galleryfadingeffect.js"></script>
</body>
</html>
Below jquery code galleryfadingeffect.js creates a fading effect over image when hover.
//galleryfadingeffect.js
$(document).ready(function(){
$('.image').css('opacity', '0.6');
$('.image').mouseover(function(){
$(this).fadeTo(100, 1);
$('.image').not(this).fadeTo(100, 0.6);
});
});
<!DOCTYPE html>
<html>
<head><title>effect in image gallery with jquery code example</title></head>
<body>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<img class="image" src="img/school.png" height="200px" width="250px"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="galleryfadingeffect.js"></script>
</body>
</html>
Below jquery code galleryfadingeffect.js creates a fading effect over image when hover.
//galleryfadingeffect.js
$(document).ready(function(){
$('.image').css('opacity', '0.6');
$('.image').mouseover(function(){
$(this).fadeTo(100, 1);
$('.image').not(this).fadeTo(100, 0.6);
});
});
 |
| fading effect after hover on gallery |
No comments:
Post a Comment