How to create a photo gallery

Visual design is often essential for the success of a web presence, and is equally important for both blogs and web stores. While it’s vital for website operators to observe the oft-repeated mantra, ‘Content is king’, and place a strong emphasis on creating effective content, the website’s visual aspect should never be neglected. Large blocks of text can often scare visitors off before they even read the content. Graphics and images are therefore hugely important elements of any website, whether they’re used to illustrate a text, to create a personal or emotional bond with the user, or to visualise the details of a product.

Galleries are a popular way of integrating images into a website, allowing users to see several images clearly at once. There are several diverse methods of generating slide shows such as these, including embedding a simple Lightbox gallery in your website with a source code and implementing the photo gallery via HTML. Another, even simpler method involves using a popular content management system. To do this with a system like TYPO3 or WordPress, users just need to find the right extension and integrate it into the basic framework.

Cheap domain names – buy yours now
  • Free website protection with SSL Wildcard included
  • Free private registration for greater privacy
  • Free 2 GB email account

Embedding a Lightbox image gallery

Creating a Lightbox gallery is one of the simplest ways of presenting images on a website. Lightboxes are programmed in Javascript as dynamic HTML. When a user clicks on the preview image, that picture opens up in a larger format as the website fades in the background. This kind of Lightbox can be embedded easily into a website and extended with further functions. To create a gallery, users require a current version of Lightbox, and of course, all the images (including thumbnails), that are to be embedded on the site.

The first version of Lightbox was developed by Lokesh Dhakar in 2005 and the script became available under a Creative Commons License a short while later. Since then, the popular script has released several new versions and updates, including both standalone scripts and plugins for JavaScript libraries and extensions for content management systems.

PreviewNotAvailable.svg To display this video, third-party cookies are required. You can access and change your cookie settings here.

1. Lightbox download

The most popular Lightbox script is available to download free from Lokesh Dhakar’s website. After unpacking the .zip file, users will find the following elements: a index.html file and three files named css, images, and js.

2. Embedding CSS and JavaScript files

Users then copy the file lightbox.css from the CSS folder into the website’s CSS directory and the .js file into the JavaScript directory. Users then have to insert the following code into the head of their website:

<link href="your-css-directory/lightbox.css" rel="stylesheet">

The following line of code should be inserted in the last line before the final </body> tag.

<script src="your-js-directory/lightbox.js"></script>

Warning: Lightbox requires jQuery. If it’s not already embedded and loaded, users should do this before working with the Lightbox script.

3. Lightbox attribute for embedding a photo gallery with HTML

Each picture that’s to be included in the Lightbox gallery needs to have its own attribute in the source code in order for the script to convey the required information. Every link to the image must have the attribute data-lightbox and a custom name for each gallery. Images that are to feature in the same slide show all require the data-lightbox attribute. To incorporate a caption, use the data-title attribute with the corresponding text.

Example of a single image: 
<a href="images/image-1.jpg" data-lightbox="image-1" data-title="caption">
    <img src="images/image-1-preview.jpg" alt="alternative explanation">
</a>
Example of a slide show with several images: 
<a href="images/image-2.jpg" data-lightbox="show-1" data-title="morning"><img src="images/image-2-preview.jpg" alt="alternative explanation"></a>
<a href="images/image-3.jpg" data-lightbox="show-1" data-title="midday"><img src="images/image-3-preview.jpg" alt="alternative explanation"></a>
<a href="images/image-4.jpg" data-lightbox="show-1" data-title="evening"><img src="images/image-4-preview.jpg" alt="alternative explanation"></a>

The Lightbox is now embedded in the website. Of course, there are further possibilities to customise the slide show or Lightbox display. You can do this by selecting the ‘option methods’ and entering the respective values after loading the script.

