you could use custom css in a media query to not display the footer and caption at certain device widths.
I was thinking of something like that, but then how would I know the right width? What I’m actually attempting to target it a mobile device (with a small screen) in landscape mode. It’s more than just width.
Also I gave it a quick try, and I couldn’t find a way to hide the footer or caption in CSS.
Would this require using PHP Plugins?
you should be able to hide them with css.
are you using the browser inspector to locate and target the proper selectors?
You can google device widths for various devices and then use the width that will cover them all.
are you using the browser inspector to locate and target the proper selectors?
I know the target, but haven’t found the css magic to remove captions or footers.
For example, changing .fancybox-caption to visibility: hidden and adding display: none hides the caption, but doesn’t return that space to the “stage” for the image.
Seems like the sections are calculated and coded into the html/css before the page is rendered. So then modifying a portion after the page is rendered doesn’t work.
device widths for various devices and the use the width that will cover them all.
But the problem is actually height, right?. When the phone is held in landscape, it’s got plenty of width. In my example, something like 2x the width of the photo. But due to the limited height the image is scaled accordingly.
Let’s go back to the problem before venturing down this path.
How can we increase the available width (height actually) for photo presentation in Pangolin?
display:none; should work. Make sure you’re targeting any containing element. And your css may need to be more specific. In other words, the default css may use a more specific selector, which would take precedence.
Image width is going to depend on the height available for the vertical dimension of the image.
I don’t think that the Fancybox sideshow that Pangolin uses canhide browser elements, like the url address bar.
Make sure you’re targeting any containing element
.fancybox-caption is the outer div holding the caption. Setting display: none on that hides that element. It does not return the space to the area used by images.
The problem is how .fancybox-content (also within the stage, above the caption) has inline styles hardcoding a specific height and width.
Try it, on any Pangolin slide show. Let me know how to grow the image size to fill the new space after removing elements.
Hiding the browser’s elements, like the address bar or tabs, is outside of what CSS could possibly to. That would need some JavaScript. But I don’t know how to add JS to Pangolin’s slide show, and add a button to the Pangolin UI (such as a zoom option). Before even trying that, I think I’m hacking too much on Pangolin and venturing into the weed, heading off a cliff.
try this selector for the caption. It’s more specific and includes the overall container
.fancybox-caption-collapsible .fancybox-caption
try this selector for the caption
It’s the same result. This does hides the caption, but it does not make the images taller. The image height and width is coded as an inline style. Simply hiding the caption doesn’t effect the size of the image.
there’s more that can be done with css. I was able to make the images taller,but they were expanding to fill a space that was taller than what was visible, essentially cropping the image.
There may be other things that can be done to mitigate that and other issues I ran into but I didn’t want to start going down that rabbit hole.
And some of it might be tied to Fancybox’s javascript code too. And know very close to nothing about that.
Unless you’re clever with javascript and css (or someone clever happens along), I think you’re going to have to live with what Fancybox does.
Fancybox does have a Full Screen button that appears on desktop browsers but not on mobile devices. There was a discussion about that here. That might point you in a direction.
I give up on Fancybox creating larger images. It seem to have a zoom option, but I don’t see how to make that work.
But the two parts of what I’m looking for are available. 1) gridview in Pangolin, especially the Masonry view and 2) Galleria option for the slide show and viewing one image at a time.
It’s just that you can’t have both at the same time. 
Yep. Galleria does not come with a grid option and Fancybox removes the zoom option for mobile.
Galleria does have a thumbnail strip, but it does take up space on the screen.
I’m adding a strong feature request. If there were only one thing I could get, I would like Galleria for single image viewing and gridview in Pangolin.
I don’t think those two species can mate 
But there absolutely a way to have a grid view for thumbnails (like the Masonic layout) and a large/full screen presentation of images (like Galleria).
Yes, but they are two different products, most likely with incompatible code.
The grid views come from Fancybox and I really doubt there is a way to call a specific large image from a thumbnail in Fancybox to open in Galleria.
I seem to have caused confusion. I’m not asking to change fancybox or galleria necessarily, or trying to integrate them. I’m asking for a gridview that has a large single image presentation. This seems very doable.
Isn’t this the same Fancybox in BL?
When I view their demo on my iPhone it looks great. In landscape mode when I open an image, it’s full screen (just like I want).
Galleria implementation in Backlight has reached its natural conclusion. Development of Galleria itself seems to have stalled.
The current version of Galleria, 1.6.x is two years old, and contains only very minor changes compared to the 1.5.7 version; before that, 1.5.7 was untouched for two-and-a-half years.
Galleria is jQuery based, and jQuery is out-of-fashion, and so I fully expect that library not to receive any more attention, nor am I inclined to give it any of mine.
Our implementation already has a grid view of thumbnails. It’s one of the options. You can see it here:
I’m willing to start modifying Fancybox to work like the demo. It looks like it does what I’m looking for.
I just took a quick look at BL. Is the code located in /pangolin-core/? Which file(s) of Fancybox are used? Where does BL configure Fancybox?
With a few hints to get me started I think I can make it work.
I tried making a quick change to jquery.fancybox.js but didn’t see it taking effect on my iPhone (which debugging with Safari on my Mac).
As a rule, we don’t offer support for hacking Backlight’s core modules. Our expectation is that users should implement their coded customizations via the backlight/custom folder, and using the provided extensibility features (PHPlugins, custom stylesheets, etc.).
pangolin-page loads the Fancybox script for every type of page, with minimal customization for Backlight. And so, if you want to create a custom Fancybox implementation, then do not hack Backlight’s core modules, and do not use pangolin-album (which heavily customizes Fancybox for Backlight).
Instead, use Galleria or Theater as a base, use PHPlugins to completely replace the image loop, and then also use PHPlugins to initialize your own Fancybox configuration. There’s already an example, “Create a custom image loop for albums”, in the PHPlugins sample file.