How do I do this... Thmb view is zoom of actual pic

Stustaff

As seen in this gallery

http://dgrin.smugmug.com/gallery/167709/1/97315215

The blue splash for example, th little Thmb looks like one splash but if you click on it, the image is larger with two splashes.

My thumbnails are just small versions of the image.

Also it looks neater because all the thumbs are square.

Thanks

DavidTO

You can do it one by one by using the Zoom Thumbnail command in Photo tools, or you can install devbobo's Bulk Zoom Thumbnail hack. It works great!

Andy

DavidTO wrote:

You can do it one by one by using the Zoom Thumbnail command in Photo tools, or you can install devbobo's Bulk Zoom Thumbnail hack. It works great!

Said hack being listed in the FAQ:
http://www.dgrin.com/showthread.php?t=26043

Andy

Andy wrote:

Said hack being listed in the FAQ:
http://www.dgrin.com/showthread.php?t=26043

Or you can do them one-at-a-time via the photo tools menu, when logged in.

Stustaff

Thanks Both I will have a play, I have never noticed that feature!

Stustaff

Ok i pasted all the stuff from the wiki into the relevant places, but I cant see a change? how do I access the Bulk thumb zoom loveliness?

EDIT

Right I see where the option should be by looking at the screenshot in devbobos post for this but I dont have the 'Bulk zoom thumbnail' button available? see here http://stuarthill.smugmug.com/gallery/2352115

DavidTO

Stustaff wrote:

Ok i pasted all the stuff from the wiki into the relevant places, but I cant see a change? how do I access the Bulk thumb zoom loveliness?

You have to have access to originals on, and when logged in you should see a little checkbox for the function.

Stustaff

Ah Originals is why I didnt see it! can I turn them back off after?

DavidTO

Stustaff wrote:

Ah Originals is why I didnt see it! can I turn them back off after?

You will see the checkbox whether or not originals are on. But the script can only work with originals enabled. And yes, once the script is done running, you can turn originals back off.

You could hide the gallery while you do the work, if that would make you more comfortable.

Stustaff

Ah I have pasted everything in but dont see the bulk zoom thumb box!

ivar

Stustaff wrote:

Ah I have pasted everything in but dont see the bulk zoom thumb box!

Hi Stu,

I think there is a problem with the BZT code on the wiki, I'll try and sort it out, or have Dev do it (my personal favorite) I'm sorry for the inconvenience.

Stustaff

Thanks Ivar I have repasted and deff not working at the moment.

DavidTO

Until they get the Wiki problems sorted out, you can try this code, it's working for me.

/*============================*/
/*== Bulk Zoom thumbnail v2.4 ==*/
/*============================*/
var thumbnailArray = new Array();
var thumbnailCount;
var thumbnailItem;
var thumbnailEXIFArray = new Array();
var reqIncrement = 0;

addEvent(window, "load", addBulkThumbnail);

function addBulkThumbnail()
{
  if (isClass("galleryPage"))
  {
    if ((isClass("traditional")) || (isClass("allthumbs")) ||  (isClass("smugmug_small")) ||  (isClass("smugmug")))
    {
      if (isClass("loggedIn"))
      {
        onStartBulk();

        divTag = document.getElementById("photoTools");

        document.getElementById("bulkSave").disabled = true;

        objSpan = document.createElement("span");
        objSpan.className = "foreground";
        divTag.appendChild(objSpan);

        objButton = document.createElement("input");
        objButton.type = "checkbox";
        objButton.id = "bulkzoom";
        objSpan.appendChild(objButton);
        addEvent(objButton, "click", toggleBulkZoom);

        objText = document.createTextNode(' bulk zoom thumbnail');
        objSpan.appendChild(objText);
      }
    }
  }
}

function toggleBulkZoom()
{
  if (document.getElementById('bulkzoom').checked)
    processThumbnails();
  else
    window.location = window.location;
}

function processThumbnails()
{
  document.getElementById("ajaxWorking").innerHTML = "<strong><strong>Loading...</strong></strong>"
  toggleDIV('ajaxWorking','','block');

  document.getElementById("bulkzoom_toolbox").style.display = "";
  thumbnailEXIFArray = imageIDs.slice(0);
  getThumbnailEXIF();
}

