Java Script Plugin: Lightbox example
Java Script is "an object-oriented computer programming language commonly used to create interactive effects within web browsers." It's used to add things to a website that wouldn't have otherwise be possible with just plain HTML and CSS. On website it's often used in combination with" jQuery". "jQuery is not a language, but it is a well written JavaScript code. As quoted on official jQuery website, it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."
There is a very productive web developer community and some developers offer so called script "plugins" either free of use of for a small fee. They are fully functional coded modules and often customizable. Customization can either be just visually (with CSS) but also functional (Java Script options).
Plugin example: "Fancybox" Lightbox
This is a typical plugin with plenty of customization options. It allows to open up a layer over your page which can contain full size images, videos, text, iframe etc. This can be very helpful on portfolio sites if you want to give visitors the option to view and image (or a series of images) in a bigger size.
Many of those plugins have dedicated websites with examples and instructions on how to use them. The Fancybox lightbox has this one: http://fancyapps.com/fancybox/3/. There you can read all about the features and options and you can download the code.
The download contains the Java Script and CSS combo. If you want to use such a plugin you need to copy those script files into your own site files and link all of it in the HTML head section. Additionally your need to "fire up" or activate the plugin with some lines of script that are either placed in the head section or at the bottom of your HTML file (right before the body tag closes).
HTML code with linked script files:
<head><br />
<br />
<meta charset="UTF-8"><br />
<title>Lightbox</title><br />
<br />
<!--script library:--><br />
<script src="js/jquery-3.3.1.min.js"></script><br />
<br />
<!--lightbox styles:--><br />
<link rel="stylesheet" href="css/jquery.fancybox.css" /><br />
<br />
<!--lightbox script:--><br />
<script src="js/jquery.fancybox.js"></script><br />
<br />
</head>
<!--Script to activate Lightbox with options: --><br />
<br />
<script type="text/javascript"><br />
$("[data-fancybox]").fancybox({<br />
loop : true,<br />
wheel : false,<br />
buttons : [<br />
'zoom',,<br />
'close'<br />
] <br />
});<br />
</script><br />
<br />
Below you can see how the files and folder structure should look like for the links in the code above. Having exactly those kind of folders for a website is a very common setup you should follow.
Download:
If you need the lightbox feature for your portfolio, I prepared (and simplified) an example that include all HTML, CSS and script files. Download it here
Links to other popular and useful plugins for portfolios
Masonry: Cascading grid layout
Isotope: Filter and Sorting for image grids
Sippry: Responsive Image Slider
A site with many plugins available for a small fee is Code Canyon