Hi,
This feature can be achieve easily using jquery funtions. You have to increase height and width of the image on hover but remember that put the position of image absolute otherwise it will mess up design of the page.
Thanks Nativedude.
Is this inline code I can use? if so can you give me an example?
Was hoping there was a plugin.
Hi,
I am sharing a link which is implemented for click event but you have to change it on hover.
http://www.hdwallpapersplus.com/desktop-wallpapers-hd.html
Click on a image and see.
Yes, just like that but hover.
Can I ask how you do it?
thank you
Is it using the magicthumb plugin?
I looked at it and will do what I need but its paid plugin. I trying to find free solution. Only have 4 images to apply this to.
Thanks for any help
Hi,
Please share your websites link according to that I will create a function of jquery and simply you have to put it into head of web page and it will work fine.
Thanks
Ok great thanks.
I dont have the site posted though yet. WIll that create a problem for doing so?
The images are 200×200 then expand to 600×600.
Ill have to see if I can get the site somehow online somewhere.
Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On hover scale image</title>
<link type="text/css" rel="stylesheet" href="reset.css" />
<script src="jquery.latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main ul li a img").mouseenter(function() {
$(this).animate({height:600,width:600}, 200);
$(this).css("z-index","999");
});
$(".main ul li a img").mouseout(function() {
$(this).animate({height:200,width:200}, 200);
$(this).css("z-index","1");
});
});
</script>
</head>
<body>
<div class="main">
<ul>
<li><a href="#"><img src="images/square.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/square.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/square.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/square.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/square.jpg" alt="" /></a></li>
</ul>
</div>
</body>
</html>
[Please post code or markup between backticks or use the code button. Or better still – use a pastebin. Your posted code may now have been permanently damaged/corrupted by the forum’s parser.]
I will send you a zip file later.
Great thank you.
So I put the script thats in the head section in my header.php then use the unordered list part on the page for the images right?
Hi,
Do few more work:-
1. Include jquery file in header
2. Put proper selecter of the image in jquery function.
Thanks
Now im lost on what to do
1. Include jquery file in header
2. Put proper selecter of the image in jquery function.
I dont know an of this
Hi,
Please send your skype id I will send a complete solution of your problem.
Thanks
@bill_8921: Please do not respond to attempts to solicit contact via these forums.
@navitdude: Use a pastebin to post your solution.
yes esmi.
navitdude. can you just tell me what to paste where and ill see if I can get it going?
I think im back looking for a plugin
