Skip to main content

Nivo Lightbox jQuery Plugin

-

Install files

Add these items to the <head> of your document. This will link jQuery and the Nivo Lightbox core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!
<link rel="stylesheet" href="nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="nivo-lightbox.min.js"></script>

Add markup

The Nivo Lightbox markup is actually very simple and fully accessible. You simply need to set up links as you normally would in any webpage. The Nivo Lightbox automatically detects what type of content your are trying to display.
<a href="image_large.jpg" title="This is an image title">
    <img src="image_thumb.jpg" alt="" />
</a>
<a href="http://wikipedia.com">View Website</a>
<a href="https://www.youtube.com/watch?v=L9szn1QQfas">View Youtube Video</a>

Hook up the lightbox

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1.
<script>
$(document).ready(function(){
    $('a').nivoLightbox();
});
</script>
...and voila! That wraps up the most basic installation of Nivo Lightbox into your webpage.

Play with settings

Listed below are all of the options available to customize the Nivo Lightbox to suite your needs, along with their default values.
$('a').nivoLightbox({
    effect: 'fade',                             // The effect to use when showing the lightbox
    theme: 'default',                           // The lightbox theme to use
    keyboardNav: true,                          // Enable/Disable keyboard navigation (left/right/escape)
    clickOverlayToClose: true,                  // If false clicking the "close" button will be the only way to close the lightbox
    onInit: function(){},                       // Callback when lightbox has loaded
    beforeShowLightbox: function(){},           // Callback before the lightbox is shown
    afterShowLightbox: function(lightbox){},    // Callback after the lightbox is shown
    beforeHideLightbox: function(){},           // Callback before the lightbox is hidden
    afterHideLightbox: function(){},            // Callback after the lightbox is hidden
    onPrev: function(element){},                // Callback when the lightbox gallery goes to previous item
    onNext: function(element){},                // Callback when the lightbox gallery goes to next item
    errorMessage: 'The requested content cannot be loaded. Please try again later.' // Error message when content can't be loaded
});
The effect parameter can be any of the following:
  • fade
  • fadeScale
  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • fall

Adding Titles

Adding titles to your lightbox items is as simple as adding a title attribute to your link. For example:
<a href="image_large.jpg" title="This is an image title">
    <img src="image_thumb.jpg" alt="" />
</a>

Setting up Galleries

By default Nivo Lightbox will only show individual items. To create a gallery of items with prev/next navigation you need to add a data-lightbox-gallery attribute to your links. For example:
<a href="image1_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image1_thumb.jpg" alt="" />
</a>
<a href="image2_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image2_thumb.jpg" alt="" />
</a>
<a href="image3_large.jpg" data-lightbox-gallery="gallery1">
    <img src="image3_thumb.jpg" alt="" />
</a>

Loading content via AJAX/iFrame/Inline

To load content via AJAX you need to add a data-lightbox-type="ajax" attribute to your link. For example:
<a href="demo.html" data-lightbox-type="ajax">Load via AJAX</a>
As of v1.2.0 the same appplies for iframe's and inline HTML:
<a href="demo.html" data-lightbox-type="iframe">Load iFrame</a>
<a href="#my-div" data-lightbox-type="inline">Load Inline HTML</a>

Using HiDPI Images

Nivo Lightbox supports loading HiDPI images in the lightbox for devices that support it (e.g. Retina Macs). To do so simply add a data-lightbox-hidpi attribute to your link with the URL to your HiDPI image. For example:
<a href="image_large.jpg" data-lightbox-hidpi="image_large@2x.jpg">
    <img src="image_thumb.jpg" alt="" />
</a>

Comments

Post a Comment

Popular posts from this blog

20 excellent contact pages

-
Image
20 excellent contact pages By  Kendra Gaines   |  Web Design  |  Mar 27, 2013 The purpose of any website is to get people from your target audience interested in what you’re offering. Whether it be a product or service, 9 times out of 10, someone is going to want to communicate with you further. Because of this, in almost any industry, you’re going to want to create a contact page. For some, this is that last page on the site map where you just throw a bunch of information. You can leave it up to the person to decide how they want to contact you and what they want to contact you about. For others, this is the last attempt to get your potential customer to give you their business. The contact page is much more important than many give it credit. Many basic websites just throw some numbers and e-mails up and move along. But in most cases, this is the page your customer sees before they decide they want you on their project. Or before they decide they want to vi
Read more

Laravel 5.8 Files Folders Permissions and Ownership Setup

-
Introduction:  laravel storage permissions Hello, In this post I will teach you how you can deal with files and folder permissions and ownership when you are working in laravel project.  In the modern growing development environment, security is the most important factor for any application especially when you are deploying your project on the production server. Files and folders permissions are the main things for concerned. If you are not assigning proper files and folders permission then it's mean you are giving an invitation to attackers. In other words, your system is open for public and attackers without giving proper permissions. If you are in beginner and any phase of laravel and not familiar with laravel storage permission then this post gonna help you that how you can easily laravel storage permissions . Laravel Security Issues: I have seen several time people when deploying laravel project, the first error they get is laravel storage permissions and
Read more