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 visualize the details of a product.

Galleries are a popular way of in­te­grat­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.

$1 Domain Names – Grab your favorite one
  • Simple reg­is­tra­tion
  • Premium TLDs at great prices
  • 24/7 personal con­sul­tant included
  • Free privacy pro­tec­tion for eligible domains

Embedding a Lightbox image gallery

Creating a Lightbox gallery is one of the simplest ways of pre­sent­ing images on a website. Light­box­es are pro­grammed 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 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 stand­alone scripts and plugins for JavaScript libraries and ex­ten­sions for content man­age­ment systems.

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 in­for­ma­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­po­rate a caption, use the data-title attribute with the cor­re­spond­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­si­bil­i­ties to customize the slide show or Lightbox display. You can do this by selecting the ‘option methods’ and entering the re­spec­tive 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­waysShow­NavOn­TouchDe­vices false Replacing the standard with true makes nav­i­ga­tion arrows per­ma­nent­ly visible on devices with touch display. These usually only appear when users scroll with a mouse.
dis­able­Scrolling false Changing this to true means that scrolling on the page isn’t possible when the Lightbox is open.
fad­e­Du­ra­tion 500 Here, users can determine how long the overlay takes to fade in and out. (Time in mil­lisec­onds).
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­si­tion­from­Top 50 Here you can determine the distance between the images and the upper border of the screen (value in pixels).
re­size­Du­ra­tion 700 With this value, you can determine the time it takes for the container to tran­si­tion between two different images of different sizes (Time in mil­lisec­onds).
show­Im­a­geNum­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.

Get found with your own domain. Build trust with your own email address. Reach visitors with your own website.

Buy a domainBuy a domain
Get custom emailGet custom email
Create a websiteCreate a website

Al­ter­na­tive­ly, 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­itive­ly, 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­ness­es and in­di­vid­u­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­spon­si­ble 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. Orig­i­nal­ly designed as a blog system, WordPress now has a wide range of options for cus­tomiz­ing 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­lar­ly in the worlds of fashion, lifestyle, and beauty, the aesthetic and design of a website is of the utmost im­por­tance. 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­te­grat­ed Lightbox option, all in re­spon­sive 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 pa­ra­me­ters, 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­vel­op­ers’ 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­lar­ly for e-commerce purposes.

Envira Gallery

With the plugin, Envira Gallery (Lite), users can build image galleries for their websites, including in­di­vid­ual galleries for single posts and pages, as well as global galleries. The re­spon­sive design is created by Envira Out of the Box and im­ple­ments galleries as well as light­box­es. What makes Envira special is the fact that the program loads the image content asyn­chro­nous­ly, so you don’t have to make any com­pro­mis­es when it comes to loading time and per­for­mance – even with large image formats. Envira thus also boasts ad­van­tages from an SEO per­spec­tive, 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­is­tic 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­te­grat­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 customize 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­u­lar­i­ty; 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­tial­ly 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­lar­ly suitable for small homepages and galleries with a man­age­able number of images. In­ex­pe­ri­enced users benefit from the simple and intuitive operation. In advanced mode, ex­pe­ri­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, specif­i­cal­ly. While the program is more extensive than its com­peti­tor, 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­men­ta­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­te­grat­ing image galleries into a Joomla! website. This gallery plugin is con­stant­ly 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­for­mance. 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­tendible, which proves useful for small and medium-sized websites as well as large en­ter­pris­es. Ac­cord­ing­ly, TYPO3 has a huge community, boasting an im­pres­sive 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­ness­es 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­te­grat­ing galleries into TYPO3. The biggest advantage of this extension is that it is con­tin­u­al­ly being updated and thus complies with current standards. Thanks to their extensive con­fig­u­ra­tion options, YAG ex­ten­sions allow a great deal of flex­i­bil­i­ty, 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­vid­u­al­ly 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 Repos­i­to­ry. The extension is free to download from the official TYPO3 website, where you can also find detailed in­for­ma­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 pre­sen­ta­tion mode and a download option for visitors. Users can also customize the Lightbox’s ap­pear­ance with ease. You can download Perfect Lightbox here.

Go to Main Menu