Adding Images

Let's add images

Now that you Install your Gallery and Instantiate a new Pure Gallery instance inside your code we need to add images to this gallery!

1. In the Gallery DIV we create another div inside with the ID puregallery-image:

<div id="puregallery" data-pg-gallery="1" data-pg-size="800x600">
    <div class="puregallery-image"></div>
</div>

2. Inside the image DIV we are going to set 3 parameters data-pg-img, data-pg-pos, data-pg-gid.
   2.1. data-pg-gid - The data-pg-gid parameter stands for Gallery ID, set the same number that we set when we Instantiate the Pure Gallery;
   2.2. data-pg-pos - The parameter data-pg-pos is the picture position on queue, NUMBER 1 IS THE FIST PIC TO DISPLAY WHEN USER LOADS THE PAGE;
   2.3. data-pg-img - The data-pg-img parameter is the link/path to the image file;
   

<div id="puregallery" data-pg-gallery="1" data-pg-size="800x600">
    <div class="puregallery-image" data-pg-pos="1" data-pg-img="https://images.ecycle.com.br/wp-content/uploads/2021/05/20195924/o-que-e-paisagem.jpg" data-pg-gid="1"></div>
</div>

PS: To add a second image just copy the DIV you create and replace the data-pg-pos with the next number on queue and the data-pg-img with the new image link/path.

<div id="puregallery" data-pg-gallery="1" data-pg-size="800x600">
    <div class="puregallery-image" data-pg-pos="1" data-pg-img="https://images.ecycle.com.br/wp-content/uploads/2021/05/20195924/o-que-e-paisagem.jpg" data-pg-gid="1"></div>
    <div class="puregallery-image" data-pg-pos="2" data-pg-img="https://www.estudokids.com.br/wp-content/uploads/2020/02/o-que-e-paisagem-1200x675.jpg" data-pg-gid="1"></div>
    <div class="puregallery-image" data-pg-pos="3" data-pg-img="https://images.ecycle.com.br/wp-content/uploads/2021/05/03122127/pietro-de-grandi-T7K4aEPoGGk-unsplash-1024x683.jpg" data-pg-gid="1"></div>
</div>