In our previous guide on before and after sliders, we shared how you can demonstrate the before and after situations through images. Even though those are perfect for presenting drastic changes in image comparisons, they aren’t ideal for showcasing 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 major image formats, including PNG, JPG, WEBP, and GIF. And do not depend on any website building or blogging platform such as WordPress, Shopify, Wix, Webflow, Blogger, and Squarespace, for that matter. That means you can add a photo gallery widget to a 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? Because, according to statistics, on average, 40% of people wait no more than three seconds for the page to load. Use an image compressor such as 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 — Many photo gallery generators below support many design layouts. Sliders, Masonry, Grids, Columns, Stripes, Thumbnails, and Collages are a few. 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 to 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 are looking for a free photo gallery widget to use on all your websites, irrespective of the platform, Elfsight would be an excellent choice. Elfsight is a popular service that provides various widgets for websites. Its catalog consists of 85+ widgets for websites, such as Slider, File Viewer, Portfolio, and a Popup widget creator.
Elfsight’s free Photo Gallery widget includes unique premade designs, layout options, image copy protection, auto watermarking, and customization options, including custom styles.
Features:
- Unique responsive templates — Elfsight’s Photo Gallery widget creator has six pre-made designs. Traveler, Product Seller, Photo Shoots, Wedding Photographer, Interior Designer, and Product Photographer are those. The templates are optimized for both desktop and mobile users, and there are even mobile behavior settings for further customization.
- Content settings — You can add as many images as you want by uploading from your computer or via URL. The upload limit is set to 100 MB per upload. Also, you can add a title, description, alternative text (also known as alt text in SEO), as well as set a hyperlink. When you need to set the order of images in the photo gallery widget, you can do so by dragging and dropping each image item on the list. Set its order value to the top to make an image appear prominently.
- Layout settings — Under Layout settings, you can set the photo gallery widget’s width (in pixel or percentage-wise). Additionally, there are seven layout options you can opt for. They are the Grid, Vertical Masonry, Horizontal Masonry, Thumbnails, Slider, Columns, and Stripes. Each layout has its settings, too. For example, the slider layout has a loop, auto slide, animation, and pagination types. Furthermore, you can set the image order as well. Two options are Default (i.e., the order you have set under content settings) and Random.
- Image ratio and resize settings — On some layouts, like Grid, under the Layout settings, you can choose a preferred image ratio and resize options. Ratio options are 1:1 (Square), 2:3 (Standard – vertical), 3:2 (Standard), 4:3 (Four-three), 3:4 (Four-three vertical), 9:16 (Widescreen – vertical), 16:9 (Widescreen). if you want to limit the number of images appearing on the picture gallery, you can do so by enabling the load more button and specifying columns & rows per page.
- Display image information — You can show the title and description of each image on or below the image.
- 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 — Change fonts, background type, colors, and image effects on default and hover. The available image effects are Zoom In, Blur, Grayscale, Shrink, and Color In. Furthermore, custom CSS and JavaScript fields are also available to add your styles and tracking codes.
How to create a photo gallery for websites using Elfsight.
You can create a free image gallery widget for your website using the following builder. Choose a template, click on the “Continue with this template” button, upload your images, edit their information, choose and edit the layout, adjust dimensions and settings, and click on the “Add to website” button.
Or you can 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" data-use-service-core defer></script>
<div class="elfsight-app-e7e32o60-2e98-4I9f-9e76-6eIc68bc9877" data-elfsight-app-lazy></div>Elfsight’s Photo Gallery widget’s HTML code includes two parts. 1) JavaScript file 2) HTML div element with unique class name.
Copy and paste the embed code where you want to display the created photo gallery widget on your website by editing the template, theme, or HTML source code. 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, there is no requirement 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 with a limit of one widget and up to 200 views per month. For more increased views, photo gallery widgets, and to remove the brand info from widgets, you must upgrade to a paid plan starting at $6 per month.
Click here to try Elfsight’s Photo Gallery Widget.
CommonNinja’s Image Gallery
CommonNinja is another site similar to Elfsight, with 150+ widgets for websites, ranging from displaying information to boosting sales. Its awesome widgets include website audio player, timeline, and image carousel. All of CommonNinja’s widgets come with different layouts, color skins, and customization options that are second to none.
CommonNinja 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 top of each other.
- Image Slider — Displays a series of images in a slideshow format
- Image Carousel — The image carousel widget displays images in a rotating or sliding manner.
- 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 perfect for embedding a photo gallery on your website. You can add images by uploading from your computer, using a URL, or browsing through Unsplash directly from the widget builder.
Features:
- Layouts — There are five different layouts available: Justified, Masonry, Grid, Panorama, and Collage.
- Add caption, description, and link — Have a caption and description to help users understand what the image is about.
- Customize the look and feel — Choose a loading animation and customize the grid and the appearance of the entire widget on the element level by changing colors, fonts, borders, shadows, and backgrounds. Use the custom CSS to add your styling to the image gallery widget building on CommonNinja.
- Popup mode — The Image Gallery enables enlarging images by opening them in a popup. When activated, users can enlarge, share, and slide through pictures.
How to create an image gallery widget using CommonNinja
Sign up on the CommonNinja website, search for “Image Gallery,” and customize it as shown in the video below:
Demo
Pricing
CommonNinja’s Image Gallery widget is free to use. However, the free plan is limited to one project, one widget, and up to 300 page views per month. 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 CommonNinja’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, 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 9 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 let you create an attractive picture gallery for your website. Each layout type has its own settings. For example, you can set 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 maximum width for the widget 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 shown in fullscreen.
- Change colors — Modify the background and colors of control, overlay, caption, etc. There is a custom CSS panel for custom styling.
- Triggers and display conditions — 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 under the “Schedule” tab.
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 as well as 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 some issues on your website, try the iframe or JavaScript methods.
Demo
Pricing
Fouita has flexible pricing options for customers. For example, you can choose how many image galleries you want to manage under Fouita and subscribe via monthly or an annual plan.
Powr’s Photo Gallery Plugin
Powr is an alternative to CommonNinja with 60+ plugins in its library, such as 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 & 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 — Collage and Grid are the only available options in Powr’s Photo Gallery Plugin, which is a smaller number compared to others.
- Image cropping — Automatically crop images (square, Landscape, Portrait) or use 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. 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 with 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 people share their projects publicly. These projects are known as “Pens” on CodePen, and people can edit and use them in their work.
If you are looking for free photo gallery widgets with HTML, CSS, and JavaScirpt codes, CodePen is the best place to look first. There are hundreds of picture gallery widgets with various effects and layouts. These creative galleries can be customized on the CodePen platform and used on 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 for web and mobile, available for React.js, Vue.js, Angular, and TypeScript. This is a customizable, modular, responsive, lightbox gallery plugin with no dependencies and with the ability to mix all types of supported content like images, videos, and iframes in 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 be used to present images in impressive ways to take users’ attention and improve user experience.
In this article, you discovered 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 any third-party service? Then, consider finding one from CodePen (or hire 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 CommonNinja, 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, there are photo gallery plugins on the WordPress repository, such as Photo Gallery by 10Web, if you are looking for a dedicated solution for WordPress.