In our previous guide on before-and-after sliders, we explained how to effectively showcase before-and-after scenarios through images. While these sliders are great for highlighting significant changes, they are not the best option for presenting a gallery of images on your website.
That is why, in this article, you will find the best Photo gallery widgets for websites to add image sliders and galleries.
These image gallery widgets support various major image formats, including PNG, JPG, GIF, WEBP, and AVIF. They do not rely on any website-building or blogging platforms such as WordPress, Shopify, Wix, Webflow, Blogger, or Squarespace. This means you can easily add a photo gallery widget to your website by simply copying and pasting the embed code.
Recommendations when using photo galleries on your website
- Optimize images: You don’t want people to wait minutes on your site to load the photo on the gallery widget? Why? According to statistics, on average, 40% of people wait no more than three seconds for the page to load. Use an image compressor like ShortPixel, TINYPNG, or Squoosh to optimize images without losing quality.
- Size your widget properly: Do you want the photo slider widget to be the full width of the website theme, or should it be minimalistic? Resize or crop images based on your requirements before creating a photo slider for your website.
- Configure photo gallery layout: The photo gallery generators below support many design layouts, including sliders, Masonry, Grids, Columns, Stripes, Thumbnails, and Collages. While the horizontal image slider is probably your preferred layout, don’t hesitate to opt for other image gallery widget layout types like Grid.
- Customize your widget: The photo gallery widget creators below provide many customization options to add slideshow, animations, slide effects, hover effects, and even mobile-specific designs.
- Use it to grow leads and sales: You can set the action on the image click to redirect to a link and use the photo gallery widget to increase leads and sales for your business. Use a link shortener with tracking, like ClickMagick, to monitor link clicks, leads, and conversions.
Best Website Photo Gallery Widgets to Use Today
Elfsight’s Photo Gallery Widget
If you’re searching for a free photo gallery widget that can be used on any website, regardless of the platform, Elfsight is a fantastic option. Elfsight is a well-known service that offers a variety of website widgets. Their catalog features over 90 different widgets, including a Slider, File Viewer, Portfolio, and WhatsApp Chat widget.
Elfsight’s free Photo Gallery widget includes unique premade designs, layout options, image copy protection, auto watermarking, customization options, and custom styles.
Features:
- Unique responsive templates: Elfsight’s Photo Gallery widget creator offers six pre-made designs: Traveler, Product Seller, Photo Shoots, Wedding Photographer, Interior Designer, and Product Photographer. These templates are optimized for both desktop and mobile users, and there are also mobile behavior settings available for further customization.
- Content settings: You can add as many images as you like by uploading them from your computer or by using a URL. Each upload has a limit of 100 MB. Additionally, you can include a title, description, alternative text (commonly referred to as alt text for SEO purposes), and a hyperlink for each image. To arrange images in the photo gallery widget, simply drag and drop each image in the list. Adjust the order value to move an image to the top for it to be displayed more prominently.
- Google Photos on your website: Elfsight integrates with Google Photos, allowing you to sync your photo albums automatically.
- Layout settings: In the Layout settings, you can customize the width of the photo gallery widget, either in pixels or as a percentage. There are seven layout options to choose from: Grid, Vertical Masonry, Horizontal Masonry, Thumbnails, Slider, Columns, and Stripes. Each layout comes with its own set of settings. For instance, the Slider layout includes features such as loop, auto slide, animation, and pagination types. Additionally, you can determine the order of the images; you have two choices: Default (which follows the order you’ve set in the content settings) or Random.
- Image ratio and resize settings: In certain layouts, such as the Grid layout, you can adjust the image settings under the Layout options. You have several preferred image ratio choices, including:
1:1 (Square) – 2:3 (Standard – vertical) – 3:2 (Standard) – 4:3 (Four-thirds) – 3:4 (Vertical Four-thirds) – 9:16 (Vertical Widescreen) – 16:9 (Widescreen)
If you want to limit the number of images displayed in the picture gallery, you can enable the “Load More” button and specify the desired number of columns and rows per page. - Display image information: You can show the title and description of each image on or below the picture.
- Settings: The settings of Elfsight’s Photo gallery widget include three sections:
- Action on Image Click — Three options are:
- Open the whole image on a popup — this will also activate the slider with options to zoom in & out and enlarge tools.)
- Redirect to a Link — For this to work, you must have provided a link under each image.
- Do nothing
- Enable Image Copy Protection
- Watermark — Add your watermark as a text or logo to all the images on the photo gallery widget.
- Action on Image Click — Three options are:
- Customize appearance: You can customize various elements of your design by changing fonts, background types, colors, and image effects for both static and hover states. For image effects, you have several options to choose from, including Zoom In, which magnifies the image; Blur, which softens its focus; Grayscale, which removes color for a classic look; Shrink, which reduces its size; and Color In, which enhances the color vibrancy. Additionally, there are dedicated fields for custom CSS and JavaScript, allowing you to implement your own styles and tracking codes to further enhance the functionality and appearance of your project. This level of customization ensures that your design is not only visually appealing but also tailored to your specific requirements.
How to create a photo gallery for websites using Elfsight.
You can create a free image gallery widget for your website by using the following builder. First, choose a template and click the “Continue with this template” button. Then, upload your images and edit their information. Next, select and customize the layout, adjust the dimensions and settings as needed, and finally, click the “Add to website for free” button.
You can also sign up on the Elfsight website, search for the “Photo Gallery” app from the Catalog, and start customizing it as shown in the video tutorial below.
Embed code
The embed code will be slightly similar to this:
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div class="elfsight-app-0ddcf8e1-98ba-422b-a388-abff6bde59b8" data-elfsight-app-lazy></div>Elfsight’s Photo Gallery widget’s HTML code includes two parts: 1) a JavaScript file and 2) an HTML div element with a unique class name.
Paste the embed code where you want the photo gallery widget displayed on your website. You can edit the template, theme, or HTML source code, but the code must be within the body tag.
On a side note, if your site already has other Elfsight widgets installed, such as Logo Image Slider, you do not need to re-install the JavaScript part (bolded in the above example) on the page. Consult your web developer if you aren’t sure what this means.
Demo
Photo Slider
Photo Gallery (Thumbnails layout)
Pricing
Elfsight’s Photo Gallery Widget is free to use, but it allows for only one widget and a maximum of 200 views per month. To increase the number of views, add more photo gallery widgets, and remove the branding from the widgets, you will need to upgrade to a paid plan, which starts at $6 per month.
Click here to try Elfsight’s Photo Gallery Widget.
Common Ninja’s Image Gallery
Common Ninja is another site similar to Elfsight. It offers 200+ widgets for websites, ranging from displaying information to boosting sales. Its awesome widgets include website audio player, timeline, and online bracket widget. All of Common Ninja’s widgets come with different layouts, color skins, and customization options that are second to none.
Common Ninja has multiple image widgets for websites. They are:
- Image Gallery — Displays images & captions in diverse layouts and girds.
- Image Stack Gallery — This widget showcases a collection of images stacked on each other.
- Image Slider — Displays a series of images in a slideshow format
- Image Carousel — The image carousel widget displays images rotating or sliding.
- Image Accordion — Showcases images in a collapsible format, expanding when clicked to reveal the selected image.
- Image Grid Slider — This widget is made with a grid gallery and carousel slider blend.
The image gallery widget is ideal for embedding a photo gallery on your website. You can add images by uploading from your computer, using a URL, or browsing Unsplash directly from the widget builder.
Features:
- Layouts: There are five available layouts: Justified, Masonry, Grid, Panorama, and Collage.
- Add caption, description, and link: Provide a caption and description to help users understand the content of the image.
- Customize the look and feel: Select a loading animation and customize the grid and overall appearance of the entire widget at the element level. You can adjust colors, fonts, borders, shadows, and backgrounds. Additionally, use custom CSS to apply your styling to the image gallery widget created with Common Ninja.
- Popup mode: The Image Gallery allows users to enlarge images in a popup. When activated, they can zoom in, share, and navigate through pictures.
How to create an image gallery widget using Common Ninja
Visit the Common Ninja website, sign up, and search for “Image Gallery.” Customize it based on the video demonstration provided below.
Pricing
Common Ninja’s Image Gallery widget is free to use. However, the free plan is limited to one project, one widget, and up to 300 monthly page views. It is also limited in some features, like custom CSS. You must upgrade to a paid plan starting from $10 per 5 widgets for more features, widgets, and unlimited views.
Click here to try Common Ninja’s Image Gallery.
Fouita’s Image Gallery Widget
Fouita is an HTML widgets provider with 60+ widgets in its library, such as Tabs, Business Hours, Website Audio Player, Table of Contents, Quizzes, Image Hotspot, Product Image 360°, Panorama 360° Gallery, Slider, and the Image Gallery widget for websites. Fouita offers the best targeting and display conditions among many photo gallery widgets mentioned so far.
Fouita’s Image Gallery widget generator is a visual builder with several templates and customization options.
Features:
- Responsive templates: Fouita’s Image Gallery widget generator has 14 responsive templates to get started. Each template is mobile-friendly and made utilizing different layout options such as Carousel, Grid, and Masonry.
- Four layout options: Carousel, Grids, Masonry, and Scroll layout types let you create an attractive picture gallery for your website. Each layout type has its own settings. For example, you can set the max grids, height, and auto scroll animation (and its direction, as well as the animation speed) on masonry and grid layouts.
- Add images and their details: With Fouita, you can add as many images as you want by uploading from your computer or via a link. Unlike other image gallery widgets, Fouita lets you have a separate image upon hover as well as showcase (or autoplay) a video like a YouTube video upon clicking the image by the user. Furthermore, you can add image captions and descriptions as well as display a button with a specific link.
- Customize image gallery widget: The Settings panel has several sections:
- Header: Once activated, you can edit the header text.
- Width & other functions: Specify the widget’s maximum width and what to do when the user clicks on an image. You can set it to open a popup, link, or do nothing.
- Caption: This section lets you specify if you want to display a caption and where to show it.
- Video: Change the video icon and video label link.
- Popup: Make the popup show on fullscreen.
- Change colors: You can modify the background and colors of the control, overlay, caption, etc. There is a custom CSS panel for custom styling.
- Triggers and display conditions: Under the “Schedule” tab, you can set up how, when, and on which pages the widget should display. You can also specify the days and hours for the image gallery widget to be displayed.
How to make an image gallery widget using Fouita
Sign up on the Fouita website, search for “Image Gallery,” select a template, add your media and their information, customize the widget and its appearance, set display conditions, click the “Save” button at the top right corner, and get the embed code.
Fouita supports several photo gallery widget embed methods: HTML code, JavaScript, iFrame, and a direct link to a full page hosted on Fouita.
Once you have the embed code for the image gallery widget, paste it into your website’s editor where you want to display it. If the HTML code causes issues on your website, try the iframe or JavaScript methods.
Demo
Image Gallery with Video Popup (Click on the image to see the video popup player)
Pricing
Fouita offers flexible pricing options for customers. For example, you can choose how many image galleries you want to manage under Fouita and subscribe to a monthly or annual plan.
Powr’s Photo Gallery Plugin
Powr is an alternative to CommonNinja with 60+ plugins in its library, including the Media Gallery, Instagram Feed, Website Notification Bar, and Facebook Feed aggregator. Powr’s Photo Gallery Plugin comes with a visual editor that provides templates, photo gallery arrangement and editing features, and the ability to accept payments.
Features:
- Templates: There are six templates.
- Add image and content: The free plan is limited to five photos. You can add details such as a title, caption header, and description, as well as display a CTA button underneath the photo. Furthermore, you can add SEO alt text, showcase date, enlarge (double) image size, and provide an image link URL.
- Image Filters: Normal (retains original image filters), Clarendon, Gingham, Inkwell, Juno, Lark, Valencia, Kelvin, and Skyline are available choices. Select one option per image to make it stand out from others or blend with the theme’s aesthetic.
- Image hover effects: Invert, Grow, Shrink, Blur to Sharp, Sharp t Blur, Black to Color, Color to Black, Increase Opacity, and Decrease Opacity are options.
- Gallery styles: Powr’s Photo Gallery Plugin has only three options, Collage, Grid, and List, which is a small number compared to others.
- Image cropping: You can automatically crop images (square, Landscape, Portrait) or use their original dimensions in the photo gallery.
- Customize photo gallery widget: You can add a search box (allow visitors to search for keywords), turn off right-clicking on images (to prevent image theft), add a watermark, and enable the lightbox effect. Furthermore, you can also show CTA buttons and social sharing icons to improve engagement.
How to create a photo gallery for your website using Powr
Sign up on the Powr website, search for the “Photo Gallery” plugin on your dashboard, add images, customize the widget, click on the “Publish” button, and get the HTML embed code as shown in the video below:
Please copy and paste the HTML code of the Photo Gallery widget on your website where you want to showcase it. There is no need to re-add the JavaScript part if other Powr widgets are currently being used on the page.
Demo
Pricing
Powr’s Photo Gallery is free to use, but it has certain limitations, such as 5 images, no access to certain hover effects, and Google Tag Manager integration. Paid plans start from $5.49/mo.
Click here to try Powr’s Photo Gallery Plugin.
Widgio’s Photo Gallery Plugin
Widgio is an alternative to Powr and has 60+ plugins in its library. However, when compared with other solutions, Widgio’s editing options are not impressive. For example, you cannot have custom display options and styles.
Widgio’s Photo Gallery plugin for websites has templates, layout options, and customization options.
Features:
- Templates: There are eight premade designs varying from grids to sliders.
- Layouts: Layouts are available: grid, Vertical & Horizontal Masonry, Thumbnails, Slider, Columns, and Stripes. You can set the image ratio, columns & rows, and space between images.
- Action on the image click: Three options are Nothing, Redirect to an image link, and Open image in a popup.
- Customize appearance: Change background, fonts, colors, padding, size, and image effects on default and hover. Color in, Greyscale, Shrink, and Blur are the available image effects.
Pricing
Widgio’s Photo Gallery plugin is free to use with a limit of 2,000 views per month.
Click here to try Widgio’s Photo Gallery plugin.
CodePen
CodePen is a platform where users can share their projects publicly, referred to as “Pens.” Others can edit and utilize these Pens in their own work.
If you are searching for free photo gallery widgets that include HTML, CSS, and JavaScript codes, CodePen is the ideal place to start. There are hundreds of picture gallery widgets available with a variety of effects and layouts. These creative galleries can be customized directly on the CodePen platform and easily integrated into your website.
Here are a few photo gallery widgets with codes:
Click on the “Run Pen” button to see the live preview on this page.
Simple photo gallery
See the Pen simple photo gallery — week 19/52 by Mert Cukuren (@knyttneve) on CodePen.
Responsive Image Carousel ( Animation )
See the Pen Responsive Image Carousel ( Animation ) by noirsociety (@noirsociety) on CodePen.
Responsive Vertical Scrolling Parallax Gallery
See the Pen Responsive Vertical Scrolling Parallax Gallery ( Lerp ) by noirsociety (@noirsociety) on CodePen.
Character Showcase Gallery
See the Pen Character Showcase Gallery by Ethan (@pleasedonotdisturb) on CodePen.
Responsive Photo Gallery Grid with Lightbox and
This photo gallery widget uses no JavaScript and is perfect for lightweight web pages.
See the Pen Responsive Photo Gallery Grid with Lightbox and – No Script by Majed (@alchatti) on CodePen.
Gallery that reveals pictures upon scrolling
See the Pen Scroll to view gallery – ScrollTrigger by GSAP (@GreenSock) on CodePen.
Reflective Photo Gallery Wall
See the Pen Reflective Photo Gallery Wall (experiment) by Shawn Reisner (@sreisner) on CodePen.
Photo Screensaver
See the Pen Doggie Screensaver by Ryan Mulligan (@hexagoncircle) on CodePen.
Photo Wall – CSS+GSAP
See the Pen Photo Wall – CSS+GSAP by Animated Creativity (@animatedcreativity) on CodePen.
lightGallery
lightGallery is a JavaScript gallery designed for both web and mobile platforms, and it is compatible with React.js, Vue.js, Angular, and TypeScript. This customizable and modular lightbox gallery plugin is fully responsive and does not require any dependencies. It allows you to mix various types of content, including images, videos, and iframes, within the same gallery.
Features:
- Inline and Lightbox galleries: Create both inline and lightbox galleries with one library.
- 20+ Animations: lightGallery supports 20+ Hardware-Accelerated CSS3 transitions to make your image gallery widget look stunning.
- Image gallery options: LightGallery supports features like autoplay slides that play or pause based on users’ actions, HTML5 fullScreen mode, and other typical gallery features.
Demo
You can find demos and instructions on website and some from CodePen.
See the Pen lightGallery demo with justifiedGallery by Sachin choolur (@sachinchoolur) on CodePen.
View on GitHub for more details.
Final words on best website Photo Gallery widgets
You can use YouTube gallery widgets to showcase YouTube playlists, videos, and shorts in various ways; similarly, photo gallery widgets can present images in impressive ways to grab users’ attention and improve user experience.
This article introduced several responsive photo gallery widgets that can be used on any platform, even static HTML web pages.
So, which one is the best for you?
It depends on a few things.
Do you want to add a photo gallery to your landing page without using a third-party service? Then consider finding one from CodePen (or hiring a developer!).
However, suppose you do not want to worry about coding, hosting, and fixing bugs and compatibility issues. In that case, I recommend a service like Elfsight and Common Ninja, as you get 24*7 free customer support, updates like templates and new features for free. You can also manage photo galleries easily under one dashboard, even for your and clients’ websites.
Also, if you are looking for a dedicated solution for WordPress, there are photo gallery plugins on the WordPress repository, such as Photo Gallery by 10Web.