Step 1: Find a gallery plugin that you want to use for your site. It is usually best to find one with a lot of good support documentation so that if you hit a snag you can read through it to figure out what might have gone wrong.
FancyBox is one option, there are many, many others.
Step 2: Once you have made your choice download the .zip that is provided on the site of your plugin. There is usually a download link/option somewhere on the site.
Step 3: Now that you have your .zip downloaded unzip it with any extracting tool either on Windows or Mac. Look through the folder and there should be several folders and files that make the plugin run.
Step 4: It is usually best to copy the file structure that the developers have set up, so just copy the folders from the extracted .zip into your own main folder.
Step 6: Now look in the demo HTML for a div containing image links. These links will have IDs associated with the plugin you have downloaded. This is how the plugin knows what images to display in the gallery. Copy them into the div you have set up for your images, and replace the href links with the links of images you want to display with the plugin.
Step 7: Load your HTML document into a browser Chrome, Safari, Firefox etc. To make sure it works. If you click an image and it doesn’t display properly there is a good chance you haven’t copied a file/code correctly into your document. Go back and check that all the links, references, and files are there so the plugin works correctly. This part may take a lot of trial and error but it will work as long as all the proper files and code is in your document.
Step 8: Celebrate! You got a plugin into your site!