Topic: Juicebox gallery photo/video workaround

I am using Showkase with a Juicebox gallery. I know Juicebox does not support videos, but have a thought and am hoping you might be able to assist with a workaround. First let me briefly explain why I find it so important for both photos and videos to be shown on the same gallery (at least the previews). I do both drone photos and videos.

Showing just photos in a gallery, but saying in the copy that I do both is too easily overlooked.

Here is my initial thought. I would like to have a gallery with thumbnail previews showing photos  and the viewer will show the large image as normal. I would then also have a still image to represent a frame from the video showing in the gallery. This part would be easy to carry out. However, when selecting that thumbnail rather than just showing a large photo, it would instead be linked to a video (possibly opening in a new window). After viewing the short video, the new window could be closed and all of the preview thumbnail images for the Juicebox gallery would once again be visible. Any ideas to carry this out? ...or another idea so both the photos and videos can coexist in some manner?

Re: Juicebox gallery photo/video workaround

If you set imageClickMode="OPEN_URL" ('Main Image' options), then, when a main image in the gallery is clicked, the corresponding linkURL (entered on the gallery page's 'Images' tab) is opened in the specified linkTarget window.
This would almost certainly be the easiest way to set something like this up.
However, it would be the main image that would need to be clicked (not the thumbnail) and the linkURL web page would be opened in a new tab (rather than in a pop-up window).

If you've not got many sample videos to display, then perhaps you could set up a separate 'Basic' page and embed the videos into this page (instead of trying to incorporate them into your Juicebox gallery).
Here's a sample 'Basic' page in a demo Showkase site which embeds a couple of videos.

If you really want to have a video play in a pop-up window when a thumbnail is clicked, then try the following:
(1) Create a separate web page manually (not in Showkase) and embed your video into it by whatever method you like (HTML 5 <video> tag, YouTube embed, etc.).
(2) Upload your video's web page to your web server.
(3) Enter the URL to this web page as the corresponding image's linkURL (on the gallery page's 'Images' tab).
(4) Edit the gallery page in Showkase, click 'Source' on the editor's toolbar to enter source mode and add the following code to your web page.

<script>
  function openWindow() {
    window.setTimeout(function() {
      var index = jb.getImageIndex();
      var info = jb.getImageInfo(index);
      var url = info.linkURL;
      window.open(url, '_blank', "height=400,width=600");
    }, 500);
  }
  jb.onShowThumbs = function(showing) {
    if (showing) {
      window.setTimeout(function() {
        $('#jb-glry-id-0_thumb_0, #jb-glry-id-0_thumb_1').not('.bound').addClass('bound').click(function() {
          openWindow();
        });
      }, 500);
    }
  };
  jb.onThumbPageChange = function() {
    window.setTimeout(function() {
      $('#jb-glry-id-0_thumb_0, #jb-glry-id-0_thumb_1').not('.bound').addClass('bound').click(function() {
        openWindow();
      });
    }, 500);
  };
</script>

This example displays a pop-up window for the 1st and 2nd thumbnails in the gallery.
The id #jb-glry-id-0_thumb_0 represents the 1st image in the gallery (the internal numbering starts at 0 for the 1st image). You can change the thumbnails as required and extend this example to work for more thumbnails (each loading their own individual linkURL when clicked) if you like.

The code above uses the Juicebox-Pro API to check when a new thumbnail page is displayed (onThumbPageChange()) as the thumbnail you want to add the custom click handler to might not be visible when the gallery is initially displayed (it might be on a subsequent thumbnail page and might not initially be included in the Document Object Model). The click handler also needs to be added when the thumbnails are shown after being hidden (onShowThumbs(showing)). (The code also uses the API to fetch the image's linkURL.)

If you just had a single video per gallery, then you could hardcode the URL to the video's web page into a window.open command (and do away with the openWindow() function) but the code above will allow for multiple thumbnails to be selected (each with their own linkURL).

This is not a perfect solution by any means (a couple of short delays are required to ensure that things are in place) but it might at least point you in the right direction.

Re: Juicebox gallery photo/video workaround

Thanks, I will play around with these suggestions some to see what works best. In the meanwhile, please make note to the developers that with most DSLR's, smart phones and drones being capable of video, support for video would probably be a very well received feature.

Re: Juicebox gallery photo/video workaround

Thank you for posting your suggestion in the Showkase Feature Requests thread.
You could post it in the Juicebox Feature Requests thread, too, if you like (as it is perhaps more relevant to Juicebox than it is to Showkase itself).