XF 1.5 Lightbox bhavior modification

[Tom McIntyre]

Currently the lightbox navigates to the next image when the current content is clicked. It enlarges the image when the gadget in the upper right corner is clicked. I looked at the code and the JavaScript includes the image in its click objects for navigation. If that were removed and a transparent overlay were placed over the lightbox, could that be used like the upper right corner gadget is used to open the current image in its own tab?

That seems like a pretty easy thing to do but I am not up to building an addon to do it. I may experiment with just changing the javascript and the template to see how well it works, but I do not want to mess up our ability to install updates.

My associate @Bill Stuntz is lobbying to make it work like Wikipedia, but I think that would be a lot more work.

 

[Bill Stuntz]

Tom, I've asked for help about the lightbox behavior previously, and nobody here seems to know any way to modify its behavior. I'd be a happy camper if we could get rid of the stupid "click on the photo to make it go away and show me a different photo" behavior. If I want to see a different photo, I'll CLICK on a different thumbnail... or the next/previous arrows. There's a perfectly good "Next Photo" arrow on the screen. And the thumbnails at the bottom to select a different photo. We don't need the photo itself to be a Next Photo button that exactly duplicates the behavior of the REAL Next Photo arrow that's already visible. In every other context, clicking on a photo displays a higher resolution version of the same photo. IMHO, clicking on ANY photo ANYWHERE should display the same photo at higher resolution - assuming it's not already being displayed at the maximum available resolution. Displaying a small low resolution photo in center of the black lightbox or in full screen mode is pointless - no additional details become visible. It's like displaying a postage stamp in an 8x10 frame hoping to make it more visible. It doesn't help... you still need a magnifying glass to see the details.

 

[Tom McIntyre]

The lightbox display contains scaling css that reduces the size of the image. It still references the original image. If it were displayed in its own tab, it would be full size as uploaded.

I think you comments confuse the issue because Wikipedia uses a much more elaborate mechanism.

I just want the behavior of the arrow in the right corner to be transferred to a transparent overlay.

I will try doing that on our site.

 

[Bill Stuntz]

That would make me VERY happy! And the behavior I'm describing is exactly the way it worked when we were still running on vB. Except the bit about not bothering to change display modes when the photo is already being displayed at the highest available resolution. And if you can make that transparent overlay idea work, I'll NEVER mention it again. The current behavior drives me NUTS! I just CAN'T stop clicking an image to see it in more detail. And I cuss up a storm every time I have to click back to the previous image & click that tiny target up in the corner instead of the image itself to see it better.

I wonder if mentioning something that's BETTER in vB than it is in XF is a rule violation?

 

[Tom McIntyre]

In looking at the code, I noticed that the javascript checked the clickable screen elements and used a ternary function to either go backward if the clicked object had the id LbPrev or forward if it was anything else. Since I wanted it to be backward on LbPrev and forward on LbNext with the image being displayed in a new page for anything else, I decided I could just change that ternary into a switch.

The only trouble is that I am not very good at coding and it is not working. I added an nawcc js folder and installed the modified lightbox in style that only I use for testing. Here is my replacement javascript.

        /**
         * Handle navigation clicks
         */

        $('#LbPrev, #LbNext, #LightBox .imageContainer').click($.context(function(e)
        {
            e.preventDefault();
            switch ($(e.target).closest('.imageNav').attr('id')) {
                case 'LbPrev': this.shift(-1) 
                break;
                case 'LbNext': this.shift(1) 
                break;
                default: window.open(imagesource,"_blank"); 
            }
            return false;
        }, this));

This is the original logic.

/**  
* Handle navigation clicks  
*/ 

$('#LbPrev, #LbNext, #LightBox .imageContainer').click($.context(function(e) 
{
 e.preventDefault(); 

this.shift($(e.target).closest('.imageNav').attr('id') == 'LbPrev' ? -1 : 1); 

return false; 

}, this));

Could someone tell me if I am making some kind of rookie error here? As I said, I barely understand this and have written very little javascript.

 

[Tom McIntyre]

I finally got this debugged (a little) by using Opera. Chrome does not handle the javascript console quite as nicely. It was not working because I was not defining the target url properly.

This code actually seems to work.

        /**
         * Handle navigation clicks
         */
        $('#LbPrev, #LbNext, #LightBox .imageContainer').click($.context(function(e)
        {
            e.preventDefault();
            switch ($(e.target).closest('.imageNav').attr('id')) {
                case 'LbPrev': this.shift(-1); 
                break;
                case 'LbNext': this.shift(1); 
                break;
                default: window.open($image.attr('src'),"_blank"); 
            }
            return false;

        }, this));

Any comments are welcome.

 

[Bill Stuntz]

Tom, I'm a happy camper now. That's got it! It's the solution I've been looking for for months!