I'm working on a hack to get the jLoupe working with a gallery [Bitvolution Image Galleria] in such a way
it dynamically uses the updated image info to the zoomed image. it uses the longdesc tag for full-size image info data [word-press environment, so medium, large and full size versions avail].
At this moment I managed to get the longdesc attached to both hyperlink as well as
the image [for testing] via php. So all info is avaiable for Jquery and it's plugins. [dynamically created]
Even reading it out with alert it works ok!] But I only get the first full-size image for the
zooming.... So the jLoupe doesn't update the visual aspect so it seems.
Any suggestions? I'm pretty close !
kind regards Valentijn
/// the jloupe jquery part:
- var loupe = {'width' : 200, 'height': 151};
- $('<div id="thejLoupe"/>').addClass('thejLoupe').css('position','absolute').css('width',loupe.width+'px').css('height',loupe.height+'px').css('backgroundColor','rgba(0,0,0,0.25)').hide().appendTo('body');
- $('<div id="zoomWrapper" />').css('width',loupe.width-10+'px').css('height',loupe.height-10+'px').css('overflow','hidden').css('marginTop','5px').css('marginLeft','5px').appendTo('#thejLoupe');
-
- $('.jLoupe').each(function(){
- //var s = ($(this).attr('longdesc') != undefined) ? $(this).attr('longdesc') : $(this).attr('src');
- var s = $(this).attr('longdesc');//($(this).attr('longdesc') != undefined) ? $(this).attr('longdesc') : $(this).attr('src');
-
- var i = $('<img />').bind('load',function(){
- $(this).data('size',{'width':this.width, 'height':this.height});
- }).attr('src', s).hide().appendTo('#zoomWrapper');
- $(this).data('zoom',i);
-
- })
- .bind('mousemove', function(e){
-
- //alert($(this).attr('longdesc'));
- var o = $(this).offset();
- var i = $(this).data('zoom');
- $('#thejLoupe').css('left',e.pageX+10).css('top',e.pageY+10);
- var zlo = ((e.pageX - o.left) / this.width) * $(i).data('size').width - (loupe.width/2) - 14;
- var zto = ((e.pageY - o.top) / this.height) * $(i).data('size').height - (loupe.height/2) - 14;
- $(i).css('marginLeft', zlo * -1 + 'px').css('marginTop', zto * -1 + 'px').show();
- })
- .bind('mouseout', function(e){
- $(this).data('zoom').hide();
- $('#thejLoupe').hide();
-
- })
- .bind('mouseover', function(e){
- $(this).data('zoom').show();
- $('#thejLoupe').show();
- });
So how to update this part I away i really reads the currect longdesc and append this to the zoom box!
Anyone a golden tip? I'm stuck now!
Ps server is really slow. Just for testing at the moment.
ciao Valentijn
Update : insteda of hiding the object I removed it and at onenter function I check if the loup function is there, if not restart loop function....
hide = function() {loupe.remove()},etc
then restartcheck at mouseenter :
$this.mouseenter(function(e) {
if(!loupe){$('.demo').loupe();}
(...) etc
Ps anyone a more decent solution instead of restarting the function??
