title: video gallery getting Uncaught TypeError: $(...).lightGallery is not a function
body: <p>I am using video.js for my video gallery. I tried video.js but I am getting the following error message.</p>
  
  <p>Uncaught TypeError: $(...).lightGallery is not a function
  My code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://vjs.zencdn.net/4.12/video.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!-- Hidden video div --&gt;
      &lt;div style="display:none;" id="video1"&gt;
          &lt;video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none"&gt;
              &lt;source src="videos/test1.mp4" type="video/mp4"&gt;
               Your browser does not support HTML5 video.
          &lt;/video&gt;
      &lt;/div&gt;
      &lt;div style="display:none;" id="video2"&gt;
          &lt;video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none"&gt;
              &lt;source src="videos/test2.mp4" type="video/mp4"&gt;
               Your browser does not support HTML5 video.
          &lt;/video&gt;
      &lt;/div&gt;
  
      &lt;!-- data-src should not be provided when you use html5 videos --&gt;
      &lt;ul id="video-gallery"&gt;
        &lt;li data-poster="video-poster1.jpg" data-sub-html="video caption1" data-html="#video1" &gt;
            &lt;img src="1.jpg" /&gt;
        &lt;/li&gt;
        &lt;li data-poster="video-poster2.jpg" data-sub-html="video caption2" data-html="#video2" &gt;
            &lt;img src="2.jpg" /&gt;
        &lt;/li&gt;
        ...
      &lt;/ul&gt;
  
  
  &lt;/body&gt;
  &lt;script&gt;
      $('#video-gallery').lightGallery({
          videojs: true
      }); 
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>please suggest the solution.</p>