Example: 
<script src="your-js-directory/lightbox.js"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });
</script>
The most important options at a glance:
Option Standard Description
alwaysShowNavOnTouchDevices false Replacing the standard with true makes navigation arrows permanently visible on devices with touch display. These usually only appear when users scroll with a mouse.
disableScrolling false Changing this to true means that scrolling on the page isn’t possible when the Lightbox is open.
fadeDuration 500 Here, users can determine how long the overlay takes to fade in and out. (Time in milliseconds).
maxWidth   Enter a value here to determine the maximum image width (value in pixels).
maxHeight   Enter a value here to determine the maximum image height (value in pixels).
positionfromTop 50 Here you can determine the distance between the images and the upper border of the screen (value in pixels).
resizeDuration 700 With this value, you can determine the time it takes for the container to transition between two different images of different sizes (Time in milliseconds).
showImageNumberLabel true Changing this to false will hide the total number of images in the slide show (i.e. image 3 von 33).
wrapAround false By changing this option to true, the slide show goes back to the beginning after the last image.

Alternatively, there’s a range of other programs for embedding unique photo galleries into your website. These tools are generally very simple and function intuitively, and most offer a drag and drop editor.

Image gallery extensions for content management systems

When building a website, the use of a content management system is a popular choice for businesses and individuals alike. A CMS has the advantage of offering a pre-built framework, which enables users to create a professional website on most systems, without any prior IT knowledge. 

As well as the intuitive operation and the user-friendly interface, many users also value the flexible structure of systems such as Joomla! and Typo3. The often modular structure allows the framework to be extended and adjusted to personal requirements. This is made possible thanks to the large community that’s often behind creating such open source systems and their extensions and plugins. This community is also responsible for the creation of many extensions that allow you to build and embed photo galleries. We present you with solutions for the popular CMSs, Joomla!, WordPress and TYPO3.

Image galleries for WordPress

WordPress is the most widely used open source CMS in the world. Originally designed as a blog system, WordPress now has a wide range of options for customising and creating extensions for a full content management system, which can also be used in other areas. Despite these huge advances, the platform is still used for all kinds of blogging projects. Particularly in the worlds of fashion, lifestyle, and beauty, the aesthetic and design of a website is of the utmost importance. It’s little wonder, then, that of the 18,000 extensions that WordPress boasts, more than a few of them are for building image galleries.

NextGen Gallery

NextGen Gallery is one of the best-known plugins for WordPress. With NextGen, it’s not only possible to create thumbnail galleries, but also slideshows. There’s also an integrated Lightbox option, all in responsive design. The plugin offers a range of options for large galleries and its clear structure and simple operation enables users to upload and manage a large amount of images. The user can choose most important parameters, such as size, number, and interval, and watermarks can be added at the click of a button. In particular, NextGen’s selling points are its usability and a clearly structured user interface. The free version of NextGen Gallery is available to download from the WordPress plugin directory. You can also buy plus and pro versions of the software from the developers’ website. These offer additional features for professional use, with the latter offering some interesting functions particularly for e-commerce purposes.

Envira Gallery

With the plugin, Envira Gallery (Lite), users can build image galleries for their websites, including individual galleries for single posts and pages, as well as global galleries. The responsive design is created by Envira Out of the Box and implements galleries as well as lightboxes. What makes Envira special is the fact that the program loads the image content asynchronously, so you don’t have to make any compromises when it comes to loading time and performance – even with large image formats. Envira thus also boasts advantages from an SEO perspective, since the loading time is an important ranking factor for many major search engines. The free version of Envira Gallery Lite is available to download from the WordPress plugin directory. Extended packages, which are fee-based, offer additional sharing and social media options as well as SEO features and e-commerce functions. Find out more on the official Envira Gallery website.

Polaroid Gallery

