Integration guide

Turtle skin was made to fill in the browser window, therefore the user experience is often degraded when you try to stuff the album into a small window on another web page. With a little providence though, you can make Turtle albums usable, even embedded.

• First make sure to make the album narrower than the embed window to avoid horizontal scrolling. To achieve this make the Theme image Settings / Turtle / Theme image / Theme image size narrower by 48 pixels (at least) than the available width. For example when the available width is 660px, you should use 610px as theme image width. The height could also be smaller, because when you embed a page, the vertical space is always sparse. I used 610x200 as theme image size here, for example.
• In order the slide images also optimized for the frame size, go to the Settings / Images page, and make the image bounds a bit smaller than the window. In this case I set the image bounds to 6000×440 to enable the panoramic image, but if there are no such images you can safely use 640×480 for the 660x500px window. Once you are there you might want to make the thumbnails a bit smaller too – they will fit better with the smaller design. I used 140x100px sized thumbnails in this case. I have also removed the border from the slide images to spare with space.
• Another thing you might want to consider is the custom scroll feature. By using the custom scroll feature only the thumbnail area gets scrolled, while the theme image stays in place. However this might make the scrolling harder on touch devices, mostly when the parent page is scrollable itself. You should test which solution works better for you, and turn off Use custom scroll on the Settings / Turtle / Design page in need.
• When the local preview looks fine, Upload the album to your (or jAlbum’s) server, and once that’s ready you’ll be able to generate the embed code. Change to Share mode and fill in the Album width and height fields. The copied code then can be inserted into your blog post or directly into the HTML code of the page you want to include in.

Tip: if you want to make sure the embed size is fine – no horizontal scroll appears -, press F12 in Chrome, and resize the browser window to the required size – you will see the actual window size in the top right corner.

Here is the embedded album