Though this seems like a lot of code to write in, where as the css method appears to be cleaner. So do I input this (.jb-area-large-mode-title) to the theme.css in the juice box.app folder or to another?
It does not matter where the CSS is located (e.g. in the <head> section of your gallery's 'index.html' page or in the 'theme.css' page) as long as it is loaded by the browser.
You could put both the @font-face {} block and the .jb-area-large-mode-title CSS rules in the <head> section of your gallery's 'index.html' page (within <style></style> tags) or just add them to the bottom of the 'theme.css' page.
Also, looking at this css code it brings up another question: Is it possible to have different gallery titles for the small (iPhone) version, and the large version.
No. Only one <title> and <caption> are able to be associated with each image and are used in both Small Screen and Large Screen modes.
Cause by using this method in the gallery title, when I view the gallery on the iPhone thumbnail version, the logo and the gallery title fall behind the thumbnails & are static, as one swipes through the pics
Perhaps you could get around this by either repositioning your Gallery Title (using the galleryTitlePosition option) or setting screenMode="LARGE" to force the gallery to be displayed in Large Screen Mode no matter what device the gallery is being displayed in. Also, you can change the stacking order of elements (to bring them to the front) by using the CSS z-index property.
PS. wanted to add that I'm not sure what jpeg encoder you use, but I've been noticing a slight colour shift (desaturation) and artifacting (pixelation) on export, when resized in program. Minor, but maybe something to check out.
You may like to try increasing the default quality (from 80 to something higher such as 90) when resizing images in JuiceboxBuilder-Pro (by selecting the 'Change...' button in the 'Image Size' control panel on the 'Images' tab).
Otherwise, you could deselect the 'Resize Images' checkbox, create your own images in an image manipulation program such as Photoshop and feed them to JuiceboxBuilder-Pro. The application will then simply copy your original images across to the output 'images' folder (without resizing them) and will use them in the gallery.
PPS. But to add, just want to say that this is a great product & can only get better.
Thank you. We are continuously trying to improve Juicebox by fixing bugs and adding new features with each new release.