Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS Files Conflicting

    Hi all,

    I'd like to apologise for 2 things straight away. 1) I'm new to Javascript, am a graphic designer by trade but looking to branch out, learning, but am learning slowly... So I apologise if I look at you like a rabbit in headlights if I get a response. 2) my hosting is currently down, and so I don't have anything of my own to show you to try and resolve the problem, but I'll do my best to provide you with as much additional information as possible.

    I believe I have conflicting JS files which are causing one of my files to action incorrectly. My page is a portfolio gallery and is made up of two separate things. The first is a Google Image style thumbnail expander, the 2nd is lightbox. As you can see in the link below this paragraph, when you click on a thumbnail it is supposed to expand, shunting the content below down, when closed it contracts, bringing the content back up. The second is just your bog standard lightbox, used on a number of images not suitable for the thumbnail expander, see links.

    Expander example - http://tympanus.net/Tutorials/Thumbn...andingPreview/
    Expander tutorial
    http://tympanus.net/codrops/2013/03/...nding-preview/
    Lightbox - http://lokeshdhakar.com/projects/lightbox2/

    Each work perfectly separately, the problem I have is when I try to have them together on the same page. The lightbox conflicts so that instead of expanding/contracting with shunting the content down or up, the expanded section shunts the content down just appears, and when it's closed it just disappears without bringing the content back up.

    All the JS is linked JS with the exception of one small piece.
    located in the head -

    <script src="js/modernizr.custom.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    Located at the bottom just before the </body> tag -

    <script src="js/grid.js"></script>
    <script>$(function() {
    Grid.init();
    });
    </script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>

    The conflicting file itself (i believe) is js/jquery-1.7.2.min.js

    Can anyone help me with what I can do to try and fix this?

    Many many thanks.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    You’re on the right track, read the sticky: Scripts donít work when used together

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Your code contains two copies of the JQuery code - you need to remove one of them.

    The better of the alternatives is to keep

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    and remove

    <script src="js/jquery-1.7.2.min.js"></script>

    if for some reason you do need to run the older version of JQuery rather than the newer one then you should use the copy from Google as more people will already have it downloaded.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks a lot for the help,

    I did figure it was a conflict between the two Jquery codes. I removed one of them and one thing went wrong, removed the other and the other one went wrong.

    I managed to find a lightbox variation which uses 1.9.1. In future, if I have problems with different things needing different versions of Jquery is there anything I can do to get around this? Or is it simply AVOID.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    It’s about knowing what works and what doesn’t, and finding alternatives if one thing doesn’t work. Many times plugins that are shipped with an older version of jQuery still work with the newest version (if it’s not overly outdated) but as technology is advancing sometimes things aren’t backwards compatible. There are numerous plugins on the internet that do the same as Lighbox does (e. g. Colorbox, Slimbox, Fancybox, jQuery Tools overlay, jQuery UI) so if one doesn’t work check out alternatives.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •