Link to open gallery

Resolved Jack
(@grabgooglesgoogles1)

6 years ago
Hi!

I’ve implemented the below code to create a button link that opens the gallery:
```
<div style="display:none;">
[foogallery id="951" template="thumbnail"]    
</div>
<div style="font-size: 18px; color: #231f20; text-align: center; background-color: #FFFFFF73; margin-left: 32%; margin-right: 32%;">
<a style="color: #000000;" class="foobox" rel="lightbox[951]" href="http://andreascanuarte.com/staging/wp-content/uploads/2019/10/FOTO-1-a.jpg" >PINCHAR AQUÍ</a>
</div>
```
The href references the first image in the gallery. The problem is that when the gallery opens that image pops up, but when I scroll right the same image pops up again. It’s like the original image is a placeholder/featured image before starting the gallery. You can see the example on the website to see what I mean, essentially it’s like the image appears twice in the gallery.

What would you recommend to stop this happening?

Thanks in advance,
Jack

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter Jack
(@grabgooglesgoogles1)

6 years ago

I’ve been trying to look into this further but am really struggling.

For a bit more information, targeting (a href) the first image of the gallery seems to add that image as an additional image at the end of the gallery (despite it also being image number one).

I’ve also translated the website to another language (English) and unfortunately on the English version it doesn’t even render the image (“could not load the item” comes up).

Any help you can provide would be dearly appreciated!
Plugin Author bradvin
(@bradvin)

6 years ago
hey @grabgooglesgoogles1

By adding rel=”lightbox[951]” to your anchor, you are telling FooBox to group that item with the other items within the gallery, which is causing the duplicate.

Why not include some custom JS to force the lightbox to open for the gallery?

Something like this:
```
<a style="color: #000000;" onclick="jQuery('#foogallery-gallery-943 a:first').click();" href="#">PINCHAR AQUÍ</a>
```
Thread Starter Jack
(@grabgooglesgoogles1)

6 years ago

Hi @bradvin !

Thanks for your response 🙂

I’ve tried replacing with your solution but I get a 403 error when I try to save the changes:
https://andreascanuarte.com/staging/wp-content/uploads/2020/06/Screenshot-2020-06-10-at-00.02.54.png

DO you know what I’m doing wrong? Or if there’s something I have to configure on the server for the jquery to work?

Any help would be amazing, thanks again for all your work.
Jack
Plugin Author bradvin
(@bradvin)

6 years ago
403 is a forbidden response, probably due to you adding the onclick attribute into the HTML and your editor is probably not allowing it.

Are you able to add custom javascript to the site? Because then you can probably get to the same result by adding a custom data attribute to the the anchor and the in the custom JS you can read the data attribute value and open the gallery.

You can change your anchor to something like this:
```
<a style="color: #000000;" data-launch-gallery="943" href="#">PINCHAR AQUÍ</a>
```
And if you can add this custom JS to your site:
```
jQuery(function() {
  jQuery('a[data-launch-gallery]').click(function() {
    var gallery_id = jQuery(this).data('launch-gallery');
    jQuery('#foogallery-gallery-' + gallery_id + ' a:first').click();
  });
});
```
Thread Starter Jack
(@grabgooglesgoogles1)

6 years ago

Hi @bradvin,

I looked further into the 403 and it turned out to be Wordfence that was blocking it.

As a reference for future searchers, you can find how to put Wordfence into ‘Learning mode’ here. As soon as I did this, your original script was allowed to save.

Thanks again for your time and patience Bradvin! I’m really happy with how the gallery has turned out.

Regards,
Jack

Plugin Author bradvin
(@bradvin)

6 years ago

hey @grabgooglesgoogles1

Glad it all worked out. Please add a review for FooBox if you are happy with the plugin – that would really help us out.

https://ww.wp.xz.cn/support/plugin/foobox-image-lightbox/reviews/#new-post

Marking this as resolved

cheers

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Link to open gallery’ is closed to new replies.