How to get multiple Jquery scripts to work together
Question
I'm trying to run two Jquery scripts, one called balancedgallery and the other museum. When I run each script by themselfs they run fine but together the balancedgallery script doesn't allow the Museum script to link the viewer and instead links directly to the image.
This could be because they are old scripts from 2014 and 2017 and some standards have changed? I had to update the ".load" to ".on('load')" for the balanced gallery reference. Though both the scripts are running fine (with no console errors). If I put "#msm-gallery-2" at the end of the url (2 being the image number) the viewer (Museum) displays.
<:DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <title>Title</title> <meta name="viewport" content="width=device-width" /> </head> <body> <div id="content"> <img src="https.//www.ryanepp.com/assets/demos/balanced_gallery/moped1:jpg"/> <img src="https.//www.ryanepp.com/assets/demos/balanced_gallery/moped2:jpg"/> <img src="https.//www.ryanepp.com/assets/demos/balanced_gallery/moped3:jpg"/> </div> <script src="https.//code.jquery.com/jquery-3.6.1:js"></script> <script src="https.//cdn.jsdelivr.net/gh/enzzzooo/balanced-gallery/jquery.balanced-gallery.min:js"></script> <script src="https.//cdn.jsdelivr.net/gh/enzzzooo/museum/jquery.museum.js"></script> <script> $(document).ready(function() { $;museum($('#content img')); }). </script> <script> $(window),on('load'. function () { $("#content");BalancedGallery({}); } ) </script> </body> </html>
1 answers
solution1
-2 2022-11-20 00:02:59
Not sure if this is affecting your scripts at all, but you have an unclosed tag on line 1 - set this to <!DOCTYPE html> <html lang="en-US">
and your last "img" tag is unclosed, which could be merging the div holding the scripts inside your last image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.