Jupiter 40 User's Manual

Title Bar

Title Bar » Theme Image

• Show theme images: If selected, the theme image chosen in the jAlbum Explore view will be shown on the album's index pages.
• Use...: These radio buttons control whether each folder will show its own theme image, or whether each folder will show the top-level theme image, or whether the theme image will be shown only at the top level of the album. In this last case, folders will display an ordinary title area, without any theme image.
• Height: Set the desired display height of the theme image.
• Width: If a banner title bar is chosen, the theme image will be displayed at the full width of the browser window. This setting tells jAlbum what image bound width to use for scaling the theme image. If it is set at 1600px, for example, the theme image will appear in its actual size until the viewport width exceeds 1600px. In a wider viewport, the image will be enlarged to fill the banner title bar.
• Dimming: A graduated dimming or darkening layer is placed over the theme image in order to improve the readability of the album title and description that are displayed on top of it. This setting allows you to choose the degree of dimming, with a higher number being darker.
• Banner title bar: If selected, a full-width colored background is applied to the title area of index and slide pages, and text colors are adjusted accordingly. If you use the Custom style, you can make your own color choices for the background and text, and apply a background texture. If you choose to show a theme image, below, the image will span the width of the browser window.
• Fixed position: If selected, a banner title bar will remain fixed at the top of the viewport, rather than scrolling out of sight when the visitor scrolls down through the thumbnails. This applies only to the index page and the info page. On displays smaller than a low-end laptop, the title bar will return to normal scrolling behavior.

Title Bar » Borders

• Theme image: If using a theme image and not using a banner title bar, you may select the style of border - solid, double, or beveled - the width of the border, the amount of padding between the image and its border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed).
• Standard: If you're not using a theme image or a banner title bar, you may select the style of border - solid, double, or beveled - the width of the border, the amount of padding between the title bar and its border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed).
• Banner: If a banner title bar is used, you may specify the width and opacity of a shadow applied to its lower edge. No borders are ever applied to a banner title bar, with or without a theme image.

Title Bar » Titles

• Index page title: The title bar on the index pages can be set to display the album title/name, the folder title/name (at the top level, this is same as the album title/name), or nothing.
• Include description/comment: If selected, the album description or folder comment is displayed below the album title/name or folder title/name.
• Show folder title/name in browser tab: If selected, index and slide pages within a folder will show the folder title (if one has been entered) or the folder name in the browser tab. Otherwise, the album title is displayed in the browser tab on all pages.
• Display underscores as spaces: If selected, underscores in folder and file names that appear as titles, browser tabs, captions, or tooltips are displayed as spaces. This applies only to the actual folder and file names. User-entered titles and comments are not affected. The folder and file names themselves are not changed.

Title Bar » Logo Image

• Add / Remove: Click Add to select a logo image to display on each index page. Click Remove to remove the image.
• File: This field displays the name of the chosen file, but cannot be directly edited. To change a logo image, remove the existing one and add a new one.
• Logo on top level index page only: If selected, the logo will be displayed only on the top level index page, and not on the index pages for folders.
• Link to album home: If selected, the logo will be a clickable link to the top level of the album.
• Link to external site: If a URL is provided, the logo will be a clickable link to an external site.
• Tooltip: If the logo is a clickable link, this is the tooltip text displayed when the visitor hovers on the logo.

Index Page & Icons

Index Page & Icons » Options

• Max objects per page: By default, thumbnails for all of the objects in a folder are shown on a single index page. If you choose this option, however, you can limit the number of object thumbnails that appear on a page. If there are more objects in the folder than the selected number, the jAlbum core will generate additional index pages - index2.html, index3.html, and so on - and the page will show "prev/next page" navigation. If you choose to show folder thumbnails in a separate section, those are counted separately.
• Numbered link list: If selected, and if there is more than one index page at a given level (because you have chosen to limit the number of thumbnails that appear on each page), a clickable numbered link list will be displayed above the thumbnail table.
• Link to album home: If selected, index page navigation at all levels below the top level of the album includes a "home" icon that takes the site visitor back to the main index page of the album.
• Open web locations in new tab: If selected, web locations will open in a new browser tab, rather than the same browser tab.
• Apply color gradient to page body: If selected, the background color of all pages will have a gradient. In most cases, the background color will be the primary body color at the top of the page, and a darker shade of the same color towards the bottom. The reverse is true for styles that have a black or very dark body color. Using the Custom style, you may specify any bottom color you like for the page body (it can even transition from blue at the top to red at the bottom - any HTML colors may be used). Because mobile browsers often mangle body gradients, they are removed on small displays.

Index Page & Icons » Icons

• Icon size: The size of the navigation icons.
• Top of page: If selected, a "top of page" icon is displayed when the visitor scrolls down through the thumbnails.
• Top of page size: The size of the "top of page" icon.
• Top of page opacity: The opacity of the "top of page" icon.

Index Page & Icons » Home Icons

• Site and Album: If you choose the first icon set, the "leaving this page" icon is used for links in the album that point to the homepage you have entered under Album » Settings » Pages » Link to external homepage » Address (URL), if any, and the "house" icon is used for links from folders in the album that point to the top level of the album, if you have chosen to display such links. If you choose the second set, the "house" icon is used for the homepage link, and the "double up" icon is used for returning to the top of the album from folders.

Index Page & Icons » Icon Style

• Icon Style: You may choose either fat icons or thin icons.

Index Page & Icons » Breadcrumb Trail

• Breadcrumb trail: If selected, a breadcrumb trail is shown below the title bar on index pages, showing the path from the top of the album to the current location.
• Not shown at top level: If selected, the breadcrumb trail is not shown at the top level of the album. It appears only on folder index pages.
• Include site home: If selected, the breadcrumb trail includes a link to the page defined under Settings » Pages » Link to external homepage.
• Border style, width, etc.: You may select the style of border - solid, double, or beveled - the width of the border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed).

Thumbnails

Thumbnails » Layout

• Max table width: The maximum width of the thumbnail table. If the viewport width is less than this, the thumbnail table is adjusted to fit. This setting also affects the positioning of navigation icons in the theme image and on the slide pages.
• Thumbnail spacing: The spacing between thumbnails on the index page.
• Preset surround color: If a thumbnail surround is selected, the surround can be a shade lighter or darker than the page body color. This applies to preset styles only - for the Custom style, any color may be selected for the surround. See Custom » Padding & Surround.
• Folders last: If selected, the grouped folder thumbnails on a page are shown after the image thumbnails, rather than before. This may be applied only to a specific folder or folders. If you want only the subfolders in Folder A to appear at the bottom of the page for Folder A, do not select Folders last on the settings here. Instead, hover on the Folder A thumbnail in the jAlbum Explore view, and choose More..., then Edit. On the right, expand the Variables panel and enter a variable called locFoldersLast, with a value of true.

Thumbnails » Images

• Fixed shape thumbnails: If selected, thumbnails are cropped to the dimensions chosen under Album » Settings » Images » Image Bounds » Thumbnails.
• Constrain aspect ratio: If fixed shape thumbnails are not selected, the aspect ratio of each thumbnail will be the same as that of the original image. Choosing this option restricts the aspect ratio (width divided by height) to a minimum of 0.5 and a maximum of 2.5. This prevents panoramic images and unusually tall, skinny images from producing thumbnails with extreme aspect ratios.
• Vertical alignment: If fixed shape thumbnails are not selected, thumbnails may be vertically positioned so that they are top-, middle-, or bottom-aligned.
• Thumbnail float: If fixed shape thumbnails are selected, you may float the thumbnail to the right or left, in which case the caption will appear next to the thumbnail, rather than below it.
• Caption width: If floated thumbnails are selected, the caption area is a fixed width.
• Caption alignment: If floated thumbnails are selected, the caption text may be left-aligned, right-aligned, or centered.
• Surround: A surrounding fixed shape box may be applied to the thumbnails, which gives the appearance of neat rows even if non-fixed shape thumbnails have been selected, and the thumbnail aspect ratios differ greatly. While it may be used with fixed shape thumbnails, it's not particularly useful in that context. If you have chosen to float the thumbnail image, a thumbnail surround is recommended.
• Grid: If you are not using fixed shape thumbnails and if no thumbnail captions appear on the page, the thumbnails are evenly spaced, regardless of aspect ratio. Choosing this option causes them to be shown in a grid, with the same number of thumbnails in each row.

