Feb 16, 2016
Often when we are creating websites we are advertising a service or products and a good way to illustrate the products or services in question is through the use of media. This media can include things like a photo and video library showcasing it all.
libraries that can assist us with this. So for today’s blog I will be taking you through the steps of using the “Magnific Popup” JS library to create a rich media website. The following images show the end product.
And when you click on a video it appears in its own window as seen in the following image:
For this to work we are going to use the Bootstrap
and magnific popup libraries, these libraries can be inserted into your project by searching for them using NuGet package manager.
Once these are added you can add an empty page or edit the page of interest. To use these libraries make sure you reference them within the HTML page. Within these references we will include Bootstrap, jQuery and magnific popup libraries as well as the associated stylesheets.
Next we will add some HTML markup to represent our gallery of videos. Take note that I will also add some CSS rules to style these items for the sake of appearances. When we take a closer look at the items within the markup you can see the following:
- It has an anchor element as the parent element
- The anchor tag has a class set to “popup-youtube”
- It has an img element nested to display the thumbnail of the video
- Finally a h5 element for a title of the video
code to open the video
The following is the markup of the CSS, remember to include this on your html page
code to make sure my users get to see the video in a modal dialog. If we take a look at the script it includes the following:
Will fire of when the document is ready
It targets elements with the “.popup-youtube” class assigned to them
Will render an Iframe
Uses a class called “mfp-fade”, this is included in the magnific stylesheet