jQuery Conflicting with Other Plugins
First off, thank you in advance for any assistance in this matter.
I've inherited a website from another web developer and they're currently using the Top Up Lightbox for all clickable images and videos. My dilemma is this, I'm also trying to use a jQuery Pop Up Overlay on this same site. However it appears that the script CDN's for jQuery that I'm adding seem to be cancelling out the functionality of the Top Up scripts. How can I prevent this from happening and still use both the Lightbox and Pop Up Overlay. Please bare in mind that I'm fairly new to jQuery. I'll include the code below for a better understanding.
HEADER INCLUDE
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title></title>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <!-- Top Up -->
- <script type="text/javascript">
- TopUp.host = "http://www.foo.com/";
- TopUp.images_path = "assets/images/top_up/";
- </script>
- <script type="text/javascript">
- TopUp.host = "http://www.foo.com/";
- TopUp.players_path = "assets/players/";
- </script>
- <link href="css/master.css" type="text/css" rel="stylesheet" media="all" />
- </head>
-
- <body>
CONTENT
- <?php include('includes/header.php'); ?>
- <div id="content">
- <!-- jQuery PopUp Dialog -->
- <div id="my_popup">
- <div><a href="#" class="my_popup_close"><img src="images/foo.jpg" alt="Popup Window" width="1000" height="800" border="0" /></a></div>
- </div>
- </div>
- <?php include('includes/footer.php'); ?>
FOOTER INCLUDE
- <script src="js/jquery/*.js"></script>
- <script type="text/javascript" src="js/top_up-min.js"></script>
- <!-- jQuery Import Links -->
- <script src="//code.jquery.com/jquery-3.1.0.js"></script>
- <script src="//code.jquery.com/jquery-migrate-3.0.0.js"></script>
- <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
- <!-- jQuery PopUp CDN -->
- <script src="//cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.11/jquery.popupoverlay.js"></script>
- <!-- jQuery PopUp Open -->
- <script>
- $(document).ready(function() {
- $("#my_popup").popup({
- autoopen:true,
- transition: 'all 0.3s',
- scrolllock: true
- });
- });
- </script>
- </body>
- </html>