Click on an image, and you will see an enlarged version of it. With this gallery it is easy to navigate from one enlarged image to the next. Creating it is easy, and if more or less images are needed, containers with the class name .picture-container can be duplicated or deleted until you have the number you want.
Adding or changing an image involves the Element pane in Site Designer, where you not only locate and select the image you want and insert it under 'Picture', but you also have to link to it under 'Href' and give it a title at the 'Attributes' where you see the 'Data Title'. All this is necessary to have the correct image showing up when one of the thumbnails is being clicked on.
Please also be aware that this component includes external files (CSS and JS). Therefore it is best not to change any names of classes or on folders.
You may be curious about the hidden HTML element called .may-be-deleted. It is there purely to cause Site Designer to place all the necessary files where they are needed in the Project Resources. Once the component has been saved and put to use, you may choose to delete that hidden element.
Lightbox Image Gallery
Click on an image, and you will see an enlarged version of it. With this gallery it is easy to navigate from one enlarged image to the next. Creating it is easy, and if more or less images are needed, containers with the class name .picture-container can be duplicated or deleted until you have the number you want.
Adding or changing an image involves the Element pane in Site Designer, where you not only locate and select the image you want and insert it under 'Picture', but you also have to link to it under 'Href' and give it a title at the 'Attributes' where you see the 'Data Title'. All this is necessary to have the correct image showing up when one of the thumbnails is being clicked on.
Please also be aware that this component includes external files (CSS and JS). Therefore it is best not to change any names of classes or on folders.
You may be curious about the hidden HTML element called .may-be-deleted. It is there purely to cause Site Designer to place all the necessary files where they are needed in the Project Resources. Once the component has been saved and put to use, you may choose to delete that hidden element.
Download this component