PictoBrowser Logo Home ButtonSample PictoBrowsers ButtonPictoBrowser Builder Button

Changing the size of your PictoBrowser (width & height)
You can modify the dimensions of a PictoBrowser to
better suit your images and your website.

The navigation components of a PictoBrowser are automatically set based on its width.

Take a look at these two PictoBrowsers displayed as examples and you'll notice that
the PictoBrowser on the left has four pages and the one on the right has only two.


Titles = on & Notes = off


Titles = off & Notes = on


Titles = on & Notes = on

When you set the titles to "on", the title of the main image is displayed and as you place the cursor over another thumbnail, its title is shown for reference. The Notes are displayed when the cursor is placed over the Notes button. When the Notes take up more than 5 lines, a scrollbar is automatically displayed.

Notice that the active area to control the scrollbar has been maximized to the entire textField (you can click and drag anywhere in the textField to move the text)

Thumnail Auto-Hide = on


Thumnail Auto-Hide = off

PictoBrowser can also hide the thumbnails and other navigation elements. It's useful in cases where PictoBrowser only displays one image, or when you want your visitor's full attention on only one image at a time. As the visitor places the cursor on the lower area of the PictoBrowser, the navigation and thumbnails are revealed.


Initial Scale = on & vAlign = top


Initial Scale = on & vAlign = mid


Initial Scale = off & vAlign = bottom

The Initial Scale setting allows you to set the size of the large image to fit within the dimensions of the PictoBrowser that displays it.

This allows you to create a PictoBrowser of any size and have its images dynamically zoomed to show your visitors the full images.

The Vertical Alignment positions the large images on a PictoBrowser. You can align the images to the top, middle, center and bottom of a PictoBrowser. The Vertical Alignment works independently of the image size.

In this third example, the image is aligned to the bottom of the PictoBrowser even when its Initial Scale isn't resizing the image.

Image Size = original & Zoom = on
There are two Flickr image files you can choose from to display on your PictoBrowser. The medium size (with a max of 500 pixels of image width and height) or the original size (the one you upload to Flickr). In this case, the image size is larger than the PictoBrowser. To view the entire image, you can click and drag it or you can press the Zoom button to scale it. The Zoom button allows you to toggle between the original size of the image and a scaled version of it.

I play with the Zoom button on the sixth image a lot. It's the only photo that reveals all the other cupcakes photographed in one single shot.

You should know that PictoBrowser can only display an original file size when its Flickr privacy is set to public and its license set to Attribution-NonCommercial-ShareAlike Creative Commons.

PictoBrowser Logo Home ButtonSample PictoBrowsers ButtonPictoBrowser Builder Button