Monday, April 14, 2008

Windows Vista Sidebar Gadgets: Slideshow

A neat feature of Windows Vista is called Sidebar. It allows you to display several "gadgets", which are just mini web applications that reside on the desktop of your computer.

One that I really like is Slideshow. You can change it so that it displays any number of photos stored on your computer. When it first starts up, the Slideshow gadget is docked on the Sidebar and is quite small: only 120 x 90 pixels.

As with any gadget, you can drag & drop the Slideshow gadget elsewhere on your desktop. When you do so, its dimensions enlarge to 320 x 240 pixels. This is better but still not great. For on my 2-monitor system, I love the idea of [periodically] having a slideshow running on my secondary monitor while I'm working on my primary monitor.

So I set out to discover how to increase the dimensions of the undocked gadget to accomplish this. Through a little trial and error I figured out how to do this and can now show you how to change it to any size you want:

  1. Navigate to this folder:
    C:\Program Files\Windows Sidebar\Gadgets\SlideShow.Gadget\en-US\js
  2. You'll see just one file: slideShow.js This is a JavaScript code file. To edit it you're going to need to gain the privileges to do so. Even if you're an Administrator user, you'll find that you can't edit the file. How to do so is beyond the scope of this article but Google for: Vista file "take ownership". Be sure to have a lot of patience because it's an annoying obstacle to overcome!
  3. Before we make any changes you should make a copy of this file. I renamed my copy to : slideShow - Original.js
  4. Now right-click on the original file and choose Edit. It'll open up in Notepad.
  5. Here are the lines you'll need to change:
    1. var maxUndockedWidth = 320;
    2. var maxUndockedHeight = 240;
    3. function undockedState()
      {
      gUndockFlag = true;
      with(document.body.style)
      width=360,
      height=280;

      with(slideshowBg.style)
      width=360,
      height=280;
      slideshowBg.src="url(images/on_desktop/slideshow_glass_frame.png)";

      with(bar.style)
      width=112,
      height=23,
      top=220,
      left=119;

      with(pictureFrame.style)
      top=16,left=17,width=320, height=240;

      if(imagePathAndName != undefined)
      {
      scaleImageForDisplay();
      }
      }
  6. Change every "320" to the new image width you want and every "240" to the new height.
  7. Then change the pairs of "360" & "280" to your new values + 40. So if, for example, your new image dimensions are 1024 x 768 then change each 360 to 1064 and each 240 to 808.
  8. Save the file and close Notepad.
That's it! You can now drag the Slideshow gadget off of the Sidebar and it'll be as large as you've specified. Hope this helps somebody out there!

6 comments:

Anonymous said...

here is how to make the larger image fit into the frame perfectly:

the background image on_desktop/slideshow_glass_frame.png is 360x280, therefore you have to add another 40 pixels for every 100% scale of your image or in other words multiply the values with the scale factor of the image - so for a 640x480 picture you have to set the undocked res to 720x560 (360x280 multiplied by 2).

furthermore, there is an offset in the picture frame style which can be seen in the following line:

"with(pictureFrame.style)
top=16,left=17,width=320, height=240;"

you need to multiply the top and left value with the scale factor;
for the above mentioned example of an 640x480 image that would be 2 again and the line would read:

"with(pictureFrame.style)
top=32,left=34,width=640, height=480;"

now the image fits perfectly and you can enjoy your slideshow in all its glory.

unbeliever2000

Brande said...

I've tried this and whenever I try to save it, it tells me it can't because the file path is incorrect. Why does that happen?

Robert W. said...

I'm sorry, I do not know.

Anonymous said...

To move the navigation bar to the correct place adjust these numbers:
top=220 left=119 in the undocked section.


with(bar.style)
width=112,
height=23,
top=220,
left=119;

Anonymous said...

You must change your permissions but first you must change ownership of the file. Then you can modify it. Check your help file to find out how to do this.

Anonymous said...

Someone game to add auto rotation to images?