DMXzone Lightbox 2 Support Product Page

Solved

Not showing subsequent images in lightbox

Reported 16 Dec 2020 17:07:08
1
has this problem
16 Dec 2020 17:07:08 Karen Blaylock posted:
When I click on a thumbnail it opens up a new window with the enlarged image but does not appear to be able to move to the next or previous images.
I note this product is quite old - is it still supported or is there a better product - with similar functionality?

Replies

Replied 17 Dec 2020 08:22:09
17 Dec 2020 08:22:09 Teodor Kuduschiev replied:
Hello Karen,
In order to be able to loop through different images, make sure to enter the same group name for all of them: prntscr.com/w4itrv

Replied 17 Dec 2020 17:55:35
17 Dec 2020 17:55:35 Karen Blaylock replied:
Hi Teodor,

Thanks for getting back to me. The group name has been set see:
sswtest.co.uk/website/testlightbox.html


Replied 17 Dec 2020 17:59:10
17 Dec 2020 17:59:10 Teodor Kuduschiev replied:
Sorry but where is the lightbox supposed to be on that page?
Replied 17 Dec 2020 18:05:00
17 Dec 2020 18:05:00 Karen Blaylock replied:
Below 'Cheltenham' there are 8 small thumbnails, when I click on any of them I am expecting it to open a lightbox and then to be able to move between the full size images with ' < ' and ' >' type buttons.
Replied 18 Dec 2020 09:46:03
18 Dec 2020 09:46:03 Teodor Kuduschiev replied:
The lightbox on this page does not work, due to errors in your code.
The images just open in the browser directly. This is because you have the jquery library included twice on the page, and jquery cannot be included more than once as it causes errors.
Try removing this include from the page:

<script type="text/javascript" src="includes/extendjQuery.js"></script>


Replied 18 Dec 2020 10:18:26
18 Dec 2020 10:18:26 Karen Blaylock replied:
OK, I have removed that reference and unfortunately, it still isn't working. Do you have any other suggestions?
sswtest.co.uk/website/testlightbox.html

Replied 18 Dec 2020 10:36:02
18 Dec 2020 10:36:02 Teodor Kuduschiev replied:
Now the jquery script is after the lightbox script. Just make sure to move

<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>

before
<script type="text/javascript" src="dmx/widgets/Lightbox/dmx.lightbox.js"></script>

Replied 18 Dec 2020 10:41:02
18 Dec 2020 10:41:02 Karen Blaylock replied:
Ok, done, but still not working sorry
sswtest.co.uk/website/testlightbox.html
Replied 18 Dec 2020 10:57:14
18 Dec 2020 10:57:14 Teodor Kuduschiev replied:
Ok i see there is one more include at the wrong place.
Just make sure the following includes on the page are in this order:


<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="dmx/dmx.core.js"></script>
<script type="text/javascript" src="dmx/widgets/Lightbox/dmx.lightbox.js"></script>

Replied 18 Dec 2020 12:02:40
18 Dec 2020 12:02:40 Karen Blaylock replied:
Thank you, that seems to be working now, really grateful for your help
sswtest.co.uk/website/testlightbox.html
Replied 18 Dec 2020 12:11:40
18 Dec 2020 12:11:40 Teodor Kuduschiev replied:
There is still an issue with the position of the lightbox caused by the reset.css file.: sswtest.co.uk/website/stylesheets/reset.css
Remove the tbody from the first rule of this file:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}


so it becomes


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}


and this will fix the problem.
Replied 18 Dec 2020 15:19:58
18 Dec 2020 15:19:58 Karen Blaylock replied:
Thanks Teodor, I have done this but it still seems to be positioned on the top left of the screen
sswtest.co.uk/website/testlightbox.html

Presumably it should be in the centre.

Replied 18 Dec 2020 17:43:28
18 Dec 2020 17:43:28 Teodor Kuduschiev replied:
Better remove the table, thead, td and tr from there as well It's unnecessarily including these.
Replied 21 Dec 2020 10:54:35
21 Dec 2020 10:54:35 Karen Blaylock replied:
Thanks for your help Teodor - looks much better now
sswtest.co.uk/website/testlightbox.html

Reply to this topic