I’m using a PHP script which has a pop-up box that, when the thumbnail is selected, the video player dynamically appears in the pop-up box. It is outdated, and not working correctly(see attached image), so I’m trying to replace it with venobox: http://lab.veno.it/venobox/
So far, I’ve uploaded the venobox folder, and added this:
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add venobox -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>
</head>
Now it says to:
“Insert one or more links with its custom class”:
<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a>
For Google Maps use the iFrame href attribute of map’s embed code and set data-type=“iframe”
“For videos use the simple url of the video, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id”
So, I don’t know what, in VenoBox, is meant by “Insert one or more links with its custom class” and please help me, what I should do with these further set up instructions?:
Initialize plugin
$(document).ready(function(){
/* default settings */
$('.venobox').venobox();
/* custom settings */
$('.venobox_custom').venobox({
framewidth: '400px', // default: ''
frameheight: '300px', // default: ''
border: '10px', // default: '0'
bgcolor: '#5dff5e', // default: '#fff'
titleattr: 'data-title', // default: 'title'
numeratio: true, // default: false
infinigall: true // default: false
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
});
Additionally, since I’m trying to get a video to dynamically play in the box, it states:
“Data Attributes
If the content is not an image you have to specify its type via data attribute data-type”
<a class="venobox" data-type="iframe" href="http://www.veno.it">Open Iframe</a>
<a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">Open YouYbe video</a>
<a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Open Vimeo video</a>
The GreyBox that I’m currently using, I believe the code is this:
<tr>
<td width="10px"><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[470,370]" style="float:right"><br />
<img src="/community/uploads/thumbs/[blk1.video_id;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></td>
<td width="400px"><!--[var.lang_title]--><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[520,600] ">
<div class="container88888"><!--[blk1.Title;htmlconv=no;block=div;ope=max:70;comm]--> </a><br />
<!--[var.lang_description]:-->[blk1.vid_desc;htmlconv=no;block=div;ope=max:268;comm] </div></td>
</tr>
Any help/clarification will be appreciated.