Lightbox with next and previous buttons/sequential images

Hello,
here 3 kinds of lightbox with next and previous buttons/sequential images so the user can navigate all of the product photos from a single window (if the product has more than one image).

Call it Lightbox two: https://webdee-seoservice.com/testlite/litecart/rubber-ducks-c-1/purple-duck-p-5 (on a 2.2.5 but should work on other version as well)
in litecart\includes\templates\default.catalog\views\box_product.inc.php
at the top of the code add (general2 can be any name, you can place these file somewhere else as well):

<script type="text/javascript" src="https://yourdomainname.com/general2/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="https://yourdomainname.com/general2/js/lightbox.js"></script>
<link rel="stylesheet" href="https://yourdomainname.com/general2/css/lightbox.css" type="text/css" media="screen" />```

modify the images visualization section on line 20 (line 20 before adding the above) add in the link:
rel="lightbox[new]"
and remove
data-toggle="lightbox" data-gallery="product"
so it will became something like this:

```<div class="col-xs-12">
          <a class="main-image thumbnail" rel="lightbox[new]" href="<?php echo document::href_link(WS_DIR_APP . $image['original']); ?>" >
            <img class="img-responsive" src="<?php echo document::href_link(WS_DIR_APP . $image['thumbnail']); ?>" srcset="<?php echo document::href_link(WS_DIR_APP . $image['thumbnail']); ?> 1x, <?php echo document::href_link(WS_DIR_APP . $image['thumbnail_2x']); ?> 2x" alt="" title="<?php echo htmlspecialchars($name); ?>" />
            <?php echo $sticker; ?>
          </a>
        </div>
        <?php foreach ($extra_images as $extra_image) { ?>
        <div class="col-xs-4">
          <a class="extra-image thumbnail" rel="lightbox[new]" href="<?php echo document::href_link(WS_DIR_APP . $extra_image['original']); ?>" >
            <img class="img-responsive" src="<?php echo document::href_link(WS_DIR_APP . $extra_image['thumbnail']); ?>" srcset="<?php echo document::href_link(WS_DIR_APP . $extra_image['thumbnail']); ?> 1x, <?php echo document::href_link(WS_DIR_APP . $extra_image['thumbnail_2x']); ?> 2x" alt="" title="<?php echo htmlspecialchars($name); ?>" />
          </a>
</div>
        <?php } ?>```

in the directory general2 add the 3 directory (attached in general2.zip):
css
images
js

ATTENTION:
in general2\js\lightbox.js
modify the path at line 68

I took this code here: http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Lightbox three: https://webdee-seoservice.com/testlite/litecart-2-3-2/ (on a 2.3.2 but should work on other version as well)

in litecart\includes\templates\default.catalog\views\box_product.inc.php
above all insert (general3 can be any name, or the code of lightbox.css can be placed in other css file):

```<link rel="stylesheet" href="https://yourdomainname.com/general3/css/lightbox.css">```

in the links around line 9 add: data-lightbox="group"
exemple:
<a data-lightbox="group" ...>
should became like this:

```<div class="col-xs-12">
          <a class="main-image thumbnail" data-lightbox="group" href="<?php echo document::href_link(WS_DIR_APP . $image['original']); ?>" data-toggle="lightbox" data-gallery="product">
            <img class="img-responsive" src="<?php echo document::href_link(WS_DIR_APP . $image['thumbnail']); ?>" srcset="<?php echo document::href_link(WS_DIR_APP . $image['thumbnail']); ?> 1x, <?php echo document::href_link(WS_DIR_APP . $image['thumbnail_2x']); ?> 2x" style="aspect-ratio: <?php echo $image['ratio']; ?>;" alt="" title="<?php echo htmlspecialchars($name); ?>" />
            <?php echo $sticker; ?>
          </a>
        </div>

        <?php foreach ($extra_images as $extra_image) { ?>
        <div class="col-xs-4">
          <a class="extra-image thumbnail" data-lightbox="group" href="<?php echo document::href_link(WS_DIR_APP . $extra_image['original']); ?>" data-toggle="lightbox" data-gallery="product">
            <img class="img-responsive" src="<?php echo document::href_link(WS_DIR_APP . $extra_image['thumbnail']); ?>" srcset="<?php echo document::href_link(WS_DIR_APP . $extra_image['thumbnail']); ?> 1x, <?php echo document::href_link(WS_DIR_APP . $extra_image['thumbnail_2x']); ?> 2x" style="aspect-ratio: <?php echo $image['ratio']; ?>;" alt="" title="<?php echo htmlspecialchars($name); ?>" />
          </a>
        </div>
        <?php } ?>```

and at the very end of the page add (public_html alias https://yourdomainname.com):

```<script src="public_html/general3/js/jquery-2.1.4.min.js"></script>
<script src="public_html/general3/js/lightbox.dist.js"></script>```

The files are attached in general3.zip
I took this code here: https://www.jqueryscript.net/lightbox/Modern-Image-Lightbox-Plugin-with-jQuery-CSS3-Lightbox-js.html

Then there is another lightbox I placed here: https://megashape.uk/
but this one need to buy a license (not from me): 
https://fancyapps.com/docs/ui/installation

I hope it helps.

With me did work all.

Hi,

I can't get it to work properly.
I will get the popup with the dark background on clicking one of the pictures, but no previous, next or close buttons.
I only can go back with the browser button.
Any idea where it goes wrong?

Greetings Michel

Hello, probably the location of the images does not match the one in the css (in lightbox.css in the general 2 zip).
By the way, which one of the 3 did you try?
Do you have a live page for me to check?

I tried 2 and made it as a VQMOD
You can check it a

[url=https://www.onlygoodness.nl]https://www.onlygoodness.nl[/url] but its live, i wil activate the script on 12.45 (your local time)

Hello, now here is 7:30 pm, I think later I will be sleeping... did you find the location of the images (close, next, previous...)?
In css/lightbox.css:

#nextLink { right: 0; float: right;background: url(../images/next.gif) right 15% no-repeat;}```
and in js/lightbox.js
```var fileBottomNavCloseImage = "https://webdee-seoservice.com/testlite/litecart/general/images/close.gif";```
As you can see I wrongly left an absolute address, maybe you can change with your one.
Let me know if this did help.

