Jump to content

Displaying larges images in posts - Lightbox


Jean-Philippe

Recommended Posts

Hi all,

First of all, I would like to point out that I've been a customer for a few months now and I think that IPB is an absolutely fantastic product.
I was able to convert our community site (www.astrosurf.com, which has been in existence for 20 years) without much difficulty.
With the API, we were able to convert our forums (40,000 members and about 1,500,000 messages) that were in a very old proprietary format.
By adding a few plugins and apps, our site works wonderfully well and its activity has increased significantly since we switched to IPB.

However, I still have a problem that I cannot solve.

We have a forum in which members post many high resolution photos (typically images that can be 3000x3000 pixels or more).

When a large image is posted on the forums, it is displayed as a thumbnail with the size set in APC (for us, the size is 2000x2000).
When a visitor wants to see the image in full size, he or she must:

  • Click on the image, which is then displayed in a lightbox
  • Move the mouse to display it as a magnifying glass with a "+" (otherwise, if you click on the image, you will return to the forum page display).
  • Click again on the image that appears in a new tab
  • Click again to display the image at 100% of its original size

In summary, to see an image in its original size, you have to click 3 times and between the 2nd and 3rd click you have to move the mouse. It's not ergonomic at all!

What we would like (myself and my 40,000 members) is that by clicking on an image published on the forums, it will be directly displayed at 100% of its original size (possibly in a new window or tab).

Unfortunately, I don't know how to do that!

In other words, my question is: how do I change the code of all images posted on the forums?
Currently the code is:

<a class=" ipsAttachLink ipsAttachLink_image" href=<ImageFile> data-fileid="xxx" rel="" data-ipslightbox="" data-ipslightbox-group="YYYY">
<img class="ipsImage ipsImage_thumbnailed" data-fileid="xxxx" src=<ImageFile> alt="ZZZZZ">
</a>

I would like to change this code to:

<a href=<ImageFile> rel="">
<img src=<ImageFile> alt="ZZZZZ">
</a>

Thank you for your help
Best regards
Jean-Philippe

Link to comment
Share on other sites

  • 7 months later...

Hi all,

I'm still searching a solution for forum images to be opened in their full size in less than FOUR actions (at this time, it needs 3 clicks ... ). In IPS 4.3 and previous versions.

In other words, I'm searching for a solution to open forum images directly in a new windows (= without the awfull Lightbox).

Read to pay for that ? ...

 

 

Link to comment
Share on other sites

1 hour ago, Jean-Philippe said:

I'm still searching a solution

Seems like you've been searching a long time for a solution. I'll try to help.

What I'm about to suggest might not be the most practical method as it's sort of a hack. It requires using jQuery and modifying templates.

First, you need jQuery to be enabled on your site. If it's not, you need to add the following to the the <head> section in globalTemplate

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Then you need to open the template: forums -> front -> topics -> topic

Add to the bottom of that template:

<script>
    $('.ipsImage.ipsImage_thumbnailed').click(function()
    {
    	$('a[data-ipslightbox]').each(function()
        {
          	$(this).removeAttr('data-ipslightbox').attr('target', '_blank');
        });
    });
</script>

Should this work as intended, all pictures posted in topics will open in a new tab when clicked on instead of opening it using lightbox.

If modifying templates is a big no no for you, then I could turn this into a plugin. However, I'm very busy so you would need to wait a few days.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...