Search code examples
javascripthtmlrazorzurb-foundation-5

error displaying images with zurb foundation 5 clearing lightbox


I have a foundation 5 website and on one of the pages I am trying to use the clearing light box element as outlined HERE

The clearing elements are generated using a c# razor template

THIS is the website page I am using it on.

If you click on one of the images the chrome cosole logs the following error:

undefined:1 GET http://www.capitalcitytreeservice.ca/undefined 404 (Not Found)

There is no JS error thrown but it does list the following in the network tab:

Remote Address:137.117.17.70:80 Request URL:http://www.capitalcitytreeservice.ca/undefined
Request Method:GET Status Code:404 Not Found

I am not sure what is happening here. The image lightbox loads but you can not scroll through them by using the arrows, and if you click on the thumbnails inside the lightbox the thumbnails slide left and disappear.

Can someone help me debug this foundation 5 lightbox implementation?

Thanks in advance.


Solution

  • Okay,

    So the unordered list elements that foundation needs were being created/added by a c# razor template. it was adding some extra markup that was breaking the foundation 5 lightbox. Once I changed my template to remove the unneeded markup the foundation lightbox now works.