FIXED : combination jLoupe + Bitvolution Image Galleri, data is dynamically changed, jLoupe wont update visual

FIXED : combination jLoupe + Bitvolution Image Galleri, data is dynamically changed, jLoupe wont update visual

Hi all,


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

  1. <div id="gallery-1" class="gallery galleryid-437 bitVolClearAfter"><div class="mainImageDiv">    <img class="mainImage jLoupe" longdesc="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Size_p1.png" src="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Size_p1-363x450.png" alt="main gallery image 1"></div><ul><li style="list-style:none;"> <a title="Vivafullsize" href="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Vivafullsize-670x415.png" longdesc="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Vivafullsize.png" rel="lightbox[437]">  <img class="" src="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Vivafullsize-e1273088028823-150x94.png" width="150" height="94" longdesc="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Vivafullsize.png" alt="thumb0" style="opacity: 0.3; "> </a></li>
  2. <li style="list-style:none;"> <a title="Size_p1" href="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Size_p1-363x450.png" longdesc="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Size_p1.png" rel="lightbox[437]">  <img src="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Size_p1-e1273139242724-150x136.png" width="150" height="136" longdesc="http://www.chickonamission.com/cms2010/wp-content/uploads/2010/05/Size_p1.png" alt="thumb1" style="opacity: 1; " class="selected"> </a></li>
  3. </ul></div>
  4.  
/// the jloupe jquery part:


  1. var loupe = {'width' : 200, 'height': 151};

  2. $('<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');
  3. $('<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');
  4. $('.jLoupe').each(function(){
  5. //var s = ($(this).attr('longdesc') != undefined) ? $(this).attr('longdesc') : $(this).attr('src');
  6. var s = $(this).attr('longdesc');//($(this).attr('longdesc') != undefined) ? $(this).attr('longdesc') : $(this).attr('src');
  7. var i = $('<img />').bind('load',function(){
  8. $(this).data('size',{'width':this.width, 'height':this.height});
  9. }).attr('src', s).hide().appendTo('#zoomWrapper');
  10. $(this).data('zoom',i);
  11. })
  12. .bind('mousemove', function(e){

  13. //alert($(this).attr('longdesc'));
  14. var o = $(this).offset();
  15. var i = $(this).data('zoom');
  16. $('#thejLoupe').css('left',e.pageX+10).css('top',e.pageY+10);
  17. var zlo = ((e.pageX - o.left) / this.width) * $(i).data('size').width - (loupe.width/2) - 14;
  18. var zto = ((e.pageY - o.top) / this.height) * $(i).data('size').height - (loupe.height/2) - 14;
  19. $(i).css('marginLeft', zlo * -1 + 'px').css('marginTop', zto * -1 + 'px').show();
  20. })
  21. .bind('mouseout', function(e){
  22. $(this).data('zoom').hide();
  23. $('#thejLoupe').hide();
  24. })
  25. .bind('mouseover', function(e){
  26. $(this).data('zoom').show();
  27. $('#thejLoupe').show();
  28. });


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??