Thumbnails » Folders

• Fixed shape thumbnails: The folder thumbnails may be cropped to a fixed shape.
• Aspect ratio: If folder thumbnails are cropped to a fixed shape, you may choose the aspect ratio (width:height), with 1:1 being square thumbnails.
• Constrain aspect ratio: If fixed shape thumbnails are not selected, the aspect ratio of each thumbnail will be the same as that of the original image. Choosing this option restricts the aspect ratio (width divided by height) to a minimum of 0.5 and a maximum of 2.5. This prevents panoramic images and unusually tall, skinny images from producing thumbnails with extreme aspect ratios.
• Vertical alignment: If fixed shape thumbnails are not selected, thumbnails may be vertically positioned so that they are top-, middle-, or bottom-aligned.
• Thumbnail float: If fixed shape thumbnails are selected, you may float the thumbnail to the right or left, in which case the caption will appear next to the thumbnail, rather than below it.
• Caption width: If floated thumbnails are selected, the caption area is a fixed width.
• Caption alignment: If floated thumbnails are selected, the caption text may be left-aligned, right-aligned, or centered.
• Surround: A surrounding fixed shape box may be applied to the thumbnails, which gives the appearance of neat rows even if non-fixed shape thumbnails have been selected, and the thumbnail aspect ratios differ greatly. While it may be used with fixed shape thumbnails, it's not particularly useful in that context. If you have chosen to float the thumbnail image, a thumbnail surround is recommended.
• Grid: If you are not using fixed shape thumbnails and if no thumbnail captions appear on the page, the thumbnails are evenly spaced, regardless of aspect ratio. Choosing this option causes them to be shown in a grid, with the same number of thumbnails in each row.
• Thumbnail height: Folder thumbnails may be shown with a height between 50% and 200% of the image thumbnail size.

Thumbnails » Borders

• Style, Width, Padding, Radius, Shadow, Opacity: For the index page thumbnails, you may select the style of border - solid, double, or beveled - the width of the border, the amount of padding between the image and its border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed).
• Shift on hover: The first checkbox, if selected, causes a solid or double border on the thumbnail to change color when the visitor hovers on the thumbnail. If a beveled border is chosen, it causes the north and west colors to swap position with the south and east colors when the visitor hovers on the thumbnail. The second checkbox, if selected, causes the shadow to shift from the southeast corner to the southwest corner when the visitor hovers on the thumbnail.

Thumbnail Captions

Thumbnail Captions » Folders

• Folder thumbnail caption: The caption below a folder thumbnail may display the folder title, the folder comment, both, or neither.
• Name if no title: If no folder title has been entered, use the folder name.
• Folder thumbnail tooltip: The tooltip that appears when the visitor hovers on a folder thumbnail may display the folder title, the folder comment, both, or neither.
• Name if no title: If no folder title has been entered, use the folder name.
• Show count of images in folder: If selected, the number of album objects in the folder is displayed. This includes all album objects, and is recursive, i.e., the count includes the contents of subfolders.

Thumbnail Captions » Images

• Image thumbnail caption: The caption below an image thumbnail may display the image title, the image comment, both, or neither.
• Name if no title: If no image title has been entered, use the image file name (without its extension).
• Video length: If selected, the length of a video is displayed with the thumbnail caption.
• Audio length: If selected, the length of an audio is displayed with the thumbnail caption.
• Image thumbnail tooltip: The tooltip that appears when the visitor hovers on an image thumbnail may display the image title, the image comment, both, or neither.
• Name if no title: If no image title has been entered, use the image file name (without its extension).
• Video length: If selected, the length of a video is displayed with the thumbnail tooltip.
• Audio length: If selected, the length of an audio is displayed with the thumbnail tooltip.

Thumbnail Captions » Line Clamping

• Limit title and comment to two lines each....: If selected, the title and comment, when shown as a thumbnail caption, will be limited to two lines. Any overflow is shown as an ellipsis.

Overlays

Overlays » "New" Overlay

• Show "new" icon for X when images X in the last X days: You may choose to display a small "New" icon overlay on image thumbnails, folder thumbnails, both, or neither, for new images. For a folder, the icon is displayed if that folder contains an image (at any lower level) that meets the criterion. The "newness" of the image may be determined by the date it was added to the project or by the date on which the photo was taken. The number of days is calculated relative to the date on which the album is created.
• Position: The position of the "New" indicator overlay.
• Inset: The number of pixels the "New" indicator overlay is inset from the corner of the thumbnail image. Negative values place the overlay beyond the edges of the image.
• Text color: The text color for the "New" indicator that is overlayed on a thumbnail.
• Background color: The background color for the "New" indicator that is overlayed on a thumbnail.

  The text that is displayed, which defaults to NEW, is set under Text » Index Page. Its size and style can be adjusted under Fonts » Index Page. When a visitor hovers on the "New" icon, the popup tooltip shows the date on which the image was added or taken. The tooltip prefix, which defaults to Added: or Taken:, depending upon the "newness" criterion chosen, is set under Text » Index Page. The date format is taken from the jAlbum setting under Album » Settings » Advanced » General.

Overlays » Overlay Icons

• Video thumbnails: If selected, a semi-transparent overlay is placed on video thumbnails, including YouTube and Vimeo videos.
• Size: The size of the video overlay, as a percentage of the thumbnail image bounds.
• Audio thumbnails: If selected, a semi-transparent overlay is placed on audio thumbnails.
• Size: The size of the audio overlay, as a percentage of the thumbnail image bounds.
• Web location thumbnails: If selected, a semi-transparent overlay is placed on web location thumbnails.
• Size: The size of the web location overlay, as a percentage of the thumbnail image bounds.

Overlays » Custom Overlay

• Position: The position of the small custom icon overlay on thumbnails.
• Inset: The number of pixels the custom overlay is inset from the corner of the image. Negative values place the overlay beyond the edges of the image.
• Size: The size of the custom overlay.
• Opacity: The opacity of the custom overlay.
• Add / Remove: Click Add to select an image to use as the custom icon overlay. Click Remove to remove the file. The file used can be a JPG, a PNG, or a GIF (an animated GIF will lose its animation). The image file dimensions must be square, and must be at least as large as the custom overlay size you specified above - ideally, it should be 64x64 pixels.
• File: This field displays the name of the chosen file, but cannot be directly edited. To change the custom icon overlay file, remove the existing one and add a new one.

  To use a custom overlay on thumbnails, add a custom overlay file to the project, below. Then indicate the album objects to which this custom overlay should be applied - see Image & Folder Settings.

Slides

Slides » Options

• Slide page title: The title bar on the slide pages can be set to display the album title/name, the folder title/name (at the top level, this is same as the album title/name), the image title/name, or nothing.
• Hide slide page title on small display: If selected, the text in the slide page title bar will be hidden on a smartphone. If not selected, the text will be visible, but will be truncated to avoid line-wrapping, which consumes scarce screen real estate.
• Loop slides: If selected, clicking the "next" arrow on the last slide takes the visitor to the first slide, and clicking the "previous" arrow on the first slide takes the visitor to the last slide.
• Responsive images only: Normally, the slide page is fully responsive, showing the image and all text on the page (captions, copyright, etc.) - a vertical scrollbar appears only in the most extreme cases. If this option is selected, the page will be responsive to the image only, allowing caption text to trigger the appearance of a scrollbar. This may be useful when presenting an image that should be shown as large as possible, despite the presence of lengthy caption text. If there are only one or two lines of caption, the page is treated in the normal, fully-responsive manner. If vertical scrolling is necessary, enough of the caption is left showing to let the visitor know that there is more material below. This option may be chosen for an individual folder or image, rather than for all the images in the album. See Image & Folder Settings.

Slides » Borders

• Style, Width, Padding, Radius, Shadow, and Opacity: For the slide image, you may select the style of border - solid, double, or beveled - the width of the border, the amount of padding between the image and its border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed).