ok its online now

I allready used an absolute adress for the fileBottomNavCloseImage and changed nothing at the css file.

I saw it. It seems everything is OK. I had a similar problem on another website and I could not let it work, maybe there was some conflict with some addons. In the end, I managed to work with general3, if I don't remember wrong.
I will look again at your website to see if I spot something that could be the cause.

Made all the links in the css absolute, but makes no difference.

Oh, I see that these 3 links have a different code that the one I used:

<script src="https://www.onlygoodness.nl/ext/featherlight/featherlight.min.js?_=1646941458"></script>
<script src="https://www.onlygoodness.nl/includes/templates/default.catalog/js/app.js?_=1646941518"></script>```
I attached here the code I used.
And I also completely remove from the server jquery-3.6.0.min.js (make a backup, you never know).
I don't know if this could be the case.
I insert in ext/jquery/ the jquery-3.3.1.min.js (attached here) but I did not linked in the page.
Let me know, I could eventually have a look at your code if you want.

Hello again, I think I found, so forget all the above.
Did you insert
rel="lightbox[new]"
and remove
data-toggle="lightbox" data-gallery="product" from the main-image thumbnail and extra-image thumbnail?

Yes I did but with no result.

It worked kind of with the other options above, iI could see the buttons, but i gave an error and i'm not a huge fan for changing featherlight and jquery versions. Idealy a simple VQMOD must do the trick. Thanks for your help so far. I will dive further in this quest...

OK, keep me posted. Maybe try general 3?

Then there is also this one: https://fancyapps.com/docs/ui/installation/ but they need you to pay a license (you can install completely free but to play fair later you have to pay them).

Then there is this free addon: https://www.litecart.net/en/addons/281/featherlight-gallery

Bye,
Vilaiporn

It's the jquery-3.6.0.min.js where seems to be the problem, i think it not compatible with all the general2 files.

Hello, good morning.
Try to rename the jquery-3.3.1.min.js to jquery-3.6.0.min.js (keep a copy to revert in case of problem) so you will not get the errors?