Advanced

General

Behavior

Enable mouse wheel navigation

Allows using the mouse wheel to move back and forth between pictures.

Enable keyboard navigation

Use the keyboard to navigate between pictures, start/stop slideshow, and many other functions:

← →: previous / next picture
Esc Back to thumbnail page
Numpad * Start / stop slidehow
Numpad + Toggle fit to screen / 1:1 mode
Numpad - Toggle Info panel and thumbail scroller
Space Toggle video play

Click for next

Clicking on the image will take you to the previous / next photo. Left half = previous, right half = next.

Click beside to get back to index

Clicking on the empty area around the picture takes you back to the index page.

Auto-hide control bar

By default the control bar will disappear after 3 seconds of inactivty, but you can keep it on constantly by turning off this option.

Hide the "Fit screen / 1:1" button

If you don't want users to toggle between the two modes you can make this button hidden.

Please note, the Numpad + key combination will still work (unless you disable the keyboard navigation too).

Right click protection on images

With this option turned on, the visitors will not be able to use the right-click (context) menu on images. This is useful if you want to block them from saving the images. They can still use this menu on other parts of the album.

This setting also affects the Download button, that is no button will be generated if the right-click protection is on.

Please note, this little trick will not ensure that no images get saved from your album. In fact it's really easy to circumvent such a protection. Use watermark, legal texts about copyright and small resolution files to deter people from stealing your images.

Enable download of non-images

The download button will also added below non-image files, like movies, PDF files and such.

Text formatting

Preformat texts on pages, album info and footer

Add formatting to texts easily with simple rules:

bold *foo* → foo
italic: +foo+ → foo
underline: _foo_ → foo

image:

!http://c3.jalbum.net/res/icons/languages/16x16/sv.png!

→

link:
```
[http://jalbum.net/]
```
→ http://jalbum.net/
link with anchor:
```
[Visit jAlbum.net!|http://jalbum.net/]
```
→ Visit jAlbum.net!

you can even link through an image:

[!http://c3.jalbum.net/res/icons/languages/16x16/sv.png!|http://jalbum.net/]

→

Please note, preformatting might actually mess up HTML formatted text. For example the underscore letter _ in URLs might get replaced, and break the link. Please turn off this option if you are using HTML formatting on pages or other places.

Handling long comments and descriptions

None – no action is taken, the comments will be shown long as they are.
Shorten – the comments will be shortened to max. 160 characters. The HTML tags need to be stripped this way.
Add scroll – only the first 5-6 lines will be visible, the rest can be scrolled.

Site admin

Copy folder thumbnails to current level

All the folder thumbnails will be copied to the current directory level, and not used from the folder. This is useful if you want to password-protect folders. If the thumbnails were not copied, a broken image would appear in this case.

Add ALT tags for search engines

All the images get the captions duplicated in the ALT tags, in order search engines could easier render the captions to the pictures. Today this is not as relevant as it was a decade ago.

Use favicon

If this setting is on, the album will use the favicon provided by the skin:

, otherwise the browsers will take it from your site's root folder (if there's any).

Make album work in Javascript-disabled browsers

Turtle albums are hugely built around Javascript technology to bring rich interaction and smooth transitions. That said with Javascript turned off the album is actually unusable. Still if you turn this option on, some basic functionality is provided, so you can see the pictures at least.

Upload path

When you are using external libraries for social sites, like Facebook, the skin needs to know the final upload path upfront. If you just make the album and then choose the upload path later, the skin cannot modify the HTML pages.

Always use absolute URL here, starting with http:// (or https://)!

Use an ending slash / to specify the exact path:
http://mysite.com/albums/Awesome%20Album/
or omit it, and Turtle will automatically attach the album name:
http://mysite.com/albums, which will result in the same as above, provided the album is called Awesome Album

If you have already uploaded the album at least once, Turtle can guess the upload path without adding it here.

Debug mode

When the skin malfunctions, turn this mode on, and in the browser peek into the Developer console (press F12) to spot Javascript errors.

In this mode the Paypal API is also connected to the so-called Sandbox, so you can test the shopping cart with no real transactions, provided you have a Sandbox account.

Variables

In debug mode you can add (jAlbum) variables here, separated with commas, and can watch jAlbum's System console (press F7) during Make to track them.

Simply use the variable name, no ${...} notation is needed here.

Album info window

The contents of this box will show on a pop up window when the visitor clicks the Info button on the header.

You can place simple text (with formatting) or HTML code here too. Make sure to turn off Preformatting in the latter case.

Top level only: Will be placed only on the top level album page.

The contents of this box will be added below the thumbnails on the index page.

You can place simple text (with formatting) or HTML code here too. Make sure to turn off Preformatting in the latter case.

You can use jAlbum variables here, and even BeanShell scriptlets.

Top level only: Will be placed only at the top level album page.

HTML

Add HTML content to various parts of the album page.

HEAD: This code is to be added before the closing </head> tag. Useful for adding external Javascript or CSS files. Or a <script>...</script> block.
Thumbnails: This content will be added to the top of the scrollable thumbnails section.
BODY: This code will be added before the closing </body> tag. You can either add Javascript code here that is supposed to run only after the document has loaded, or can add a layer positioned absolute or fixed. Layers with normal stacking order will be invisible, because Turtle is using 100% screen height.

In all three sections you can use both jAlbum variables and BeanShell scriptlets.

CSS

Add custom CSS rules here. They will overwrite the ones come with the skin and style. Use this rule to make the headline color pink, for example:

#main header .hgroup { color: pink; }

You can add as many rules as you wish.

These rules will be bound to the album, so they will be kept after a skin update.

Use the Developer tools built into most modern browsers (Chrome, FF, IE, Opera, Safari) to sniff out the style's hook you want to change. Right-click the element you want to change, and select Inspect element. This will open the developer tools where you can inspect the element's styles. Use the rule highest in hierarchy to target the element most precisely.

Javascript

Add custom javascript code here. This code will be executed immediately when the page composition has finished. No need to add <code> tag around.

If you want to make sure the document is ready use the $(document).ready(function() { ... }); constuct.

You can safely use jQuery.

You can use jAlbum variables and Beanshell scripts too.

Custom button

Add a custom button under each image which you can use to display information, or send feedback, or anything...

Custom button feature Sample album

Button label: The text to be displayed on the custom button.
Panel width: The width of the popup panel. Default = 600px.
Function to start: The name of the javascript function to be called upon the image is loaded. You can actualize the image-specific variables here.
Content: Add HTML content in this box, which appears on a popup window, when the visitor clicks the custom button. Check out the sample album above to get the idea!