Articles Hierarchy

Articles Home » PHP-Fusion work » image zoom tests

Jan 18 2014

image zoom tests

Posted by kll · In PHP-Fusion work · 2873 Reads · Print

test about pictures in NEWS and ARTICLE and how to zoom them with html image, anchor, js...
only HTML image tag ( here can use your browser "VIEW IMAGE" function on right click )
<img src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' />
use link ( here you can click on the image )
<a href='downloads/ARLE0001.GIF' target='_blank'> <img src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' /></a>
use script (jquery.elevatezoom.js) from
// image zoom in function.php function get_footer() of theme itune add_to_head ("<script type='text/javascript' src='".this_theme."/js/jquery.elevatezoom.js'></script>"); and in article use <img id='zoom_01' src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' data-zoom-image='downloads/ARLE0001.GIF' /> or only <img id='zoom_01' src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' /> <script> $('#zoom_01').elevateZoom(); </script> with a different number for each image!
use script (jquery.prettyPhoto.js) from
// image zoom in function.php function get_footer() of theme itune add_to_head ("<link rel='stylesheet' href='".this_theme."/js/prettyPhoto.css' type='text/css' media='screen' title='prettyPhoto main stylesheet' charset='utf-8' /> <script src='".this_theme."/js/jquery.prettyPhoto.js' type='text/javascript' charset='utf-8'></script>"); and in article use