I tried to get the jquery one from this post working, but couldn't at 15.8.9: https://cityworks.my.site.com/s/feed/0D50y00006m0f59CAA

After a lot of research and trial and error I have rebuilt it to be an XML customization (still requires editing some JS files).

Here are the steps to implement this if you are interested.

(If you're not using Respond yet I'd recommend moving to that as it's built-in there, but if you have business reasons for staying in Office mode and need an easier way to open attachments then here it is.)

1..Copy the cw colorbox.zip from the old post: https://cityworks.my.site.com/s/question/0D50y00006EldXVCAZ/i-saw-an-article-referencing-adding-lightbox-to-images-and-it-mentions-there-is-a-zip-however-i-cannot-find-the-zip-to-downloadhttpsmycityworksforcecomsarticlecustomizationaddlightboxtoimageattachments

2..Put the custom folder in your site folder (ex: inetpub/wwwroot/cityworks)

3..Edit assets/jquery.fileupload/attachments.js (backup the file first!)

1. 1. Add "jquery/jquery.colorbox" to the end of the define array at the beginning. It should look like this:

define(["jquery", "ts/controls/utils", "cw-sdk/http/api-service", "cw-sdk/api/services/ams/SecurityService", "jquery.fileupload/tmpl", "jquery.fileupload/load-image", "jquery.fileupload/canvas-to-blob", "jquery.fileupload/jquery.iframe-transport", "jquery.fileupload/jquery.fileupload-ui", "jquery/jquery.colorbox"]

4..Copy the jquery.colorbox.js file from the zip in #1 to the site/Assets/jquery folder

5..XML: add this to the XML folders your users use. You'll have to add it to WOGeneral.xml, SRGeneral.xml, and GenInspectionEdit.xml for work orders, requests, and inspections respectively. Also edit Global.xml to add the reference to the .css file (check original post).

1. 1. I've attached a few examples
   2. The key is actually the await sleep line. I tried it without that but because the thumbnails take a bit longer to load than the rest of the page it doesn't work, even with the $(window).load at the top. You can probably shorten it to less than 3 seconds like I have now - I just left it that long as some field users have poor cell reception.

<label id="CustomCode" moveAfter="col1" type="plain">

     <text>

           <![CDATA[

           <script>

           $(window).load(function() {

             function sleep(ms) {

               return new Promise(resolve => setTimeout(resolve, ms));

             }

             async function demo() {

               for (let i=0; i < 3; i++) {

                 console.log(`Waiting ${i} seconds...`);

                 await sleep(i * 1000);

               }

               console.log("jquery window onload complete");

               $(".file").bind("click", function(e) {

                 var parentHref = $(this).closest("a").attr("href");

                 console.log("parentHref: ", parentHref);

                 if (parentHref && (parentHref.endsWith(".jpeg") || parentHref.endsWith(".jpg"))) {

                           e.preventDefault();

                           console.log("click");

                           $.colorbox({opacity:0.3, width:"600px", href: parentHref});

                 }

               });

               console.log('Done');

             }

             demo();

           });

</script>

           ]]>

 </text>

</label>

6..There are a lot of folks better at javascript than I am on these forums. Feel free to improve this! You can add support for other file types by editing this:

if (parentHref && (parentHref.endsWith(".jpeg") || parentHref.endsWith(".jpg"))

I'm still working on adding arrows to make it work like gallery.