Photo Album

The JupiterX Photo Album widget is an exceptional tool for creating and showcasing photo galleries on websites. This widget allows for the easy creation of stunning and eye-catching photo albums, effectively engaging your audience and enhancing the visual appeal of your website. It's designed for ease of use, enabling you to effortlessly display your images in a captivating way, making your site more visually interesting and engaging.

View Live Demo

Content Tab

Content

  • Skin: Click on the dropdown menu to select the desired skin for your photo album. 'Cover' is currently selected.

Adding Items to the Album:

  • Item #1: This is a collapsible tab that allows you to configure individual items in the photo album.
    • To add an image, click on the grey box with the plus icon that says 'No Images Selected'. Select the images you wish to include from the media library or upload new ones.
    • Title: Enter the title for your image in the input field.
    • Description: Provide a description for the image in the provided textarea.
    • Stack Color: If the skin supports it, choose a color that will be used to stack the images. Click on the color picker to select a color.
  • Click on the 'Add Item' button to add more images to your photo album.

Settings

  • Layout: Choose the layout for the photo album. The default is 'Grid'.
  • Columns: Select the number of columns for the grid layout using the dropdown.
  • Image Resolution: Select the resolution for the images. 'Large - 1024 x 1024' is currently selected.
  • Hover Effect: Choose an effect that will be displayed when hovering over images.
  • Thumbnail: Toggle 'Show' to display thumbnails of the images.
  • Title: Toggle 'Show' to display the title of each image.
  • Description: Toggle 'Show' to display the description of each image.
  • Random Order: Toggle 'No' if you want to keep the order of images as arranged. Toggle 'Yes' to display images in a random order.

Style Tab

Cover

  • Height: Slide to adjust the height of the cover image or enter a specific value in the input field next to the slider.
  • Column Spacing: Slide to adjust the space between columns or enter a specific value in the input field next to the slider.
  • Row Spacing: Slide to adjust the space between rows or enter a specific value in the input field next to the slider.
  • Alignment: Choose the alignment of the cover images. Options typically include left, center, and right alignment.
  • Border
    • Border Type: Click on the dropdown to select a border type. Options may include none, solid, double, dotted, dashed, etc.
    • Border Radius: Input the desired radius for the border to create rounded corners. Enter values for top, right, bottom, and left or use a uniform value for all.
    • Box Shadow: Click on the icon to add a shadow effect to the cover images. You can usually customize the shadow's color, blur, spread, and position.

Overlay

  • Color Type: Select between classic (solid) color, gradient, or dynamic tag options for the overlay.
  • Hover Effect: Choose an effect that will be displayed when hovering over the cover images.

Thumbnail

  • Style: Click on the dropdown menu to select the desired style for the thumbnails. 'Rectangular' is currently selected, but you have 'Circular' option too.
  • Normal: Configure the style settings for the thumbnail's normal state.
  • Hover: Configure the style settings for the thumbnail's hover state.
  • Opacity: Slide the bar to set the opacity level of the thumbnails, or directly enter a value from 0 to 1, where 1 is fully opaque and 0 is fully transparent.
  • Width: Enter a specific value in pixels to set the width of the thumbnails.
  • Height: Enter a specific value in pixels to set the height of the thumbnails.
  • Spacing: Enter values for the spacing around the thumbnail to adjust the margin. You can set individual values for the top, right, bottom, and left, or you can enter one value that applies to all sides.
  • Color: Click on the color picker to choose a border color for the thumbnails.
  • Border Type: Click on the dropdown menu to select a border type. Options may include 'None', 'Solid', 'Dotted', 'Dashed', etc.
  • Border Radius: Enter a value in pixels to round the corners of the thumbnails. You can set individual values for the top, right, bottom, and left corners or use a uniform value for all.

Title

  • Color: Click on the color picker to select a color for the title text.
  • Typography: Click on the pencil icon to set the font family, size, weight, transform, style, decoration, line-height, and letter spacing.
  • Spacing: Set the margin around the title. Input values for top, right, bottom, and left or use a uniform value for all.
  • Alignment: Choose the alignment for the title text. Options typically include left, center, and right alignment.

Description

  • Color: Click on the color picker to select a color for the description text.
  • Typography: Click on the pencil icon to set the font settings for the description text.
  • Spacing: Set the margin around the description. Input values for top, right, bottom, and left or use a uniform value for all.
  • Alignment: Choose the alignment for the description text. Options typically include left, center, and right alignment.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles