Help with adding a pop-up box

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.

Hi Chris, your question is a bit complicated. It would help if you had a demo or something to look at. Is it possible you could set this up in a JS Bin or JSFiddle something?

Now, to deal with what you’ve asked (quoted above), when they say “insert one or more links with its custom class” they’re simply referring to the “class” attribute on the “a” tag. Notice their example uses either class="venobox" or class="venobox_custom". I’m not familiar with Venobox, but it seems that if you use a plain image, then you just need “venobox” as the class, but if you use an iframe or something, then you need the “venbox_custom” class.

But I’m not sure, you’ll have to try out both options and see. I hope that helps.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.