Image Issues

Blogger made the blog better... which means I had to 'fix' it.
I don't exactly know when it happened, but I noticed on some blogs that when you clicked on an image instead of opening up the full image, it would open it in a "Light Box" style.  I thought it looked nice, and when you clicked on it, it would then move forward to the next image in the blog post.

Nice!

Here is what it would look like on my "Damsel in Distress II" post:

I think it looks very clean and very professional.

Now my desktop resolution is 1920x1200.  The image above is an exact size of my web browser (if you fully zoom it in).  As you can see, I have a viewable area of roughly 1470x1010.  That means that any image that size or smaller, will look just fine.  But there is the rub... many of my caps are 'taller' than 1010.  Here is what "I name you Chloe" looks like:

First off this particular image is supposed to be 1300 pixels tall.  But the entire image is showing in the 1470x1010 window.  And its not even at 1010, because this "Light Box" effect also has thumbnails of all the other images in that post.  With the thumbnails, it has effectivly reduced my 1000x1300 image to 720x930.

Not Cool!

For comparisons sake, here is how I designed the cap to look at my screen and window resolution:

Note that the entire cap doesn't fit... I know it wouldn't fit, and that I (and you) would have to scroll (note the scroll bar on the side of the window!) to read it all.

Now this is for me.  According to my Google Analytics (heh... anal...)  page, the VAST majority of my viewers have even smaller screen resolutions.  Assuming that a screen 'height' of 1400 pixels would be tall enough to view my 1300 pixel tall image in its full glory, then only 196 visitors in the past month would successfully see the full image.  Not a bad number, but that is out of 19,094 visits.  18,898 visitors would be seeing something much smaller.

Now this new "Light Box" style did allow you to click a link to get the full image:

Yup.  By clicking on that itsy bitsy link, you can view the full sized image in a new tab.  If instead you click on the image, you will simply be moved to the next image in the post:

Frustrating no? It would make sense if the images were designed to be viewed one after the other, but the images in my posts are designed to go along with a running commentary.  Ideally I set this up so that a visitor will see the new post on the main page.  They click on the image or the title and go to the post.  They click on the cap, read it, then click 'back' to return to the post.  Read a few paragraphs, then click on the next image.. view it, then click back and return to the post.  Rinse and repeat until they reach the end of the post, and write up a wonderful comment.  But with this "Light Box" working this visitor would see a new post on the main page, click on the image or title to go to the post, click on the cap, read it (if its not to small), then click the little 'X' in the upper corner, or somewhere off image, and return to the page.  If they click 'back' then they return to the main page and have to start over..

And I'm not sure if this is just on my end, but when I actually clicked on the cap image, I got this second image in the "Light Box" instead.  VERY frustrating.

Now again... I can see this being a valuable tool for many if not most bloggers out there.  Just not me.  So I wandered into the options area of my blog and looked for the option to turn this new feature off.  Surprise surprise, there was no option anywhere for this 'feature'.   So I wandered over to the 'help' section of blogger, and found several people complaining about this.

By reading many of these threads I found that this is simply Blogger being more fully integrated with Picasa (another Google product that is the default location of images uploaded to blogger).  There is no option of removing it.

Thankfully there is a workaround which I have installed.  I had to add a java script to the blog to remove the feature.  But this script has to load to take effect.  If you are quick on the draw, or have a slower connection speed, and click the image before the script loads, you will still get the "Light Box" Effect.  By my far from scientific experiments, it takes roughly 1 second to load the script.

To any blogggers out there that want to install the script here is how you do it.

First, go into your layout settings.

Click to 'Add a Gadget'  (Ideally you want this near the top of your page.  I placed the script just under my title bar so that it loads quickly.  If you put it near the bottom, it will load less, and that 1 second delay can easily turn into 3 or 4 seconds!)

In the new popup window, click on the 'HTML/JavaScript' option.

Do not add a title! (you can, but the title will show up, and ideally this should be 'in the background')

Copy and paste this code into the 'content' window:


<script type="text/javascript">
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() { 
var html = this.parentNode.innerHTML; 
this.parentNode.innerHTML = html;
this.onmouseover = null;
};
}
}


if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>


Click the 'Save' button at the bottom of the window.

Click the 'Save Arrangement' button at the top of the window.

Fin.

I would love to say that I made this workaround, but I didn't.  I found it through the help threads and a blogger here:

http://englishjavadrinker.blogspot.com/2011/09/fixing-bloggers-mistakes.html

So... hopefully with this snipet of code installed, you won't notice anything really different on my blog.

If for any reason you would like this feature 're-enabled', let me know.  But I'll be honest.. I would need to hear an OVERWHELMING desire for this to consider putting it back in.