KLL-engineering

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 )

use link ( here you can click on the image )

use script (jquery.elevatezoom.js) from

// image zoom in function.php function get_footer() of theme itune
add_to_head ("");
and in article use
<img id='zoom_01' src='https://engineering-news.org/kllfusion01/downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' data-zoom-image='https://engineering-news.org/kllfusion01/downloads/ARLE0001.GIF' />
or only
<img id='zoom_01' src='https://engineering-news.org/kllfusion01/downloads/ARLE0001.GIF' style='margin:5px' alt='' width='120' />
$('#zoom_01').elevateZoom();
with a different number for each image!

$('#zoom_01').elevateZoom();
$('#zoom_02').elevateZoom();

use script (jquery.prettyPhoto.js) from

// image zoom in function.php function get_footer() of theme itune
add_to_head ("<br /> <xmp>media='screen' title='prettyPhoto main stylesheet' charset='utf-8' />
");
and in article use

This will open Google.com in a new window'>

This will open Google.com in a new window'>

$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();

$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '

',
changepicturecallback: function(){ initialize(); }
});

$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '

',
changepicturecallback: function(){ _bsap.exec(); }
});
});