Gallery 1

Follow the steps below to create your gallery like in Gallery 1 (Template/portfolio.html):

  1. Create a folder (where you will add all your images) inside the root of your project (For example, in this Template, the default folder is /portfolio)
  2. Add your images to your folder
  3. In the file portfolio.html, add the following code corresponding to each image :

    <a href="myFolder/myImage.jpg" class="galleryItem">
        <img src="myFolder/myImage.jpg" alt="" />
    </a>
  4. Please note that the "href" and the "src" must have the same path. Don't remove the class "galleryItem", otherwise the popup won't work.

Gallery 2

This Gallery is exactly the same than Gallery 1, except it is much easier to use (Template/portfolio2.html):

  1. Create a folder (where you will add all your images) inside in the root of your project (For example, in this Template, the default folder is /portfolio)
  2. Add your images to your folder. All of your images must have the same name + a number at the end. Example: image1.jpg, image2.jpg, image3.jpg ...
  3. This Gallery uses a function called generateImages() located in js/scripts (line 132). There are only 3 parameters to configure and you're done :
    1. line 135: write the total number of images inside your folder (here, there are 12 images inside the 'portfolio' folder). Example: if you have 23 images inside your folder, then line 135 will be totalImages = 23,
    2. line 136: write the name of the folder where your images are (by default it is 'portfolio'). Example: if your folder is called 'work', then line 136 will be folder = 'work/',
    3. line 137: write the name of the image file without the number (by default it is 'image'). Example: if your images are called 'photo1', 'photo2', 'photo3', etc... then line 137 will be imageName = 'photo';

Gallery 3

Follow the steps below to create your gallery like in Gallery 3 (Template/portfolio3.html)

  1. Create a folder (where you will add all your images) inside in the root of your project (For example, in this Template, the default folder is /portfolio)
  2. Add your images to your folder.
  3. Go to /Templates/portfolio3.html
  4. As you can see, each image is defined by the following code :

    <a href="https://source.unsplash.com/_cvwXhGqG-o/300x300" target="_blank" class="link">
        <figure class="thumb">
            <img src="https://source.unsplash.com/_cvwXhGqG-o/300x300" alt="Portrait by Jessica Felicio">
            <figcaption class="caption">Portrait by Jessica Felicio</figcaption>
        </figure>
    </a>
  5. Replace the href and the src by the path of your image. They must have exactly the same path for the popup to work!
  6. Replace the alt and figcaption by the title you want to give to your image
  7. If you want exactly the same result than the template, you must have exactly the same ratios. For example, this image is 300x300px. You must have the same ratio (1:1), so your image should be a square

Gallery 4

Follow the steps below to create your gallery like in Gallery 4 (Template/portfolio4.html):

  1. Create a folder (where you will add all your images) inside in the root of your project (For example, in this Template, the folder for this gallery is /portfolio4)
  2. Add your images to your folder. Each image must have a big version (1200px) and a small version (300px)
  3. In the file portfolio4.html, what is inside <div class="slider-for"> corresponds to the big images and what is inside <div class="slider-nav"> corresponds to the small images.

  4. The images inside "slider-for" and "slider-nav" are exactly the same and must follow the same order. All you have to do is changing the src in the images and adding the path to your images
  5. Example for the first image:

    1. line 69: <img src="portfolio4/landscape-2000.jpg" alt="Image Description" /> (Your image must be at least 1200px wide)
    2. line 100: <img src="portfolio/landscape-300.jpg" alt="Image Description" /> (Your image must be at least 300px wide but not bigger than 300px to load faster)