[Resolved] Regarding Modals, Bootstrap and Venobox…

[Roberto Enrique]

Hi Tom!
The other day you suggested me to use the “Bootstrap Modal” plug-in.
I followed your suggestion and it actually worked pretty nice.

But the way you load the pop-ups for your videos in this website was so nice that I couldn’t resist to try that Venobox JQuery Script.

Now, looking at the “Bootstrap Modal” plug-in code I realized that it actually was doing pretty easy stuff, it just enqueue the css and js files and that’s it!

(Note: I don’t know JS or PHP at all, I’m roughly a CSS amateur)

I tried to do similar with Venobox but it needs to be initialized…

My intuition drove me to the conclusion that adding this to wp_footer hook could do the trick:

<script>
jQuery(document).ready(function(){
    jQuery('.venobox').venobox(); 
});
</script>

And it actually does…

This is the first time I do a plug-in. 🙂

* * * * * * *

Now I would like to know how to add that <script>…</script> stuff to the footer automatically with the plugin so it can work no matter if you have “hooks” add-on or not.

Can you give me a little help with this.

The pseudo-beta plug-in can be found here:

http://expirebox.com/files/e4ed73e58b2df5bbc4d027ac6a2c3f70.zip

I hope not to be too Off Topic

Thanks in advance

[Tom]

There’s a couple ways 🙂

1. You can put your jQuery in a new file and name it something like scripts.js (no <script></script> tags) – then upload it to your child theme.

Now you can enqueue the file using a function like this:

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
function my_custom_scripts() {

	wp_enqueue_script( 'my-scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '1.0', true );

}

The above assumes you uploaded your scripts.js file to a /js/ directory in your child theme.

2. Another way is to place it directly in the footer:

add_action( 'wp_footer','my_custom_footer_scripts' );
function my_custom_footer_scripts()
{ ?>
      <script>
            jQuery(document).ready(function(){
                  jQuery('.venobox').venobox(); 
            });
      </script>
<?php }

Hope this helps 🙂

[Author]

Posts