Slides » Caption

• Image caption: The caption below a slide image may display the image title, the image comment, both, or neither.
• Name if no title: If no image title has been entered, use the image file name (without its extension).
• Image counter: An image counter (for example, "Image 4 of 18"), may be displayed above the caption, below the caption, or below the metadata.
• Separate from caption: If selected, the image counter will be separated from the caption by a blank line.
• Caption icon size: The size of the globe and download icons.
• Image title alignment: The image title may be centered, or aligned to the left or right.
• Image comment alignment: The image comment may be centered, or aligned to the left or right.
• Image counter alignment: The image counter may be centered, or aligned to the left or right.
• Image metadata alignment: The image metadata may be centered, or aligned to the left or right.
• Title and comment on same line: If selected, the title and comment will appear on the same line, floated to left or right, respectively. Possible only if you've chosen to left-align the title and right-align the comment, or vice-versa. Best suited to short titles and comments - the results with longer text may be unattractive.

Slides » Downloads

• Download icon for images: If selected, displays a download icon on the slides. The link will download the slide image (whether scaled or original), or the original image if it's also included in the album. Originals may be included by choosing Link to originals via scaled images in the jAlbum settings, or by right-clicking on a thumbnail in the main jAlbum window and choosing Include original. The effect of clicking the icon will depend upon the browser and the configuration of the site visitor's computer. It may place the image in the visitor's download folder, or present a dialog offering various options for opening or saving the image, or open the image in a new browser tab, at which point the visitor can right-click the image and save it.
• Download icon for videos: If selected, displays a download icon on the slides of videos. The effect of clicking the icon will depend upon the browser and the configuration of the site visitor's computer. It may place the video in the visitor's download folder, or present a dialog offering various options for opening or saving the video, or launch a player and play the video. In the latter case, in order to save the video, the visitor will need to right-click on the download icon and choose Save target as …. The exact wording of the choice will depend upon the browser being used.
• Download icon for audios: If selected, displays a download icon on the slide page of audio files. The effect of clicking the icon will depend upon the browser and the configuration of the site visitor's computer. It may place the audio file in the visitor's download folder, or present a dialog offering various options for opening or saving the audio file, or launch a player and play the audio file. In the latter case, in order to save the audio file, the visitor will need to right-click on the download icon and choose Save target as …. The exact wording of the choice will depend upon the browser being used.
• Downloads open in new browser tab: Choosing this option causes all browsers to open the image in a new browser tab, rather than to offer a download option.

Metadata

Metadata » Metadata Display

• Space between caption and metadata: If selected, the metadata will be separated from the caption by a blank line.
• Hide metadata on small display: If selected, the metadata will be hidden on the slide page on a small display, like a smartphone.
• Dim metadata until hovered: If selected, the metadata will be dimmed on the slide page until the site visitor mouse-hovers on it.
• Camera icon: If selected, a small camera icon is displayed to the left of the metadata.

Metadata » EXIF Fields

• Camera, Date, ISO, etc: If selected, each of the chosen standard EXIF fields will be included in the displayed metadata, labeled as indicated. The file name of the image may also be included, though this isn't actually part of the image metadata. Labels may be left blank. GPS coordinates of 0°0'0" latitude and longitude, inserted by some cameras when they can't obtain an actual location, are ignored.

Metadata » Custom Metadata

• Metadata tag: The name of any available metadata tag may be entered (e.g., Iptc.Credit), up to a total of 10 such tags. The names of the metadata tags contained in an image file may be determined by right-clicking a thumbnail in the main jAlbum editing window and selecting List metadata.
• Metadata label: The text to be displayed as the label for each metadata tag entered (e.g., Photographer). This may be left blank.

Metadata » Metadata Sequence

• Drag to reorder: The sequence of the displayed metadata may be changed by clicking and dragging the fields into the desired order.

Maps

Maps » Google Map

• Map link if GPS coordinates: If selected, and if GPS coordinates are available in the EXIF or XMP metadata of the image file, a globe icon is displayed which, if clicked, opens a new browser tab or window that displays a map, centered on the GPS coordinates. GPS coordinates of 0°0'0" latitude and longitude, inserted by some cameras when they can't obtain an actual location, are ignored.
• Map page title: The text in the title bar on the map page can be set to match the title bar on the slide page, or can be set to the album title/name, the folder title/name (at the top level, this is the same as the album title/name), the image title/name, or nothing.
• Map type: The type of map to display: hybrid, roadmap, satellite, or terrain. The hybrid map is a satellite view with an overlay of labels (street names, for example). The terrain map is a topographic view, with contour lines and shading to represent elevation.
• Zoom level: The initial zoom level for the map. Note that some map types, like terrain, may not be available at high zoom levels.

  It is possible to display a map link for an individual image, rather than for all the images in the album, or to specify a different map type and zoom level for the map for one image. See Image & Folder Settings.

