Frameworks:
  • 1.  Bootstrap 3.0
  • 2. Lightbox
  • FRAMEWORKS: LightboxUse this framework to make a slideshow/zoom in seconds

    A basic rule in webdesign (and probably other stuff as well) is this:

    You have to try and be as lazy as possible!

    I don’t mean that you shouldn’t work hard or be thorough, but just to avoid repetition. Every website is different, but there are foundations that will be the same. The stuff that you always need. You can work with templates or frameworks to save yourself this “basic” work. Every project is different but that reflects mostly on the content. We always use the same code the same ways. Maybe this time it’s more elaborate or faster, maybe better, ..

    But sometimes you want free functionality that everyone recognises. I’ll give you an example with the image below. This is something you might have seen on a lot of websites. That makes sense, as it’s a free service, fairly easy to implement and it’s well known. That usually means people will know how to use it, increasing the usability of your site. So, do me a favour and click on the image below.

    Did you see that box popping up ? You didn’t? What are you using, Internet Explorer 6 ? That was a joke and I genuinely hope you’re not. If you are, escape to here and download literally anything else!

    Plugin Lightbox

    So the name of this plugin is Lightbox and gives you the option to make an image clickable and enlarge it. But it does it in the middle of your page and blackens all other content out. You can even have a little photo album if you want. Let’s look on how to implement it shall we ?

    1. Download the plugin

    Go to the website and make use of that download button. You’ll now be downloading a zip file. When you’re done, open it up and copy the folder dist to a place you’ll find it later. This is the one that we’ll be using. We don’t need the documentation or examples files. In the dist folder you’ll find a css and js folder. Those contain files we’ll need. So open up the css folder and copy/paste the lightbox.css file to your project css folder. Do the same thing for the js folder with the lightbox.min.js file. I assume you have an HTML file with some code in there, but if you don’t, you’ll have to make one. Name it index if it’s your first file. If you don’t know why the name index is important go check out my previous tutorial.

    I’ll give you a screenshot on what you should have by now:

    2. Including the files and dependencies

    So, basically, Lightbox gives us two files to include: a css file and a js file. The css file handles all of the styling of the plugin. The colors, the arrows, .. It’s often the way you like and don’t need to make any changes. Even if you would, you shouldn’t make them in this file, rather you should be using your own file to overrule the plugins styles. This limits problems you might get with specificity in css or when updates for the plugin overwrite your changes.

    The js files contains all functionality and makes sure everything moves accordingly. But it is dependent on jQuery. That means, that before you can use the Lightbox plugin, jQuery needs to be added to your project. But not to worry, we’ll do that by linking to the online hosted version (CDN) of Google. Lightbox also has its images combined in the images folder. Don’t forget to also copy these over to your images folder or to copy and keep the folder as is. But you need those images. So let’s take a look at our code in the index.html file:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset='UTF-8' />
        <link rel="stylesheet" type="text/css" href="css/lightbox.css">
      </head>
      <body>
     	
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/lightbox.min.js"></script>
      </body>
    </html>  

    3. Using the code

    This means that everything is set up and ready to use but we never actually implement the plugin anywhere. If we go and have the docs on the website, the only we need to do is set our images up in a link tag. An example below:

    <a href="http://kenvandamme.be/stuff/images/design19.jpg" data-lightbox="image-1" data-title="My caption&ht;
      <img src="http://kenvandamme.be/stuff/images/design19.jpg" width="100">
    </a>

    I just added a link tag (a) with an image inside. So you could use two images here: a thumbnail and a bigger version of the same image.

    To do more and explore all the options, check out the documentation on the website.

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy