image zoom tests
Posted by kll on January 18 2014 17:56:22
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 )
<![CDATA[ <img src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' /> ]]>
use link ( here you can click on the image )
<![CDATA[ <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
<![CDATA[ add_to_head ("<script type='text/javascript' src='".this_theme."/js/jquery.elevatezoom.js'></script>");]]>
and in article use
<![CDATA[ <img id='zoom_01' src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' data-zoom-image='downloads/ARLE0001.GIF' />]]>
or only
<![CDATA[ <img id='zoom_01' src='downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' />]]>
<![CDATA[ <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
<![CDATA[add_to_head ("<link rel='stylesheet' href='".this_theme."/js/prettyPhoto.css' type='text/css']]>
<![CDATA[media='screen' title='prettyPhoto main stylesheet' charset='utf-8' />]]>
<![CDATA[<script src='".this_theme."/js/jquery.prettyPhoto.js' type='text/javascript' charset='utf-8'></script>");]]>
and in article use