• API key: Enter your Google Maps API key.

  Google does not allow use of its maps API unless you obtain a key. A key may be obtained without any cost. Visit the Google developer page and click the Get a Key button. You will have to create a Google account if you don't already have one (also free). Follow the prompts to create a project (you can just accept the default name) and to create a Browser API key. Each of these steps will take some time, so don't get impatient and start clicking things repeatedly.

  You may restrict use of the key to your domain by going to the Google API Manager / Credentials section and editing the entry for your API key. But if you do so, local preview of your album will fail, because the map request will be coming from your PC, rather than from your domain. Restricting use of the key is probably an excess of caution. In theory, someone else could get your key and use it on his or her own site. This would become a problem only if the key were used for more than 25,000 map views per day, a stunningly high number. And even if that happened, it's a simple matter to delete that key, get a new one from Google, and plug it into your album(s).

  If you do opt to restrict the use of your key, be very careful about how you enter the domain name. To cover all bases, enter your domain as, for example, *.example.com/* and as example.com/*, each on a separate line. Wait at least 15 minutes before testing your page - the setting may not take effect immediately. If you've restricted your key, you should build and preview your album without entering your API key. When you have everything the way you want it, enter the API key, click Make Album one more time, and upload the album.

• Allow street view: If selected, a site visitor will be able to use the Google map "pegman" icon to see a street view. These views are billed at twice the rate of other map types, so if you have a popular site and are in danger of using up your monthly quota of free map views, you might want to disallow this option.

Fonts » Album

Fonts » Album » Font Family

• Font family: The font family for the album. Each font family is designed to be fairly "web-safe," and produces a font stack in the album's CSS that will provide acceptable results on most site visitors' computers. The font stacks produced by each font family choice are as follow:
  • Arial: Arial, "Helvetica Neue", Helvetica, sans-serif
  • Brush Script: "Brush Script MT", cursive
  • Comic Sans: "Comic Sans", "Comic Sans MS", "Chalkboard", "ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive
  • Courier: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace
  • Georgia: Georgia, Times, "Times New Roman", serif
  • Palatino: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
  • Papyrus: Papyrus, fantasy
  • Tahoma: Tahoma, Verdana, Segoe, sans-serif
  • Times New Roman: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif
  • Trebuchet: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
  • Verdana: Verdana, Geneva, sans-serif
• Apply to All: Click this button to apply the selected Font family to all text fields in the album.

Fonts » Album » Google Font

• Font name: Enter the name of any Google font you want to include in the album. See Info: Google Fonts & WOFF Files for more information about this option.
• Font name 2: Enter the name of another Google Font you want to include in the album.
• Apply to All: Click this button to apply the selected Google font to all text fields in the album.
• Visit: A direct link to the Google Fonts website.

  Do not specify a Google font if you aren't actually going to use it for some text fields in the album. Doing so will cause the page to load resources it doesn't need.

Fonts » Album » WOFF File

• Add / Remove: Click Add to select a Web Open Font Format (WOFF) file for the album. Click Remove to remove the file. See Info: Google Fonts & WOFF Files for more information about this option.
• File: This field displays the name of the chosen file, but cannot be directly edited. To change the WOFF file, remove the existing one and add a new one.
• Apply to All: Click this button to apply the selected WOFF to all text fields in the album.

  Do not add a WOFF file if you aren't actually going to use it for some text fields in the album. Doing so will cause the page to load resources it doesn't need.

Fonts » All Pages

Fonts » Font Styles

• Theme image title: The font styles for the page title shown on the theme image on index and info pages. The font size may be set to zero, meaning that the title is not displayed. This option might be chosen if the theme image contains its own text or a large logo.
• Theme image description: The font styles for the page description shown on the theme image on index pages. The font size may be set to zero.
• Album/Folder title: The font styles for the album or folder title on index and slide pages.
• Album/Folder description: The font styles for the album or folder description (folder comment) on index pages.
• Copyright: The font styles for the copyright notice on index and slide pages.

Fonts » Index Page

Fonts » Index Page » Font Styles

• Breadcrumb trail: The font styles for the breadcrumb trail on index pages.
• Index page link list: The font styles for the numbered link list on index pages.
• Folder thumbnail title: The font styles for the folder thumbnail title(s) on index pages.
• Folder thumbnail comment: The font styles for the folder thumbnail comment(s) on index pages.
• Folder image count: The font styles for the folder image count on index pages.
• Image thumbnail title: The font styles for the image thumbnail title(s) on index pages.
• Image thumbnail comment: The font styles for the image thumbnail comment(s) on index pages.
• Video thumbnail length: The font styles for the video length displayed below video thumbnail captions on index pages.
• "New" overlay: The font styles for the "new" overlay on thumbnail images on index pages.
• Top info: The font styles for Top Info text on index pages.
• Bottom info: The font styles for Bottom Info text on index pages.
• Credits: The font styles for the credits on index pages.

Fonts » Slides & Info Page

Fonts » Slides & Info Page » Slides Font Styles

• Image title: The font styles for the image title on slide pages.
• Image comment: The font styles for the image comment on slide pages.
• Image counter: The font styles for the image counter on slide pages.
• Image metadata labels: The font styles for the image metadata labels on slide pages.
• Image metadata: The font styles for the image metadata on slide pages.

Fonts » Slides & Info Page » Info Page Font Styles

• Title: The font styles for the title on the info page.
• Text: The font styles for the text on the info page.
• Contact: The font styles for the contact line on the info page.

Text » Index Page

Text » Index Page » Navigation

• Site home: If a URL and text are entered under Album » Settings » Pages » Link to external homepage, this is the icon that will appear on each index page. The tooltip that appears when a visitor hovers on this icon is entered on that settings page, rather than here. This is intended for a home page that is external to the album.
• Album home: The tooltip that appears when a visitor hovers on the "home" icon.
• Up one level: The tooltip that appears when a visitor hovers on the "up one level" icon.
• Previous page: The tooltip that appears when a visitor hovers on the "previous page" icon.
• Next page: The tooltip that appears when a visitor hovers on the "next page" icon.
• Top of page: The tooltip that appears when a visitor hovers on the "top of page" icon.
• Info page: The tooltip that appears when a visitor hovers on the "info page" icon.
• Index page: The tooltip that appears when a visitor hovers on the "index page" icon on an info page.

Text » Index Page » "New" and Custom Overlay

• Text: The text that appears on a thumbnail when you choose to identify the image as one that is new.
• "When added" tooltip prefix: The text that appears when a visitor hovers on the "new" icon if the date added has been chosen as the criterion for "newness" - the skin will automatically append the date on which the image was added to the album. The date format is determined by the jAlbum setting under Album » Settings » Advanced » General.
• "When taken" tooltip prefix: The text that appears when a visitor hovers on the "new" icon if the date the photo was taken has been chosen as the criterion for "newness" - the skin will automatically append the camera date. The date format is determined by the jAlbum setting under Album » Settings » Advanced » General.
• Custom thumbnail overlay: The text that appears when a visitor hovers on the custom overlay on a thumbnail image.

Text » Index Page » Other

• Breadcrumb label: The text that appears at the beginning of a breadcrumb trail.
• Folder image count: The text that appears when a folder image count is displayed. In the album, %X is automatically replaced by the count of album objects in the folder.
• Video length: The label that appears next to the video length, when displayed in a caption or tooltip.
• Video length format: If the video length is displayed as part of a caption or tooltip, it may be in either of two formats - for example, 2h 17m 45s or 02:17:45.
• Audio length format: If the audio length is displayed as part of a caption or tooltip, it may be in either of two formats - for example, 2h 17m 45s or 02:17:45.
• Go to page: The label that appears next to an index link list for multiple index pages.
• Credits text: The text that appears when credits are displayed on the index page. In the album, %X is automatically replaced by "jAlbum 22, Jupiter 40" (using the current version numbers, of course). If you leave this field blank, or do not include the %X placeholder, the credits link will display the jAlbum default text chosen under Settings » Pages » Credit links.

Text » Slide Page

Text » Slide Page » Navigation

• Thumbnail page: The tooltip that appears when a visitor hovers on the "thumbnail page" icon.
• Previous image: The tooltip that appears when a visitor hovers on the "previous image" icon.
• Next image: The tooltip that appears when a visitor hovers on the "next image" icon.

Text » Slide Page » Maps

• Open map: The tooltip that appears when a visitor hovers on the globe icon that links to a map.
• Photo location: The tooltip that appears when a visitor hovers on the marker icon on a map.
• Close map: The tooltip that appears when a visitor hovers on the slashed globe icon.

Text » Slide Page » Downloads

• Download image: The tooltip that appears when a visitor hovers on the download icon, and the download will provide the slide image (scaled image or original image, depending upon the linking choice).
• Download original: The tooltip that appears when a visitor hovers on the download icon, and the download will provide the original image rather than the slide image.
• Download video: The tooltip that appears when a visitor hovers on the download icon, and the download will provide the video.
• Download audio: The tooltip that appears when a visitor hovers on the download icon, and the download will provide the audio file.

Text » Slide Page » Other

• Image counter: The text that appears when an image counter is displayed. In the album, %X is automatically replaced by the current image number, and %Y is replaced by the total number of images in the folder.

Info Page » Design

Info Page » Design » Layout

• Match width of index page: If selected, the info page will be the same width as the top-level index page.
• Page width: The width of the info page. Used to produce an info page display that's narrower than the index page, though the title bar remains the same width. If larger than the actual width of the index page, this value is ignored.
• Link on top level only: If selected, the link to the info page will appear only on the index page for the top level of the album. If not selected, the link will appear on all index pages.
• Match index page theme image: If selected, and if a theme image is used on the top index page of the album, the info page title bar will match that of the index page.
• Include title bar logo: If selected, and if a title bar logo has been added to the project, the info page title bar will also show the logo image.
• Match slide page borders: If selected, the border style, border width, radius, shadow width, and shadow opacity on the info page will match those of the slide pages.
• Border style, Border width, Radius, Shadow width, and Shadow opacity: You may select the style of border on the info page - solid, double, or beveled - the width of the border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed).

Info Page » Design » Image

• Add / Remove: Click Add to select an image to display on the info page. Click Remove to remove the image.
• File: This field displays the name of the chosen file, but cannot be directly edited. To change the image, remove the existing one and add a new one.
• Image width: The width of the image. The image will be scaled down to this width - the image will not be shown larger than it actually is, however.
• Location: The image may be positioned to the left, to the right, or in the center. If the image is positioned to the left or right, the text will flow around the image.
• Border style, Border width, Padding, Radius, Shadow width, and Shadow opacity: You may select the style of border on the image on the info page - solid, double, or beveled - the width of the border, the amount of padding between the image and its border, the radius applied to the corners, the width of the shadow, and the opacity of the shadow. Setting the border width to 0px results in no border being applied, and setting the shadow width to 0px results in no shadow. Solid borders are generally visible at only 1px, double borders require a width of at least 3px-4px to be visible, and beveled borders require a width of at least 5px-6px to be visible. Depending upon the style, beveled borders often look better with the accompanying shadow set to 0px (i.e., removed). If a transparent PNG file is used for the image, a shadow may not be suitable unless the image is rectangular, or unless the image is circular, and a matching radius is applied.

Info Page » Design » Contact

• Email label: The label that will appear on the contact line on the info page.
• Email address: The email address that will appear on the contact line on the info page.

Info Page » Text

Info Page » Text » Title

• Title: The title that will appear on the info page.

Info Page » Text » Body

• Body: The text that will appear in the main box on the info page.
• Text alignment: The text in the main box on the info page can be centered, left-aligned, right-aligned, or justified.
• Do not insert HTML breaks: Normally, the skin converts linefeeds in the text you enter to HTML <br> tags. If this option is chosen, the skin will not do this conversion. This is useful if the text you are providing already contains HTML paragraph or break tags, and insertion of additional break tags would disrupt that HTML code.

Code » CSS

Code » CSS

• CSS: CSS code entered here will be inserted at the end of the output common.css file when the album is created. jAlbum variables will be replaced with their actual values. This can be used to override the album's own CSS attributes, or to add attributes to support additional page material, like the menu system on the Jupiter Sample Albums page.

Code » Top & Bottom Info

Code » Top & Bottom Info

• Text to be inserted above thumbnail table: Text entered here will be inserted on the finished album pages between the title and the thumbnail table. Linefeeds will be replaced by HTML <br> characters. jAlbum variables will be replaced with their actual values.
• Alignment: The Top Info text can be centered, left-aligned, right-aligned, or justified.
• Width: The width of the Top Info text block may be set to a percentage of the page width.
• Top level only: If selected, the text will be inserted only on the top-level page of the album, and not in folders below that level.
• Do not insert HTML breaks: Normally, the skin converts linefeeds in the text you enter to HTML <br> tags. If this option is chosen, the skin will not do this conversion. This is useful if the text you are providing already contains HTML paragraph or break tags, and insertion of additional break tags would disrupt that HTML code.

  You may provide different Top Info text for each folder. See Image & Folder Settings.

• Text to be inserted below thumbnail table: Text entered here will be inserted on the finished album pages below the thumbnail table. Linefeeds will be replaced by HTML <br> characters. jAlbum variables will be replaced with their actual values.
• Alignment: The Bottom Info text can be centered, left-aligned, right-aligned, or justified.
• Width: The width of the Bottom Info text block may be set to a percentage of the page width.
• Top level only: If selected, the text will be inserted only on the top-level page of the album, and not in folders below that level.
• Do not insert HTML breaks: Normally, the skin converts linefeeds in the text you enter to HTML <br> tags. If this option is chosen, the skin will not do this conversion. This is useful if the text you are providing already contains HTML paragraph or break tags, and insertion of additional break tags would disrupt that HTML code.

  You may provide different Bottom Info text for each folder. See Image & Folder Settings.

Code » Index Page

Code » Index Page » Head

• HTML to be inserted before closing </head> tag: Code entered here will be inserted on the finished index pages above the closing </head> tag. jAlbum variables will be replaced with their actual values. This might be used, for example, to insert a Javascript function that is called elsewhere on the page.
• Top level only: If selected, the code will be inserted only on the top-level index pages of the album, and not in folders below that level.

Code » Index Page » Body Opening

• HTML to be inserted after opening <body> tag: Code entered here will be inserted on the finished index pages after the opening <body> tag. jAlbum variables will be replaced with their actual values. This might be used, for example, to insert a menu system on the pages. The text entered here will be wrapped by the skin in a <div> with a CSS class of ju-bodyopening, and can be targeted by custom CSS (see Code » CSS), for example:

  .ju-bodyopening {font-size:16px;}

• Top level only: If selected, the code will be inserted only on the top-level index pages of the album, and not in folders below that level.

Code » Index Page » Body Closing

• HTML to be inserted before closing </body> tag: Code entered here will be inserted on the finished index pages before the closing </body> tag. jAlbum variables will be replaced with their actual values. The text entered here will be wrapped by the skin in a <div> with a CSS class of ju-bodyclosing, and can be targeted by custom CSS (see Code » CSS), for example:

  .ju-bodyclosing {font-size:16px;}

• Top level only: If selected, the code will be inserted only on the top-level index pages of the album, and not in folders below that level.

Code » Slide Page

Code » Slide Page » Head

• HTML to be inserted before closing </head> tag: Code entered here will be inserted on the finished slide pages above the closing </head> tag. jAlbum variables will be replaced with their actual values. This might be used, for example, to insert a Javascript function that is called elsewhere on the page.

Code » Slide Page » Body Opening

• HTML to be inserted after opening <body> tag: Code entered here will be inserted on the finished slide pages after the opening <body> tag. jAlbum variables will be replaced with their actual values. This might be used, for example, to insert a menu system on the pages. The text entered here will be wrapped by the skin in a <div> with a CSS class of ju-bodyopeningslide, and can be targeted by custom CSS (see Code » CSS), for example:

  .ju-bodyopeningslide {font-size:16px;}

• Hide on small displays: If selected, this material will be hidden on a small display, like a smartphone.

Code » Slide Page » Body Closing

• HTML to be inserted before closing </body> tag: Code entered here will be inserted on the finished slide pages before the closing </body> tag. jAlbum variables will be replaced with their actual values. The text entered here will be wrapped by the skin in a <div> with a CSS class of ju-bodyclosingslide, and can be targeted by custom CSS (see Code » CSS), for example:

  .ju-bodyclosingslide {font-size:16px;}

• Hide on small displays: If selected, this material will be hidden on a small display, like a smartphone.

Misc

Misc

• Copyright notice: A copyright notice may be placed at the bottom of album pages. There are various ways to produce a copyright symbol. On a Windows machine, hold down the ALT key, type the numerals 0169 on the number pad (you can't use the numbers on the top row of the keyboard), then release the ALT key. On a Mac, hold down the Option key, type g, then release the Option key. On any platform, you can use the HTML entity for a copyright symbol: &copy;
• Copyright location: The copyright notice may be placed selectively - all pages, index pages only, top-level index page only, or slide pages only.
• Meta "description" tag: The entered text will be inserted into every page as a meta description tag. This is used by most search engines to describe a site when it is listed in search results. Therefore, the text should be a simple description of the site contents. If no text is entered, the skin assembles a description for each page from the folder title and comment or the image title and comment.
• Meta "robots" tag: The chosen tag will be inserted into every page. A meta robots tag may be used to tell search engine robots whether to index this page and whether to follow links on this page.
• Favicon location: Provide the absolute address of the favicon file for the website. Normally, the favicon file would be stored at the root of your domain, for example, http://example.com/favicon.ico. The file should never be added to the jAlbum project itself, and should be uploaded to your web host independently of the album. Note that if you host your album at jalbum.net, a favicon with the default name, i.e., https://yourname.jalbum.net/favicon.ico, will be overridden by the default jAlbum favicon (Dor). To use your own favicon with jalbum.net hosting, it must be given a different name, like mydog.ico. Favicon files may be ICO, PNG, or GIF files, must be square, and must have dimensions of 16x16, 32x32, 48x48, or 64x64.
• Google Analytics code: Copy and paste the entire code snippet provided to you by Google Analytics. It will be inserted at the appropriate location in every page.
• HTML language: Select the language code that corresponds to the predominant language used in your album. This will be used in the <html> tag on every page of the album. It's helpful for search engines, for browser translations, and in some cases for choosing correct typography. It defaults to the language you have chosen for jAlbum. If the language code you want to use is not in the list, you may enter any of the standard codes manually.

Custom

Custom » Create a custom style

• Create a custom style based on an existing style: The user can select one of the preset Jupiter styles as the starting point for creating a custom style. This resets the color settings to those of the preset style selected.

Custom » Body & Borders

• Body color: The color of the body of the pages.
• Gradient bottom color: The color of the bottom of the linear gradient applied to the body of the page. Best results are obtained by using a darker version of the primary body color or by using black or very dark gray. However, any colors may be used. You may find it necessary to alter text colors, since text may now be appearing against much darker backgrounds.
• Border: The color of the image borders.
• Border hover: The color of the image borders when hovered. This is best used when no shadow is being used for the thumbnails, or when a shadow has been chosen, but the shift on hover option has been turned off. You might also choose to make the border color the same as the body color, but choose a contrasting color for the hover border. Then, the border would be invisible until the user hovers on the thumbnail.
• Beveled N/W: The color of the north and west sides of a beveled border, if that border style is chosen.
• Beveled S/E: The color of the south and east sides of a beveled border, if that border style is chosen.
• Background Texture - Add / Remove: Click Add to select a background texture image for the page body. Click Remove to remove the image. This should be a small texture pattern that is repeated over the page.
• File: This field displays the name of the chosen file, but cannot be directly edited. To change a background texture image, remove the existing one and add a new one.

Custom » Text and Top of Page Icon

• Theme title: The color to use for the page title shown on the theme image. Because this text is shown on the theme image, rather than on the body of the page, it is often best to choose a contrasting color (typically white, for visibility against a dimmed image).
• Theme description: The color to use for the page description shown on the theme image.
• Page title: The color of the page title, when not shown on a theme image or a banner title bar.
• Page description: The color of the page description, when not shown on a theme image or a banner title bar.
• Text: The color of text on the pages.
• Text link hover: The color of link text on the pages, when hovered on.
• Top of page icon: The color of the "top of page" icon.
• Top of page background: The color of the "top of page" icon background.

Custom » Banner Title Bar

• Background color: The color of the banner title bar.
• Page title: The color of the page title in the banner title bar on index and info pages.
• Page description: The color of the page description in the banner title bar on index pages.
• Background Texture - Add / Remove: Click Add to select a background texture image for the banner title bar. Click Remove to remove the image. This should be a small texture pattern that is repeated over the banner title bar.
• File: This field displays the name of the chosen file, but cannot be directly edited. To change a background texture image, remove the existing one and add a new one.

Custom » Info Page

• Page title: The color of the info page title, when not shown on a theme image or a banner title bar.
• Box background: The color of the text box on the info page.
• Text: The color of text on the info page.
• Text link hover: The color of link text on the info page, when hovered on.

Custom » Generic Icon Backgrounds

• Folder icon: The color of the background of the folder icon on an index page, if no representing thumbnail is selected.
• Other icon: The color of the background of the audio and PDF icon on an index page, if no representing thumbnail is selected.
• Slide icon: The color of the background of the audio icon on a slide page, if no representing thumbnail is selected.

Custom » Other

• Image padding: The color of the image padding that shows between the image and its border. This is visible only if you have chosen both a border width and border padding width greater than zero. The default is for the padding area to be transparent, allowing the body color or body background image to show through. A solid color may be chosen instead.
• Thumbnail surround: The color of the box that surrounds a thumbnail image, if that option is selected under Thumbnails.

About

About

• Jupiter: The version number currently installed.
• Jupiter Release Notes: A link to the release notes.
• Jupiter User's Manual: A link to this user's manual.
• Jupiter Home Page: A link to the Jupiter demonstration page.
• Jupiter Support Forum: A link to the jAlbum forum section for Jupiter support.
• Jupiter License: A link to the Jupiter licensing terms.
• jAlbum Skin Page: A link to the jAlbum website page for this skin.

Image & Folder Settings

To access image and folder settings, hover on a thumbnail in the main jAlbum editing window, and click More.

Then choose Edit.

Then choose the Jupiter panel on the right side of the editing window.

• Video host URL: YouTube or Vimeo: If you enter a URL in this field, this image will be linked to an externally-hosted video on YouTube or Vimeo. See Info: Hosted Videos for more information.
• Width: The width of the display window for an externally-hosted video.
• Height: The height of the display window for an externally-hosted video.

  Note that the dimensions of the video window will accept these width and height entries unless they are larger than the selected jAlbum image bounds, in which case they will be automatically adjusted downwards to remain within those bounds. The adjustment occurs at album creation time - the adjusted values are never displayed in this window.

• Length: You may provide the length (hours, minutes, seconds) of an externally-hosted video. The skin will use this if you choose to display the video length as part of a caption or tooltip.
• Map link: If selected, and if GPS coordinates are available in the EXIF or XMP metadata of this image file, a globe icon is displayed in the caption area which, if clicked, opens a new browser tab or window that displays a map, centered on the GPS coordinates. If you have chosen to display map links for all images in the album (see Maps), making a selection here allows you to specify a different map type and zoom level for this image.
• Map type: The type of map to display: hybrid, roadmap, satellite, or terrain. The hybrid map is a satellite view with an overlay of labels (street names, for example). The terrain map is a topographic view, with contour lines and shading to represent elevation.
• Zoom level: The initial zoom level for the map. Note that some map types, like terrain, may not be available at high zoom levels.
• Responsive image only: Normally, the slide page is fully responsive, showing the image and all text on the page (captions, copyright, etc.) - a vertical scrollbar appears only in the most extreme cases. If this option is selected, the page will be responsive to the image only, allowing caption text to trigger the appearance of a scrollbar. This may be useful when presenting an image that should be shown as large as possible, despite the presence of lengthy caption text.
• Custom thumbnail overlay: If checked, a custom thumbnail overlay icon may be shown on the thumbnail for this object.
• Make New: When displaying a "new" overlay on a thumbnail for an image or video, the skin uses the date on which the file was added to the project to determine its "newness." Clicking this button causes the "date added" to be set to the current date and time, thereby making it appear new. Note that this cannot be undone.
• Make Old: Clicking this button causes the "date added" to be set to a very old date, roughly Jan. 1, 1970 (adjusted for your time zone), thereby making it appear old even if it is, in fact, newly-added. Note that this cannot be undone.
• Folder Info Text: Clicking this button brings up a window in which you can enter top and/or bottom info text for the current folder (material to be shown above or below the thumbnail table), overriding the material provided in the main skin settings.

Info: Video Support

In Jupiter, support for videos added to a project is dependent upon the video support built into jAlbum. For videos to work properly in an album, video support must be enabled in jAlbum under Tools (jAlbum in macOS), Preferences, Advanced. The slide page window that displays the video will be same size as the video's native dimensions, reduced as necessary to fit within the visitor's viewport. If those dimensions are larger than the image bounds chosen under Album » Settings » Images » Image bounds » Images, the dimensions will be reduced to fit within those bounds, preserving the aspect ratio. The actual video file in the album will not be adjusted - only the player window is scaled down as necessary. If you provide the site visitor with a download icon, he will be given the video in its actual, native dimensions.

With video support enabled in jAlbum, the core program automatically provides a thumbnail image for the video. In image editing mode, a slider is available to choose a video frame other than the one automatically selected. This can be especially helpful if the video starts with several seconds of a black screen - the automatically-selected frame might be black in that case.

It is possible to provide your own representing image for the video, which could be an image that doesn't even appear in the video. Choose a full-sized image (a regular JPG file, and not just a small thumbnail), change its extension to .thm, and give it the same name as your video. For example, for a video called mydog.mp4, the image file should be named mydog.thm. This file should then be added to the project at the same time the video is added to the project. This image will then be used both for the thumbnail and for the video frame while the video is loading and after it has finished playing.

Jupiter can also support externally-hosted videos from YouTube and Vimeo. To use this method, see Info: Hosted Videos.

Your web host must provide video files with the correct header information. The MIME type must be video/mp4 - if an MP4 file is delivered by your web host with any other MIME type, playback will fail in some browsers. If you find that a video in your album plays properly when you preview the album locally, but displays only an error message when viewed from your web host, an incorrect MIME type is the most likely cause. Ideally, your web host should correct the server configuration, but if you can change your own .htaccess file on the server, adding this line will correct the problem:

AddType video/mp4 .mp4

In addition, video files must not be compressed by the server using something like gzip, for example.

Info: Hosted Videos

jAlbum does not have a way of extracting a still image from an externally-hosted video to use to create a thumbnail for it. You can use a video editing program to extract a single frame, take a screenshot, or choose any other still image to represent the video in the album. This should be a full-sized JPG image, rather than a thumbnail.

Add the image file that represents the video to the project.

Because the video must be connected to a single image, you cannot use album-level settings. You must choose the settings for this video under Image & Folder Settings. jAlbum cannot determine the dimensions or the length of an externally-hosted video, so these values should be entered manually. Enter the absolute URL for the video.

For a YouTube video, view the video on the YouTube site, click the Share button, and copy the URL that is displayed. Then click the Embed button, and make note of the width and height of the video. If there is no Embed option, that means that the person who posted the video does not allow it to be embedded on any other site, and you will not be able to use it in your album. The skin will accept either of the following URL formats:

• https://youtu.be/Bj-7LxpF9dA
• https://www.youtube.com/embed/Bj-7LxpF9dA

The skin will still recognize the following formats, but these should not be used going forward. Support for them is not guaranteed, particularly the first format, which is for the obsolete YouTube Flash player:

• https://www.youtube.com/v/Bj-7LxpF9dA
• https://www.youtube.com/watch?v=Bj-7LxpF9dA

For a Vimeo video, view the video on the Vimeo site, and click the Share button, and copy the URL that is displayed. Then click the Embed box, and make note of the width and height of the video. If you see a warning about domain restrictions on embedding, that means that the person who posted the video does not allow it to be embedded on any other site, and you will not be able to use it in your album. The skin will accept either of the following URL formats:

• https://player.vimeo.com/video/12345678
• https://vimeo.com/12345678

Enter the dimensions for the video in the image and folder settings. You can display the video larger or smaller than its native dimensions, but you should preserve the aspect ratio. If you don't, the video will be displayed with colored bars above and below the video, or on its sides.

Info: Audio Support

In Jupiter, audio files (MP3 format only) may be added to a project in the same way as image files or video files. A generic image is provided for audio files, to serve both as a thumbnail image on the index page and as an image to be displayed on the slide page for the audio file.

It is possible to provide your own representing image for the audio file. Choose a full-sized image (a regular JPG file, and not just a small thumbnail), change its extension to .thm, and give it the same name as your audio file. For example, for an audio file called mydogsings.mp3, the image file should be named mydogsings.thm. This file should then be added to the project at the same time the audio file is added to the project. This image will then be used both for the thumbnail and for the slide page, where it will be displayed while the audio is playing.

Info: HTML Tags and jAlbum Variables

HTML tags and jAlbum variables may be used in a number of different contexts, and will be honored in the album (including things like links). jAlbum variables will be passed to the jAlbum engine and will be evaluated before they are placed in the completed album. Almost all user entries are treated in this manner:

• Album title and description
• Folder title and comment
• Image title and comment
• Tooltips
• Custom CSS
• Top info and bottom info
• Custom HTML <head> and <body> entries
• Meta description
• Copyright

If you use a < or > character in a text string, it is assumed to be part of an HTML tag, and may produce errors if it isn't. If you want to use one of those characters as simple text, use its HTML entity code, instead.

• for <, use &lt;
• for >, use &gt;

Info: Google Fonts & WOFF Files

A longstanding problem with web pages is that fonts are not actually included in the page code. The page simply includes some text, along with an instruction in the CSS that tells the browser what font to use to display that text. But if the visitor's computer doesn't have that font installed, it falls back to a default, or works its way down whatever font stack is indicated in the CSS until it finds a font that it can use. The effect of this limitation is that web page designers are generally forced to rely on a small set of "web safe" fonts, fonts that can reliably be found on most visitors' computers.

Packaging fonts with web pages in a way that allows the site visitor to install the font on his computer, while possible, runs afoul of copyright protections. Most fonts, even those normally distributed with a new computer, are protected by copyright, and you don't have the right to make them available to others.

To address this problem, Google Fonts and Web Open Font Format (WOFF) files can be used. The font is not actually installed on the visitor's computer. It is used only for displaying text on your web page.

In Jupiter, you may add two Google Fonts and a WOFF file, and tell the skin which font to use for each text element, with the default being the selected regular font family. Decorative fonts can be difficult to read at smaller sizes, and are therefore best used only for page titles. You are likely to find that they look better when displayed with a larger font size than you would use for a regular font, and with normal weight, rather than bold. More traditional fonts may be suitable for all text.

To choose a Google Font, visit the Google Fonts page, and identify the font you want to use. Scroll down on the page to view suggested font pairings. You might want to use a more elaborate font for titles, and a simpler font for captions. Make a note of its name, and enter the name in the Jupiter settings. Jupiter does not support the use of Google Font multiple styles. If you see a font listed, and it indicates that there are multiple styles of that font available, when you enter its name in the Jupiter settings, the skin will use the basic style of that font.

There are now many hundreds of free WOFF files available. Search the web for free woff to find sources (some sites require registration). In most cases, the fonts are free for you to use on your website, even if the website is commercial, but the font designers retain copyright, so you don't have permission to redistribute the files directly to others. Often, these free fonts are provided in a variety of formats - WOFF, OTF, TTF, EOT, SVG, and so on. The format needed for Jupiter is indicated by a .woff file extension. In many cases, the download will be provided as a zip archive containing several formats - you need to extract the .woff file from that archive and use that one for inclusion in the skin.

The FontSquirrel site is a typical example, offering many free fonts. Find one you like, and then click on the name of the font (not on the Download link). Then look for a Webfont Kit link on the menu bar. There, you can choose the WOFF format. If a font is available in only one format, the Webfont Kit menu bar choice will be absent. In that case, you can download another format, like TTF, then use FontSquirrel's Webfont Generator to upload the TTF and convert it to WOFF - choose the Expert radio button after you've uploaded the TTF version. In short, it may take some exploration to find the WOFF file you need.

See Fonts » Album to include a Google Font and/or WOFF file in your album.

Info: Linking to Originals

If you choose Link to originals in the main jAlbum settings (Album » Settings » Pages), your images will not be scaled or modified in any way. They will be used directly in the slide pages of the album. the skin will adjust the slide display to the visitor's viewport, but because the files have not been scaled, the file sizes may be very large, making this setting a poor choice for a web album. However, you can resize your images before using them in jAlbum, in which case choosing Link to originals might be suitable. If you also select HiDPI images, your original images will be shown at one-half their native dimensions, to preserve clarity on high-density displays.

If you choose Link to scaled-down images only, videos will be shown in their native dimensions, or to fit within the image bounds, or to fit within the visitor's viewport, whichever is smaller. If you choose Link to originals, videos will be shown in their native dimensions, or to fit within the visitor's viewport, whichever is smaller.

If you choose Link to scaled-down images only, YouTube and Vimeo videos will be shown in the dimensions you have specified under the image and folder settings, or to fit within the image bounds, or to fit within the visitor's viewport, whichever is smaller. If you choose Link to originals, YouTube and Vimeo videos will be shown in the dimensions you have specified under the image and folder settings, or to fit within the visitor's viewport, whichever is smaller.

If you choose Link to scaled-down images only, audio files will be shown in the dimensions of the representing image that accompanies the audio file, or to fit within the image bounds, or to fit within the visitor's viewport, whichever is smaller. If you choose Link to originals, audio files will be shown in the original, unscaled dimensions of the representing image that accompanies the audio file, or to fit within the visitor's viewport, whichever is smaller.

If you choose Link to scaled-down images only, PDF's will be shown in a square window that fits within the image bounds, or to fit within the visitor's viewport, whichever is smaller. If you choose Link to originals, PDF's will be shown in a square window with a maximum size of 1080x1080 pixels, or to fit within the visitor's viewport, whichever is smaller.

Info: HiDPI Images

High-density display devices, like Apple's retina displays, have twice the number of physical pixels (or more) within a given area, compared to regular devices. Images will appear sharper on these displays if they are larger, but displayed in half the CSS layout space. For example, an image that is 1200px wide is normally displayed in 1200 CSS pixels on a regular monitor, and is using 1200 physical pixels. But for a high-density device, it is better to provide an image that is 2400px wide, but then display it in 1200 CSS pixels on the monitor. When you do this, the display makes full use of the 2400 pixels that are available in the image, by using 2400 of its physical pixels.

jAlbum includes the option, under Settings » Images » General, of creating high-density thumbnails and/or slide images, referred to as HiDPI images. This doesn't actually produce images with a higher pixel density - there is no such thing. It simply produces images with double the image bounds - the skin, however, then displays these images in half the space.

Doing this may produce a better-looking image on a high-density monitor. The penalty is that the image files are typically several times the file size. They consume more bandwidth, taking longer to upload and longer to download when someone visits the site. The user with a regular monitor is forced to download much larger files, but gets no benefit from them.

The skin defaults to using HiDPI thumbnails, which produces better-looking thumbnails on high-density displays. For thumbnails, this does produce larger files, but they're still relatively small, so the bandwidth penalty is minor.

Using HiDPI images is a different matter entirely. The bandwidth penalty is substantial, but the perceived improvement in display quality is not as dramatic as it is with small images like thumbnails. As the bandwidth available to your site visitors continues to grow, the greater use of bandwidth will become irrelevant. In addition, the skin does a lot of image preloading, so as a visitor moves through the slides, there will often be no delay, even with HiDPI images. Improving technology will eventually make this a non-issue, and you will be able to use HiDPI images in all your albums.

It should be noted that if the images you are adding to your project aren't fairly large to begin with, perhaps 3000x2000 pixels, there is no benefit to be gained by using HiDPI images, and there is no reason to choose that option. jAlbum can't interpolate, and produce more image information than what is present in the original images.

Recent jAlbum versions include the ability to produce albums with two sets of images, but the image display script used in this skin is not constructed to make use of them. In addition, a "2X variant" image in jAlbum is not handled the same way as a HiDPI image - the benefit of the greater density is lost.

If you want to provide HiDPI images to visitors with high-density monitors, but not penalize visitors with regular monitors, the only solution is to produce two copies of the album. Create your project and call it, for example, mydogLR (for "low resolution"), using image bounds that produce good-looking slides on a regular monitor (the skin defaults, for example). Accept the default settings - HiDPI thumbnails, but not HiDPI images. Upload your album to https://mysite.com/mydogLR/.

Now duplicate the entire project - click the down-arrow to the right of the project name in the jAlbum project panel, choose Duplicate Project, and call it mydogHR (for "high resolution"). In this duplicate project, choose HiDPI images, make the album, and upload it to https://mysite.com/mydogHR/.

Now you need to provide a steering script on your site, so that visitors will be directed to the appropriate album. Create a directory on your site called https://mysite.com/mydog/ and upload an index.html to it that contains the following:

<!DOCTYPE html>
<meta charset='UTF-8'>
<title>Redirect</title>
<script>
if(screen.width >= 768 && screen.height >= 768 && window.devicePixelRatio >= 2) {
	window.location = "http://mysite.com/mydogHR/";
} else {
	window.location = "http://mysite.com/mydogLR/";
}
</script>

All visitors can now be provided with a single link to your album: https://mysite.com/mydog/. The steering script will automatically direct visitors to the high resolution album if they are on anything the size of an iPad or larger, and have a high-density display. These are the visitors who can benefit from the larger slide images. Other visitors will be directed to the low resolution album.

Info: Master Album

With almost any skin, it's possible to create folders and subfolders, and produce a multilevel album. But in most cases, all levels must use the same skin, and usually the same style of that skin, as well. Jupiter, however, can be used to create a master index of other albums; each album may use a different style of the Jupiter skin, or a different skin entirely.

• Create each of the other albums, and upload them to your web host. They can be arranged in a uniform hierarchical directory structure (for example, with each individual album residing in a subdirectory under the location of the master index), or can be placed in any location on the web host, or even on other web hosts.
• Create a project for the master index, and add a web location for each sub-album. You can drag a URL from the address bar of your browser (or the circled "i" or padlock symbol to the left of the address) into the jAlbum Explore window in your project, or you can right-click in the jAlbum Explore window and choose New page, Web location, and enter the full URL of the sub-album. jAlbum will then try to extract an image from that website, but if you want to use another image, you can click the folder icon to the right of the Image URL field, and navigate to an image you want to use instead.
• Ideally, each sub-album should provide a means by which the site visitor can return to the master index. Most skins provide a way of entering an uplink from the main level. If you have chosen a hierarchical directory structure for your individual albums, the uplink would be ../index.html; otherwise, an absolute URL is required, such as http://example.com/master/index.html.
• Using the same technique, i.e., adding web locations to a project, you can create an album in which each thumbnail leads to another web site. The other sites don't have to be created with jAlbum - you can add thumbnails that take the visitor to any other web sites.

Info: Version Updating

New versions of Jupiter are published with some regularity. These new versions generally include new features, improvements, and bug fixes. The jAlbum application will let you know when a new version is available, and users are encouraged to download and install the new version.

• It is best to install a new version of the skin with the jAlbum application closed, i.e., not running. Save the Jupiter.jaskin file to your computer, close jAlbum, launch the Jupiter.jaskin file to do the installation, then launch jAlbum again.
• If you have a project that was created with an older version of Jupiter and you're happy with it, and don't intend to add any images to it or make any other changes to it, there's no reason to make the album again with the latest version of the skin. However, if you intend to change that project in any way, it should be reprocessed with the newest version.
• Before re-making an existing album with a new version of the skin, read the release notes, and create a small test album to see the effect of newly-introduced features. These new features are sometimes enabled by default in a new version, and will be applied to your existing project unless you choose to turn them off. The time to discover this is not after you've rebuilt an entire 10,000-image album.
• There is no need to invoke Force Remake in jAlbum. This forces jAlbum to reprocess all of the images, rather than just generating new HTML and CSS files. This is almost never required. Just click Make Album, and let jAlbum decide what needs to be updated.
• However, if your project contains folders (subdirectories), it is very important that all subdirectories be processed with the new version of the skin. All of the pages in an album share the same CSS files, and having a page of HTML generated with an older version of the skin using a CSS file created with the newest version could produce catastrophically bad results. Under Album » Settings » Advanced » General, be sure to check Process subdirectories and Include subdirectories in index pages. Be sure not to check Process only updated subdirectories. An updated subdirectory is one that has had images added to it, or removed from it. Other settings changes, or the use of a new version of the skin, does not cause jAlbum to regard subdirectories as being "updated."
• For an active project, one that you make changes to periodically, it is recommended that you stay abreast of new skin versions. Generally, the process of updating an album by one or two skin versions is easy, and takes very little time. Trying to jump over many versions, however, could require considerable effort. Stay current to avoid problems.
• After you have opened an existing project with the new skin version, it's a good idea to save the project, even if jAlbum doesn't prompt you to do so. This saves newly-defined skin variables with the project, which makes subsequent project opening smoother and less prone to errors.

Info: Browser Support

• Standards compliance: Jupiter produces valid HTML5 and CSS3 code. However, no attempt is made to ensure that user-provided code (in titles, comments, etc.) is valid.
• Current desktop browsers: All Jupiter skin features are supported in the current versions of Chrome, Edge, Firefox, and Safari.
• Other browsers: Jupiter is not tested in any other browsers. Support for skin features is unknown.
• Tablet browsers: Jupiter is only occasionally tested on any tablets (e.g., iPad), but all skin features should operate properly. Simple swipe gestures are supported.
• Smartphones: Jupiter is tested in Chrome and Firefox on an Android phone, and is occasionally tested in Chrome and Safari on an iPhone. All skin features should operate properly. Simple swipe gestures are supported.
• Javascript: Many functions of the album are dependent upon Javascript, so the site visitor must have Javascript enabled.
• jAlbum integrated browser: The integrated browser in jAlbum is fairly reliable, but you should preview your album in a real browser (Chrome, Edge, Firefox, or Safari) before concluding that there's a problem with it.

Jupiter License

The Jupiter skin for jAlbum, including all supporting files, source code, compiled code, and scripts, ©2021, Jeff Tucker.

The skin uses the following open-source scripts:

• jQuery
• TouchSwipe

You may use the software to create albums for personal or commercial sites. You may distribute copies of the software to others, but for any reuse or distribution, you must make clear to others the license terms of this software. You may modify the software for your own use.

The copyright holder reserves the right to waive or to withdraw any of these terms on a case-by-case basis.

The jAlbum application is free for personal use during the initial trial period, but after that, a Standard license is required. For commercial use, a Pro license is required. Visit the jAlbum site for further information.