The final WordPress gallery plugin on our list is the Polaroid Gallery. As the name suggests, users can expect their images to be displayed in the style of Polaroid photos, with their characteristic white border. This makes Polaroid Gallery a great choice for lovers of retro style, who can easily implement the plugin in order to give their website design a vintage feel. Polaroid Gallery works based on CSS3 and jQuery and is based on a templating system, which enables users to create unique layouts with ease. The plugin has direct access to the WP media library, making integrating images that are already uploaded. Polaroid is a fast and simple gallery solution with every basic function and a simple design that users can customise with ease. The plugin is available to download for free from the WordPress plugin directory.

Image galleries for Joomla!

Joomla! also enjoys widespread popularity; thanks to its ever-growing user base, the program is now in the top three most used content management systems in the world. Joomla! users can expect a huge community as well as a big pool of extensions and plugins.

sigplus

Simple Image Gallery Plus – or sigplus for short – essentially does exactly what it says on the tin: supports users in building a simple image gallery. The streamlined slideshow plugin is purpose built and is particularly suitable for small homepages and galleries with a manageable number of images. Inexperienced users benefit from the simple and intuitive operation. In advanced mode, experienced users can make use of the more extensive settings for thumbnails, caching, and much more. The plugin is free and can be downloaded from the Joomla! Extensions Directory.

Phoca Gallery

Phoca Gallery is another free program, although this offers a far greater range of functions than sigplus. Phoca allows you do create photo galleries for Joomla! websites, specifically. While the program is more extensive than its competitor, sigplus, it’s not as intuitive in its operation. Beginners in particular need some time to get familiar with the full range of functions and how they operate. Once you’ve got your foot in the door, however, the program boasts many practical features in addition to the regular basic functions, including watermarks and download options. The free extension can be found on Joomla!’s official website, while the developer’s website provides extensive documentation and additional modules and plugins for Phoca Gallery.

SIGE - Simple Image Gallery Extended

The plugin, SIGE (Simple Image Gallery Extended), provides yet another option for integrating image galleries into a Joomla! website. This gallery plugin is constantly being updated and improved by the large Joomla! community. Among its range of functions is the so-called turbo mode, which enables users to upload large images and image galleries without the long loading times and negative impact on the website’s performance. Additional features (i.e. parameter call, watermarks, list display, intelligent sorting on the server) form just a small part of a seemingly endless index of extensions, as you can see here. Users can download the plug from the Joomla! website.

Galleries for TYPO3

TYPO3 is the final popular CMS to join WordPress and Joomla! in the top 3. The CMS software is highly extendible, which proves useful for small and medium-sized websites as well as large enterprises. Accordingly, TYPO3 has a huge community, boasting an impressive track record for producing updates and extensions for its plugins that far exceeds any other CMS. However, TYPO3 is not a simple solution, if you are looking to implement a website without any prior knowledge. Despite this, many businesses decide to invest time and money into hiring qualified staff to work with this CMS in order to reap the many benefits it can offer. TYPO3 offers professional solutions in many areas, including image galleries.

Yet Another Gallery

The extension Yet Another Gallery – YAG for short – is one of the most popular extensions for integrating galleries into TYPO3. The biggest advantage of this extension is that it is continually being updated and thus complies with current standards. Thanks to their extensive configuration options, YAG extensions allow a great deal of flexibility, making the program equally suitable for small, private projects as well as larger corporate websites. Much like the CMS itself, image galleries are also individually extendable and can be adjusted precisely for each project. Users can determine their own design or choose from a wide selection of prebuilt themes, which are available from the Extension Repository. The extension is free to download from the official TYPO3 website, where you can also find detailed information and tutorials on installing and managing galleries.

Perfect Lightbox

Perfect Lightbox isn’t strictly speaking an extension for creating a photo gallery, however, the extension does display a page’s content elements in a Lightbox, rather than open a pop up window like regular gallery extensions. Perfect Lightbox is unique in that it gives users the option to display every element in the page in one shared gallery view, rather than just single elements. Additional features include a slideshow, an adjustable presentation mode and a download option for visitors. Users can also customise the Lightbox’s appearance with ease. You can download Perfect Lightbox here.

Was this article helpful?