1

I want to include both these JS libraries in my code and have them run simultaneously.

http://st3ph.github.io/jquery.easyPaginate/ https://lokeshdhakar.com/projects/lightbox2/

Both websites give information on how to use the libraries.

I tried setting up both libraries, but could only get one to run at a time.

This is the code I've included at the bottom of my index.php page below (index.php is the only page where I want to use both libraries) -

<script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="lightbox.js"></script>
    <script src="jquery.easyPaginate.js"></script>
     <script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>

With this code, only the lightbox library works. If I were to move the lightbox script to the very bottom, then only the easyPaginate library would work.

How do I get both libraries to work simultaneously? Is that even possible?

My code - read below the "read from here" comment. https://pastebin.com/m0jA9QYp

I have called the jquery scripts in the head.

Trent Davids
  • 11
  • 2
  • Judging from the documentation both libraries should be able to run at the same time. Can you also post your HTML code? Maybe you are adding data-lightbox to the images that are inside of #easyPaginate container? Then this might be an issue as you have the "img" element select as paginateElement in easy paginate. – Wojciech Dynus Dec 09 '19 at 12:02
  • @WojciechDynus Here is my code - https://pastebin.com/m0jA9QYp A lot of it is messy. Some of the comments towards the top are wrong. Just read below the comment that says "Read from here". I have included the jquery scripts in the header – Trent Davids Dec 09 '19 at 12:09
  • I know the pastebin link I posted has a double call of the easyPaginate script. I removed one script call but still get the same output @WojciechDynus – Trent Davids Dec 09 '19 at 12:21
  • @niceCoderToThebest Yes. I can't comment any more because the comment thread is too long and you don't have enough XP for us to do a chat. If you wanna email me or something, that'd be great. otherwise, thanks for the help here – Trent Davids Dec 09 '19 at 12:31

4 Answers4

0

Yes, this is possible - to include one or more libraries in a file. You can do it like this:

in html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <script src="lightbox.js"></script>
        <script src="jquery.easyPaginate.js"></script>

</body>
</html>

Oke, but I stil see this on the page:

https://pastebin.com/m0jA9QYp:

  <script src="lightbox.js"></script>
    <script src="jquery.easyPaginate.js"></script>
    <script src="jquery.easyPaginate.js"></script>
     <script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>

so if you try this:

</center> 
     <script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'img',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>
<script src="lightbox.js"></script>
<script src="jquery.easyPaginate.js"></script>

</body>
  • That is what I tried doing, but unfortunately, it didn't work. I called the jquery script in the head tags and the lightbox and paginate scripts at the bottom of body (right before

    . Only the lightbox library is in effect.

     – Trent Davids Dec 09 '19 at 12:05
  • Oke, but if you change the order? jquery.easyPaginate.js" lightbox Or did you test it one by one? –  Dec 09 '19 at 12:08
  • If I change the order, then only easyPaginate.js works. I have updated the post with my HTML code if you want to take a look @niceCoderToTheBest – Trent Davids Dec 09 '19 at 12:12
  • Hi, But oke, I see in you example this: so two times the same library? –  Dec 09 '19 at 12:17
  • @niceCorderToTheBest I removed the duplicate. But still, only the pagination works and not lightbox – Trent Davids Dec 09 '19 at 12:19
  • yes it is. i can't comment any more here because it is turning out to be an extended conversation. we can't even turn this into a chat. if you wanna email me or something, that's great. otherwise, we will keep the conversation going here until i can't comment anymore – Trent Davids Dec 09 '19 at 12:33
0

Ok, I run your code and it looks like the problem is that the lightbox library is replacing the <a> elements with some of its own content. That leads to easy-paginate to lose the reference to the "img" elements that should create the pagination. What I tried was to wrap the <a> elements with the li so the HTML looks like this:

<div id="easyPaginate">
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
    <li>
        <a href= "https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" data-lightbox="img-0" data-title="title">
            <img src="https://st3ph.github.io/jquery.easyPaginate/img/demo/surf7.jpg" />
        </a>
    </li>
</div>

What's left now is to change the paginateElement for easyPaginate to li

<script>
          $('#easyPaginate').easyPaginate({
        paginateElement: 'li',
        elementsPerPage: 8,
        effect: 'climb'
    });
  </script>

Also try having the lightbox script included before the easyPaginate as I had some issues with the lightbox being added as the last one.

Wojciech Dynus
  • 911
  • 5
  • 11
0

I figured it out. I made div elements and placed the images inside of the div elements. In the pagination javascript file, I changed the type from img to div.

Trent Davids
  • 11
  • 2
0

Yes it's possible we have a library that handles pagination logic please see this https://github.com/pagino/pagino-js

Behnam
  • 6,244
  • 1
  • 39
  • 36