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 il­lus­trate 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 in­teg­rat­ing images into a website, allowing users to see several images clearly at once. There are several diverse methods of gen­er­at­ing slide shows such as these, including embedding a simple Lightbox gallery in your website with a source code and im­ple­ment­ing the photo gallery via HTML. Another, even simpler method involves using a popular content man­age­ment 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 pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

Embedding a Lightbox image gallery

Creating a Lightbox gallery is one of the simplest ways of present­ing images on a website. Light­boxes are pro­grammed in Javas­cript 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 back­ground. 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 thumb­nails), 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 stan­dalone scripts and plugins for JavaS­cript libraries and ex­ten­sions for content man­age­ment 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 JavaS­cript files

Users then copy the file lightbox.css from the CSS folder into the website’s CSS directory and the .js file into the JavaS­cript 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 in­form­a­tion. 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 in­cor­por­ate a caption, use the data-title attribute with the cor­res­pond­ing 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 pos­sib­il­it­ies to customise the slide show or Lightbox display. You can do this by selecting the ‘option methods’ and entering the re­spect­ive 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 De­scrip­tion
al­waysShowNavOn­Touch­Devices false Replacing the standard with true makes nav­ig­a­tion arrows per­man­ently visible on devices with touch display. These usually only appear when users scroll with a mouse.
dis­ableScrolling false Changing this to true means that scrolling on the page isn’t possible when the Lightbox is open.
fadeD­ur­a­tion 500 Here, users can determine how long the overlay takes to fade in and out. (Time in mil­li­seconds).
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).
po­s­i­tion­fromTop 50 Here you can determine the distance between the images and the upper border of the screen (value in pixels).
res­izeD­ur­a­tion 700 With this value, you can determine the time it takes for the container to trans­ition between two different images of different sizes (Time in mil­li­seconds).
show­Im­ageNum­ber­La­bel true Changing this to false will hide the total number of images in the slide show (i.e. image 3 von 33).
wrap­Around false By changing this option to true, the slide show goes back to the beginning after the last image.

Al­tern­at­ively, there’s a range of other programs for embedding unique photo galleries into your website. These tools are generally very simple and function in­tu­it­ively, and most offer a drag and drop editor.

Image gallery ex­ten­sions for content man­age­ment systems

When building a website, the use of a content man­age­ment system is a popular choice for busi­nesses and in­di­vidu­als alike. A CMS has the advantage of offering a pre-built framework, which enables users to create a pro­fes­sion­al 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 re­quire­ments. This is made possible thanks to the large community that’s often behind creating such open source systems and their ex­ten­sions and plugins. This community is also re­spons­ible for the creation of many ex­ten­sions 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. Ori­gin­ally designed as a blog system, WordPress now has a wide range of options for cus­tom­ising and creating ex­ten­sions for a full content man­age­ment system, which can also be used in other areas. Despite these huge advances, the platform is still used for all kinds of blogging projects. Par­tic­u­larly in the worlds of fashion, lifestyle, and beauty, the aesthetic and design of a website is of the utmost im­port­ance. It’s little wonder, then, that of the 18,000 ex­ten­sions 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 in­teg­rated Lightbox option, all in re­spons­ive 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 para­met­ers, such as size, number, and interval, and wa­ter­marks can be added at the click of a button. In par­tic­u­lar, NextGen’s selling points are its usability and a clearly struc­tured 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 de­velopers’ website. These offer ad­di­tion­al features for pro­fes­sion­al use, with the latter offering some in­ter­est­ing functions par­tic­u­larly for e-commerce purposes.

Envira Gallery

With the plugin, Envira Gallery (Lite), users can build image galleries for their websites, including in­di­vidu­al galleries for single posts and pages, as well as global galleries. The re­spons­ive design is created by Envira Out of the Box and im­ple­ments galleries as well as light­boxes. What makes Envira special is the fact that the program loads the image content asyn­chron­ously, so you don’t have to make any com­prom­ises when it comes to loading time and per­form­ance – even with large image formats. Envira thus also boasts ad­vant­ages from an SEO per­spect­ive, 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 ad­di­tion­al 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 char­ac­ter­ist­ic 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 tem­plat­ing system, which enables users to create unique layouts with ease. The plugin has direct access to the WP media library, making in­teg­rat­ing 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 wide­spread pop­ular­ity; thanks to its ever-growing user base, the program is now in the top three most used content man­age­ment systems in the world. Joomla! users can expect a huge community as well as a big pool of ex­ten­sions and plugins.

sigplus

Simple Image Gallery Plus – or sigplus for short – es­sen­tially does exactly what it says on the tin: supports users in building a simple image gallery. The stream­lined slideshow plugin is purpose built and is par­tic­u­larly suitable for small homepages and galleries with a man­age­able number of images. In­ex­per­i­enced users benefit from the simple and intuitive operation. In advanced mode, ex­per­i­enced users can make use of the more extensive settings for thumb­nails, caching, and much more. The plugin is free and can be down­loaded from the Joomla! Ex­ten­sions 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, spe­cific­ally. While the program is more extensive than its com­pet­it­or, sigplus, it’s not as intuitive in its operation. Beginners in par­tic­u­lar 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 wa­ter­marks and download options. The free extension can be found on Joomla!’s official website, while the developer’s website provides extensive doc­u­ment­a­tion and ad­di­tion­al modules and plugins for Phoca Gallery.

SIGE - Simple Image Gallery Extended

The plugin, SIGE (Simple Image Gallery Extended), provides yet another option for in­teg­rat­ing image galleries into a Joomla! website. This gallery plugin is con­stantly 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 per­form­ance. Ad­di­tion­al features (i.e. parameter call, wa­ter­marks, list display, in­tel­li­gent sorting on the server) form just a small part of a seemingly endless index of ex­ten­sions, 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 ex­tend­ible, which proves useful for small and medium-sized websites as well as large en­ter­prises. Ac­cord­ingly, TYPO3 has a huge community, boasting an im­press­ive track record for producing updates and ex­ten­sions 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 busi­nesses 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 pro­fes­sion­al solutions in many areas, including image galleries.

Yet Another Gallery

The extension Yet Another Gallery – YAG for short – is one of the most popular ex­ten­sions for in­teg­rat­ing galleries into TYPO3. The biggest advantage of this extension is that it is con­tinu­ally being updated and thus complies with current standards. Thanks to their extensive con­fig­ur­a­tion options, YAG ex­ten­sions allow a great deal of flex­ib­il­ity, making the program equally suitable for small, private projects as well as larger corporate websites. Much like the CMS itself, image galleries are also in­di­vidu­ally ex­tend­able 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 Re­pos­it­ory. The extension is free to download from the official TYPO3 website, where you can also find detailed in­form­a­tion and tutorials on in­stalling 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 ex­ten­sions. 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. Ad­di­tion­al features include a slideshow, an ad­justable present­a­tion mode and a download option for visitors. Users can also customise the Lightbox’s ap­pear­ance with ease. You can download Perfect Lightbox here.

Go to Main Menu