Problem with adding lightbox to images

  • Resolved berttervoert

    (@berttervoert)


    3 years, 5 months ago

    Hi,

    I have a (in my opinion) strange problem with adding lightbox to images. I started on my localhost site and installed the ‘ultimate lightbox’ plugin because it gives the possibility to add a class or css selector to add the lightbox functionality to. I have a pod with multiple images and I created a pods template to show this pod on the page linked here above. At first it gave a broken image in the lightbox when you clicked the small image. After trying some variations I managed to get it working, and the pods template is as follows:

    <div class="wdtv_template_container">
	<div class="wdtv_template_title">
		{@post_title}
	</div>
	<div class="wdtv_img_lghtbx_row clear">
		[if fotos]
			[each fotos]
				<div class="wdtv_img_lghtbx">
					{@_img.large}
				</div>
			[/each]
		[/if]
	</div>
</div>

    At first I had instead of {@_img.large} the following: <img src="{@_src.large}">, but that resulted in the broken image (the source for the broken image shows as ‘undefined’).

    Next I repeated the process for a online site, copied the pods template, checked all the settings were similar, but the lightbox show broken image (see link below). I tried the <img… > version, but this has the same effect. I also tried the following line of code: <a href="{@_src.large}"><img src="{@_src.large}"></a>, but still the same result.

    Do you have any idea why this is working on my localhost site but not on the online site? Both have the same plugins installed and I checked that all settings are the same (several times).

    I have also reached out to the team behind the lightbox plugin, but haven’t had a definitive answer yet.

    I don’t know where the problem lies, but would be realy gratefull if you could give me some hint as where to go next.

    Thanks in advance,
    Bert.

    • This topic was modified 3 years, 5 months ago by berttervoert.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Scott Kingsley Clark

    (@sc0ttkclark)

    I’m confused here, the page you posted is using a little different markup and the img tags look like they have the src set.

    Can you clarify exactly what code you are using on that page specifically? Is this a shortcode or PHP? Could you post a Gist with the code you’re using for that area?

    Thread Starter berttervoert

    (@berttervoert)

    I’m using SiteOrigin pagebuilder for the overall page layout. For this particular part, I created a row with two columns and each column has a widget in it called ‘custom html’. In this widget I placed the following shortcode:
    [pods name="club_kleding" template="clubkleding" where="id=345"]

    The html for the template ‘clubkleding’ is the part you find in my initial post above. Maybe the markup from the pagebuilder is what’s confusing you. I hope you have sufficiant information, if not please let me know what more you need exactly.

    Thanks in advance,
    Bert.

    Thread Starter berttervoert

    (@berttervoert)

    Hi,

    I managed to solve the problem with the people of the lightbox plugin. The selector for the lightbox was not set correctly. It selected the div in which the image was placed and that’s why it didn’t find the image url when opening the lightbox. Just adding img to the selector made everything work perfectly.
    selector was: wdtv_lgthbx_img and now is: wdtv_lghtbx_img img

    Thank you for your time and effort!
    Bert.

    Plugin Author Jory Hogeveen

    (@keraweb)

    Thanks for letting us know!
    Closing topic!

    Cheers, Jory

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with adding lightbox to images’ is closed to new replies.