I tried the markup validation link and it found 48 errors, most of which went right over my head.
I've taken a look at the validation errors from your web page.
Many are trivial (for example, missing 'alt' attributes from <img> tags) and won't actually cause any problems.
However, with so many 'obsolete' errors under the HTML 5 Doctype, your web page might actually be better suited to the HTML 4.01 Transitional Doctype (unless you plan to tackle the errors and replace your web page's table layout with CSS instead).
Try replacing:
... with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
... to see if your web page validates under this Doctyle with fewer errors. (Run your web page's URL through the W3C Markup Validation Service again after changing your web page's Doctype.)
One thing I don't want is images opening in their own window, I used simpleviewer to prevent hotlinking and downloading of my images.
Please see this FAQ:
How do I allow or prevent users from saving gallery images?
As noted in the FAQ, it is not possible to right-click on a Juicebox gallery so visitors to your website will not be able to right-click an image as select 'Save Image As...'. If you set showOpenButton="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and showDownloadButton="FALSE" ('Customize -> Button Bar'), then the Open Image and Download buttons will not be displayed on the gallery's Button Bar. Also, you might like to watermark your images (to deter visitors from taking screenshots of your gallery). Please see the short Adding Watermarks support section for details.
one quick question, does the Pro edition still have the Juicebox link?
No. The Juicebox branding (the Juicebox badge/link in the lower-right corner) is present only in Juicebox-Lite galleries.
Please could you advise on how to fix my stylesheet colours?
Your 'stylesheet1.css' file has an invalid CSS 'color' property (assigned to the wrong element).
Remove:
... from line 30, in this section:
#toolbar {
font:normal 17px palitoy;
color:eecc00;
margin:0;
padding:0;
}
... and add the following to your 'stylesheet1.css' file (just below the section above would be fine):
#toolbar a {
color: #eecc00;
}
This should fix your link color problem.
And also how to remove the shadow from the mouse hover?
What you are describing is the caption area (with a gradient background and displaying the image number).
You can disable to entire caption area by setting captionPosition="NONE" ('Customize -> Caption').
Configuration options which can be used to customize the caption area can be found in the Color and Caption sections.
The 270x400 image is now way off; the figure is missing his head and I have a VIEW GALLERY overlay that provides thumbnails and a grid button when in fullscreen.
What you are describing is the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window) and may may too small to be usable.
The Splash Page is essentially an image link for the gallery which displays an image (by default, the first image in the gallery) and some text.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the browser window (giving the images more space to be displayed).
When the gallery is expanded in Small Screen Mode, the user is presented with a page of thumbnails from which a main image can be selected. When a thumbnail is clicked, the thumbnail page is replaced with the chosen image. (In Small Screen Mode, the thumbnails and main images are displayed on different pages to maximize the area available for the images on small screen devices.) The user can return to the thumbnail page via the Thumbnail Button on the gallery's Button Bar.
More information about the Splash Page can be found in the Screen Modes section of the Gallery Tour.
By default, the Splash Page uses the first image in the gallery and scales the image to fill (rather than fit within) the Splash Page (which uses the gallery dimensions). If the image does not have the same aspect ratio as the gallery/Splash Page, then cropping will occur (as you have discovered).
There is no way to change the scaling behavior for the Splash Page image but you can choose an image to be used for the Splash Page via the splashImageUrl configuration option.
The splashImageUrl can be an absolute path or a relative path (relative to the web page containing the gallery's embedding code).
The splashImageUrl does not need to be a gallery image so you could perhaps prepare an image that represents your gallery and looks better at the gallery/Splash Page dimensions.
You can choose to not use the Splash Page by setting showSplashPage="NEVER" ('Customize -> Splash Page' section). Using this setting, the thumbnail page would initially be displayed instead of the Splash Page on small screen devices.
Alternatively, you could force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').
For reference, all the Splash Page configuration options can be found here.
I tried tinkering with imageScaleMode, but it seems to have no effect.
Just to clarify, imageScaleMode changes only the scaling of the main image within the gallery's image area.
I hope these notes help.