function maskThumbnails(objThumbnail, j)
{
  re1 = /\/gallery\/\d+\/\d+\/(\d+)/
  re2 = /javascript\:openLB\(([0-9]+),/;

  divTag = document.getElementById("thumbnails") ? document.getElementById("thumbnails") : document.getElementById("photos");

  if (divTag)
  {
    divTags = divTag.getElementsByTagName("div");

    for (i=0; i<divTags.length; i++)
    {
      if (divTags[i].className == "photo")
      {
        if (re1.test(divTags[i].innerHTML))
          re1.exec(divTags[i].innerHTML);
        else
        {
          if (re2.test(divTags[i].innerHTML))
            re2.exec(divTags[i].innerHTML);
          else
            continue;
        }

        thumbnailId = RegExp.$1;
        aTags = divTags[i].getElementsByTagName("a");
        imgTags = aTags[0].getElementsByTagName("img");

        if (objThumbnail.thumbnailId == thumbnailId)
        {
          maskedDiv = document.createElement("div");
          maskedDiv.id = thumbnailId + "_masked";
          maskedDiv.className = j;
          maskedDiv.style.cssText = "position: relative; background: transparent url('" + webServer+"/photos/toolthumbs.mg?tool=cropmask&Size=Small&ImageID="+ thumbnailId + "') no-repeat; width: " + objThumbnail.imgWidth + "px; height: " + objThumbnail.imgHeight + "px; z-index: 1; margin:0px auto; text-align:left;";

          clearedDiv = document.createElement("div");
          clearedDiv.id = thumbnailId + "_cleared";
          clearedDiv.className = j;
          clearedDiv.style.cssText = "position: absolute; background: url('" + webServer+"/photos/"+ thumbnailId + "-S" + objThumbnail.modifier + ".jpg') no-repeat; width: " + objThumbnail.imgWidth + "px; height: " + objThumbnail.imgHeight + "px; z-index: 2; clip:rect(0px," + objThumbnail.imgWidth + "px," + objThumbnail.imgHeight + "px,0px);";

          maskedDiv.appendChild(clearedDiv);

          cropboxDiv = document.createElement("div");
          cropboxDiv.id = thumbnailId + "_cropbox";
          cropboxDiv.className = j;
          cropboxDiv.style.cssText = "position: absolute; left: 0px; top: 0px; width: " + (objThumbnail.imgWidth-4) + "px; height: " + (objThumbnail.imgHeight-4) + "px; border: solid 2px blue; z-index: 3; cursor: move";
          addEvent(cropboxDiv, "mousedown", testMouseBulk);
          clearedDiv.appendChild(cropboxDiv);

          ratioboxDiv = document.createElement("div");
          ratioboxDiv.id = thumbnailId + "_ratiobox";
          ratioboxDiv.className = j;
          ratioboxDiv.style.cssText = "position: absolute; bottom: 0px; right: 0px; width: 25px; height: 25px; border-top: solid 2px blue; border-left: solid 2px blue;  cursor: pointer; cursor: hand; z-index: 4;";
          addEvent(ratioboxDiv, "mousedown", testZoomBulk); 
          cropboxDiv.appendChild(ratioboxDiv);
          
          divTags[i].replaceChild(maskedDiv, aTags[0]);
          divTags[i].style.width = objThumbnail.imgWidth + "px";
          divTags[i].style.height = objThumbnail.imgHeight + "px";
        }
      }
    }
  } 
}

function getThumbnailEXIF()
{
  var thumbnail = thumbnailEXIFArray.pop();

  if (thumbnail)
  {
    postArray = new Array();
    postArray['tool'] = 'lightBoxImage';
    postArray['ImageID'] = thumbnail;
    postArray['size'] = 'Original';
    postArray['pageType'] = pageType;
    postArray['pageTypeDetails'] = pageTypeDetails;
    postArray['siteUser'] = siteUser;
    ajax_query(processThumbnailEXIF, webServer+'/hack/RPC/gallery.mg', postArray, true);
    window.setTimeout(getThumbnailEXIF, 100);
  }
  else
  {
    toggleDIV('','ajaxWorking','block');

    if (isClass("loggedIn"))
      document.getElementById("bulkSave").disabled = false;
  }

}

function processThumbnailEXIF(response)
{
  re = /\/photos\/(\d+)\-(O|L|M|S)(\-\d+)?\.jpg[\s\S]+,(\d+),(\d+),(false|true)/;

  response = URLDecode(response);
  re.exec(response);

  if (RegExp.$2 != "O")
  {
    toggleDIV('','ajaxWorking','block');
    alert("Error: bulk zoom thumbnail requires access to originals.\n\"" + RegExp.$1 + "\" \"" + RegExp.$2 + "\" \"" + RegExp.$4 + "\" \"" + RegExp.$5 + "\"");
    return;
  }
  sThumbnailId = RegExp.$1;
  sThumbnailModifier = RegExp.$3;
  imgWidth = parseInt(RegExp.$4);
  imgHeight = parseInt(RegExp.$5);

  temp = new Array();
  thumbnailArray[thumbnailArray.length] = temp;
  thumbnailArray[thumbnailArray.length-1].thumbnailId = sThumbnailId;
  thumbnailArray[thumbnailArray.length-1].modifier = sThumbnailModifier;

  if (imgWidth < imgHeight)
  {
    thumbnailArray[thumbnailArray.length-1].imgHeight = 300;
    thumbnailArray[thumbnailArray.length-1].imgWidth = Math.round((imgWidth / imgHeight) * 300);
  }
  else
  {
    thumbnailArray[thumbnailArray.length-1].imgWidth = 400;
    thumbnailArray[thumbnailArray.length-1].imgHeight = Math.round((imgHeight / imgWidth) * 400);
  }

  thumbnailArray[thumbnailArray.length-1].ratio = 0;
  thumbnailArray[thumbnailArray.length-1].invRatio = 0;
  thumbnailArray[thumbnailArray.length-1].marginTop = 0;
  thumbnailArray[thumbnailArray.length-1].marginLeft = 0;
  thumbnailArray[thumbnailArray.length-1].cropHeight = thumbnailArray[thumbnailArray.length-1].imgHeight;
  thumbnailArray[thumbnailArray.length-1].cropWidth = thumbnailArray[thumbnailArray.length-1].imgWidth;
  thumbnailArray[thumbnailArray.length-1].oRatio = (imgWidth / thumbnailArray[thumbnailArray.length-1].imgWidth);
  thumbnailArray[thumbnailArray.length-1].cropDiff = 0;

  maskThumbnails(thumbnailArray[thumbnailArray.length-1], thumbnailArray.length-1);
  //getThumbnailEXIF();
}

function zoomThumbnails()
{
  if (!thumbnailItem)
  {
    thumbnailItem = 0;
    thumbnailCount = thumbnailArray.length;
  }

  var thumbnail = thumbnailArray.pop();
  
  if (thumbnail)
  {
    thumbnailItem++; 

    postArray = new Array();
    postArray['tool'] = 'newthumb';
    postArray['ImageID'] = thumbnail.thumbnailId;
    postArray['action'] = "doit";
    postArray['crop_h'] = Math.round(parseInt(thumbnail.cropHeight) * parseFloat(thumbnail.oRatio));
    postArray['crop_w'] = Math.round(parseInt(thumbnail.cropWidth) * parseFloat(thumbnail.oRatio));
    postArray['crop_x'] = Math.round(parseInt(thumbnail.marginLeft) * parseFloat(thumbnail.oRatio));
    postArray['crop_y'] = Math.round(parseInt(thumbnail.marginTop) * parseFloat(thumbnail.oRatio));

    reqIncrement ++;
    updateAjaxStatus();
    window.setTimeout('ajax_query(thumbReqHandler, webServer+\'\/photos\/tools.mg\', postArray, true, true);', 10);
    window.setTimeout(zoomThumbnails, 50);
  } 
}


function thumbReqHandler() {
  updateAjaxStatus();

  reqIncrement--;

  if (thumbnailArray.length == 0 && reqIncrement == 0) {
      window.location = window.location;
  }
}

function updateAjaxStatus(sStr) {
var ajx = document.getElementById("ajaxWorking");

  if (thumbnailArray.length == 0)
    ajx.innerHTML =  'Processing thumbnail ' + (thumbnailCount - reqIncrement + 1) + ' of ' + thumbnailCount;
  else
    ajx.innerHTML = 'Sending request ' + reqIncrement + ' of ' + thumbnailCount;


  if (sStr) {
    ajx.innerHTML = ajx.innerHTML + sStr;
  }

  toggleDIV('ajaxWorking','','block');
}

var smallestBulk = 75;   
var mouseXBulk = 0;
var mouseYBulk = 0;
var mouseToolBulk = "move";
var hideRatioBulk = false;    
var scaleBulk = 1;
var pageLoadedBulk = false;

function onStartBulk()
{
  pageLoadedBulk = true;
}        

function moveBulk(X,Y,e)
{
  if (pageLoadedBulk == true)
  {
    try
    {
      var objClass;

      if (e.srcElement)
        objClass = e.srcElement.className
      else
        objClass = e.target.className

      X = X*scaleBulk;
      Y = Y*scaleBulk;
      newLeft = thumbnailArray[objClass].marginLeft+X;
      newTop = thumbnailArray[objClass].marginTop+Y;                                
      stopX = thumbnailArray[objClass].imgWidth-thumbnailArray[objClass].cropWidth;
      stopY = thumbnailArray[objClass].imgHeight-thumbnailArray[objClass].cropHeight;

      if (newLeft < 0)
        newLeft = 0;

      if (newLeft > stopX)
        newLeft = stopX;

      if (newTop < 0)
        newTop = 0;

      if (newTop > stopY)
        newTop = stopY;

      thumbnailArray[objClass].marginLeft = newLeft;
      thumbnailArray[objClass].marginTop = newTop;
      if (e.srcElement)
        objNode = e.srcElement;
      else
        objNode = e.target;
      while (objNode.id != thumbnailArray[objClass].thumbnailId + "_cropbox")
        objNode = objNode.parentNode;

      updateCropBulk(objNode);
    }
    catch(e) {}
  }
  else
  {
    window.alert("Page loading, please wait.");
  }
}        

function zoomBulk(X,Y,e)
{
  if (pageLoadedBulk == true)
  {
    try
    {
      var objClass;

      if (e.srcElement)
        objClass = e.srcElement.className
      else
        objClass = e.target.className                

      if (thumbnailArray[objClass].ratio == 0)
      {
        Xadj = thumbnailArray[objClass].cropWidth+(X*scaleBulk);
        Yadj = thumbnailArray[objClass].cropHeight+(Y*scaleBulk);
      }
      else
      {
        Xadj = 0;
        Yadj = 0;
      }

      newWidth = thumbnailArray[objClass].cropWidth+(X*scaleBulk);
      newHeight = Math.round(newWidth*thumbnailArray[objClass].ratio)+Yadj;

      if (newWidth < smallestBulk)
      {
        newWidth = smallestBulk;
        newHeight = Math.round(newWidth*thumbnailArray[objClass].ratio)+Yadj;
      }

      if (newHeight < smallestBulk)
      {
        newHeight = smallestBulk;
        newWidth = Math.round(newHeight*thumbnailArray[objClass].invRatio)+Xadj;
      } 

      if (newWidth+thumbnailArray[objClass].marginLeft > thumbnailArray[objClass].imgWidth)
      {
        newWidth = thumbnailArray[objClass].imgWidth-thumbnailArray[objClass].marginLeft;
        newHeight = Math.round(newWidth*thumbnailArray[objClass].ratio)+Yadj;
      } 

      if (newHeight+thumbnailArray[objClass].marginTop > thumbnailArray[objClass].imgHeight)
      {
        newHeight = thumbnailArray[objClass].imgHeight-thumbnailArray[objClass].marginTop;
        newWidth = Math.round(newHeight*thumbnailArray[objClass].invRatio)+Xadj;
      }                

      thumbnailArray[objClass].cropWidth = newWidth;
      thumbnailArray[objClass].cropHeight = newHeight;
 
      if (e.srcElement)
        objNode = e.srcElement;
      else
        objNode = e.target;

      while (objNode.id != thumbnailArray[objClass].thumbnailId + "_cropbox")
        objNode = objNode.parentNode;

      updateCropBulk(objNode);
    }
    catch(e) {}
    
  }
  else
  {
    window.alert("Page loading, please wait.");
  }
}        

function changeRatioBulk(newRatios)
{
  if (pageLoadedBulk == true)
  {
    newRatio = newRatios.split(",");

    for (i=0; i<thumbnailArray.length; i++)
    {
      if (thumbnailArray[i].imgHeight > thumbnailArray[i].imgWidth)
      {
        thumbnailArray[i].ratio = newRatio[1];
        thumbnailArray[i].invRatio = newRatio[0];
      }
      else
      {
        thumbnailArray[i].ratio = newRatio[0];
        thumbnailArray[i].invRatio = newRatio[1];
      }

      if (thumbnailArray[i].ratio == 0)
      {
        document.getElementById('customRatio').style.display = "none";
        thumbnailArray[i].marginTop = 0;
        thumbnailArray[i].marginLeft = 0;
        thumbnailArray[i].cropHeight = thumbnailArray[i].imgHeight;
        thumbnailArray[i].cropWidth = thumbnailArray[i].imgWidth;
      }
      else
      {
        if (newRatios == "custom")
        {
          thumbnailArray[i].ratio = document.cropTool.ratioH.value/document.cropTool.ratioW.value;
          thumbnailArray[i].invRatio = document.cropTool.ratioW.value/document.cropTool.ratioH.value;
          document.getElementById('customRatio').style.display = "block";
        }
        else
          document.getElementById('customRatio').style.display = "none";

        thumbnailArray[i].cropWidth = Math.round(1*thumbnailArray[i].imgWidth);

        thumbnailArray[i].cropHeight = Math.round(thumbnailArray[i].cropWidth*thumbnailArray[i].ratio);        

        if ((thumbnailArray[i].cropHeight > thumbnailArray[i].imgHeight)||(thumbnailArray[i].cropWidth > thumbnailArray[i].imgWidth))
        {
          thumbnailArray[i].cropHeight = thumbnailArray[i].imgHeight;  
          thumbnailArray[i].cropWidth = Math.round(thumbnailArray[i].cropHeight*thumbnailArray[i].invRatio);
        }   

        thumbnailArray[i].marginTop = ((thumbnailArray[i].imgHeight-thumbnailArray[i].cropHeight)/2);
        thumbnailArray[i].marginLeft = ((thumbnailArray[i].imgWidth-thumbnailArray[i].cropWidth)/2);
      }

      updateCropBulk(document.getElementById(thumbnailArray[i].thumbnailId + "_cropbox"));
    }
  }
  else
  {
     window.alert("Page loading, please wait.");
  }
}        

function rotateBulk()
{
  if (pageLoadedBulk == true)
  {
    for (i=0; i<thumbnailArray.length; i++)
    {
      if (thumbnailArray[objClass].ratio == 0)
      {
        Xadj = thumbnailArray[i].cropHeight;
        Yadj = thumbnailArray[i].cropWidth;
      }
      else
      {
        Xadj = 0;
        Yadj = 0;
      }

      temp = thumbnailArray[objClass].invRatio;
      thumbnailArray[objClass].invRatio = thumbnailArray[objClass].ratio;
      thumbnailArray[objClass].ratio = temp;
      temp = thumbnailArray[i].cropWidth;
      thumbnailArray[i].cropWidth = thumbnailArray[i].cropHeight;
      thumbnailArray[i].cropHeight = temp;  

      if (thumbnailArray[i].cropWidth+thumbnailArray[i].marginLeft > thumbnailArray[i].imgWidth)
      {
        thumbnailArray[i].marginLeft = thumbnailArray[i].imgWidth-thumbnailArray[i].cropWidth;

        if (thumbnailArray[i].marginLeft < 0)
        {
          thumbnailArray[i].marginLeft = 0;
          thumbnailArray[i].cropWidth = thumbnailArray[i].imgWidth-thumbnailArray[i].marginLeft;
          thumbnailArray[i].cropHeight = Math.round(thumbnailArray[i].cropWidth*thumbnailArray[objClass].ratio)+Yadj;                        
        }
      } 

      if (thumbnailArray[i].cropHeight+thumbnailArray[i].marginTop > thumbnailArray[i].imgHeight)
      {
        thumbnailArray[i].marginTop = thumbnailArray[i].imgHeight-thumbnailArray[i].cropHeight;

        if (thumbnailArray[i].marginTop < 0)
        {
          thumbnailArray[i].marginTop = 0;
          thumbnailArray[i].cropHeight = thumbnailArray[i].imgHeight-thumbnailArray[i].marginTop;
          thumbnailArray[i].cropWidth = Math.round(thumbnailArray[i].cropHeight*thumbnailArray[objClass].invRatio)+Xadj;
        }
      }

      if (hideRatioBulk != true)
      {
        //temp = document.cropTool.ratioH.value
        //document.cropTool.ratioH.value = document.cropTool.ratioW.value;
        //document.cropTool.ratioW.value = temp;
      }

      updateCropBulk(document.getElementById(thumbnailArray[i].thumbnailId + "_cropbox"));
    }
  }
  else

    window.alert("Page loading, please wait.");
}        

function updateCropBulk(e)
{
  objClass = e.className;
  e.parentNode.style.clip = "rect("+thumbnailArray[objClass].marginTop+"px "+(thumbnailArray[objClass].marginLeft+thumbnailArray[objClass].cropWidth)+"px "+(thumbnailArray[objClass].marginTop+thumbnailArray[objClass].cropHeight)+"px "+thumbnailArray[objClass].marginLeft+"px)";
  e.style.top = thumbnailArray[objClass].marginTop+"px";
  e.style.left = thumbnailArray[objClass].marginLeft+"px";
  e.style.width = thumbnailArray[objClass].cropWidth-thumbnailArray[objClass].cropDiff+"px";
  e.style.height = thumbnailArray[objClass].cropHeight-thumbnailArray[objClass].cropDiff+"px";
}        

function mouseMoveBulk(e)
{
  if (!e) var e = window.event;

  var objClass

  if (e.srcElement)
      objClass = e.srcElement.className;
    else
      objClass = e.target.className;

  if (lookMouse)
  {
    tempX = mouseXBulk;
    tempY = mouseYBulk;
    mouseXBulk = e.clientX;
    mouseYBulk = e.clientY;
    x = mouseXBulk-tempX;
    y = mouseYBulk-tempY;

    if (mouseToolBulk == "zoom")
    {
      if (thumbnailArray[objClass].ratio == 0)
        zoomBulk(x,y,e);
      else
        zoomBulk(x,0,e);
    }
    else
      moveBulk(x,y,e)
  }
}

function testMouseBulk(e)
{
  state = true;
  if (!e) var e = window.event;

  if (mouseToolBulk != "zoom")
  {
    lookMouse = state;

    if (state == true)
    {
      mouseToolBulk = "move";
      mouseXBulk = e.clientX;
      mouseYBulk = e.clientY;
      document.onmousemove = mouseMoveBulk;
    }
  }
}

function testZoomBulk(e)
{
  state=true;
  if (!e) var e = window.event;

  lookMouse = state;
  if (state == true)
  {	            
    mouseToolBulk = "zoom"
    mouseXBulk = e.clientX;
    mouseYBulk = e.clientY;
    document.onmousemove = mouseMoveBulk;
  }
}

function cancelMouse()
{
  mouseToolBulk = "move";
  lookMouse = false;
}

document.onmouseup = cancelMouse;

function isClass(sClass) {
  sClassName = document.body.className;

  re = new RegExp(sClass + "( |$)") 

  if (!sClassName)
    return false;
  return re.test(sClassName);
}

Stustaff

Cheers I LOVE this hack, works perfect and I think my gallery looks much smarter now.

Thanks

http://stuarthill.smugmug.com/gallery/2352115

DavidTO

Stustaff wrote:

Cheers I LOVE this hack, works perfect and I think my gallery looks much smarter now.

Thanks

http://stuarthill.smugmug.com/gallery/2352115