Show bigger image when click or hover over small image
Changed Files:
header.php
footer.php
TEST PAGE:
http://www.wautom.com/tests/test.html
Changed Files:
1. http://www.wautom.com/scripts/image_large.js
2. http://www.wautom.com/scripts/image_large.css
3. header.php
include above two .js and .css files
4. footer.php
added this code:
http://www.wautom.com/scripts/footer_added.txt
5. all those top images are modified
6. solve the flash problem:
change from
background-color: rgba(100,100,100, 0.5);
to
background-color: rgba(100,100,100, 1);
that 0.5 means half transparent. with 1, then flash overlapping problem is gone.
Above method is from This:
http://highslide.com/
Method 1: CSS – pop up way — best
http://cssdemos.tupence.co.uk/image-popup.htm
http://stackoverflow.com/questions/12517758/css-for-pop-up-picture-and-hovering
Method 3: using CSS — NOT OK, it pushes other images away
See example code here:
http://www.wautom.com/tests/css_code1.txt
styles.css:
added the enlarge-onhover:hover
Method 4: not good, using JS
onmouseout Event: try it
http://www.w3schools.com/jsref/event_onmouseout.asp
OK Code:
Enlarge thumbnail image on mouse click with demo
http://alexapps.net/HowTo/JavaScript/ThumbToEnlarge/index.xhtml
Own test page:
http://www.wautom.com/tests/image_test.html
PlugIn’s of WordPress:
WordPress › Support » How-To and Troubleshooting
“Click to Enlarge” buttons on Images