Archived topic
Regarding Modals, Bootstrap and Venobox...
1 reply · Started by Roberto Enrique on June 9, 2015
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
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 :)