---
myst:
html_meta:
"description": ""
"property=og:description": ""
"property=og:title": ""
"keywords": ""
---
# Exercise 3: Gallery Integration With Theme
```{warning}
This exercise requires a working buildout using a fork of the `collective.jstraining` package.
```
In this exercise, we will be walking through how to include custom JavaScript into your theme.
This example essentially re-uses the Barceloneta theme.
It is more important to pay attention to how the integration with the theme works, than worrying about diazo/theming details for this exercise.
You will be working in the `exercise3` directory of the `collective.jstraining` package.
## Add Your JavaScript File
The lightGallery distribution files are already included in the `collective.jstraining` package you are working with.
In your `exercise3/theme` directory, add a file named `integration.js`.
We will use this file to integrate with Plone's album view:
```javascript
require([
'jquery',
'++theme++exercise3/lightgallery/js/lightgallery.min'
], function($){
$(document).ready(function() {
var $photos = $('.photoAlbumEntry a');
if($photos.size() > 0){
// we're on an album view page
// we need to adjust links so the work nicely with light gallery
$photos.each(function(){
var $a = $(this);
$a.attr('href', $a.attr('href').replace('/view', ''));
});
$("#content-core").lightGallery({
selector: '.photoAlbumEntry a'
});
}
});
});
```
Let us talk about each part of this file in detail...
Require the lightGallery JavaScript
```javascript
(
...
require([
'jquery',
'++theme++exercise3/lightgallery/js/lightgallery.min'
], function($){
...
})
```
This tells [RequirejS](https://requirejs.org/) to load the [jQuery](https://jquery.com/) and the lightGallery JavaScript.
What is important to pay attention to in this example is that we are seeing if there are any `photoAlbumEntry` elements on the page.
If there are any, we modify the DOM structure slightly to work seemlessly with lightGallery>
```javascript
(
...
var $photos = $('.photoAlbumEntry a');
if($photos.size() > 0){
// we're on an album view page
// we need to adjust links so the work nicely with light gallery
$photos.each(function(){
var $a = $(this);
$a.attr('href', $a.attr('href').replace('/view', ''));
});
...
)
```
We call the lightGallery initialization with our configuration
```javascript
...
$("#content-core").lightGallery({
selector: '.photoAlbumEntry a'
});
...
```
## Including JavaScript/CSS Into Your Theme
For JavaScript and CSS, you can include resources with convenience theme configuration settings of `development-css`, `production-css`, `development-js` and `production-js`.
Since we are reusing the existing Barceloneta theme with this example though, we will include the JavaScript/CSS into the theme `index.html` file.
### CSS
At the bottom of the head section in the `index.html` file, add the following:
```html
```
### JavaScript
At the bottom of the `index.html` file, before the `` closing tag, add the following:
```html