Masonry Gallery with Lightbox - Possible? - Support | Kriesi.at

Tagged: Lightbox, masonry, slideshow

Viewing 30 posts - 1 through 30 (of 31 total)

1 2 →

Author

Posts
June 19, 2015 at 8:31 pm #462111

slui
Participant

Hi,

I’m trying to have a lightbox show up when an image is clicked in a masonry gallery. Instead it takes me to the image. Is this possible? Please take a look at the link.

Thanks.

sl

June 21, 2015 at 2:21 pm #462352

Ismael
Moderator

Hey slui!

Thank you for using Enfold.

Please make sure that the Lightbox Modal Window is enabled. You can find that option on Enfold > Theme Options panel. And if you have the chance, please update the theme to the latest version, 3.2.1.

Best regards,
Ismael

June 21, 2015 at 7:07 pm #462386

slui
Participant

Hi Ismael,

Lightbox Modal Window is already enabled.

sl

June 22, 2015 at 11:48 am #462607

Ismael
Moderator

Hey!

In the masonry theme options, is the Image Link set to lightbox? If it is set but still not working, please try to deactivate the plugins.

Best regards,
Ismael

June 23, 2015 at 4:07 am #463120

slui
Participant

Hi Ismael,

The masonry gallery that I’m looking at/using is located under CONTENT and not under MEDIA ELEMENTS. The one under CONTENT does not have the lightbox linking option.

The reason I selected the masonry gallery under CONTENT is because I like the way it has the “Load More” effect. This version of pagination does not RELOAD the page like the one under MEDIA ELEMENTS.

Do you know of a way to replicate the same “look and feel” of the masonry gallery under CONTENT using the masonry gallery under MEDIA ELEMENTS?

Thanks.

sl

June 23, 2015 at 11:47 pm #463715

Josue
Inactive Moderator

Hi Samuel,

No that’s not possible because, in order to have pagination (numbered or load more) the content shown has to be some sort of “post” type content, the Masonry Gallery (Media) is built with simple images. So you’d need to rely on the Masonry element (Content), you can edit each Portfolio Item custom link to have these open as lightbox – http://screencast.com/t/rPrLkb0VBw0

Regards,
Josue

June 24, 2015 at 4:19 pm #464178

slui
Participant

Thanks Josue,

That seemed to work nicely. However, there are now 2 issues. The first is that not all the images are being displayed properly in the masonry grid. and secondly, it is pulling up images that are not within the category called “Hamilton Gallery” when you are in lightbox mode.

1. The gallery is also not showing the grid completely.

http://www.tiikoni.com/tis/view/?id=d887f13

2. After clicking “load more” and if you click on one of the images, a lightbox will show up. However, you will see that the lighbox will show more images than just the ones in the gallery. I’ve specified a specific category and here are the settings that I have used:

http://www.tiikoni.com/tis/view/?id=c33038c

Thanks

June 25, 2015 at 11:24 am #464537
Josue
Inactive Moderator
Hi,

Open /config-templatebuilder/avia-shortcodes/masonry_entries.php and look for line:
```
$items .= 	"<{$html_tags[0]} id='av-masonry-".self::$element."-item-".$entry['ID']."' class='{$class_string}' {$linktitle} {$markup}>";
```
Replace it by this:
```
$items .= 	"<{$html_tags[0]} id='av-masonry-".self::$element."-item-".$entry['ID']."' data-rel='masonry-".self::$element."' class='{$class_string}' {$linktitle} {$markup}>";
```
Regards,
Josue
June 27, 2015 at 2:22 pm #465288

slui
Participant

Hi Josue,

I’m concerned with this solution not being future-proof. Is there another way of doing this? Thanks.

sl

June 27, 2015 at 2:24 pm #465289
Josue
Inactive Moderator
Hi,

Did it work? you can do this to replace ALB shortcodes from a child theme.

Regards,
Josue
- This reply was modified 9 years, 4 months ago by Josue.
June 27, 2015 at 9:32 pm #465350

slui
Participant

Hi Josue,

I already have the ALB shortcodes implemented in the functions. I also copied the masonry_entries.php file into the child theme and made the change to the code.

Unfortunately, it did not work. When I click on an image after “load more” is clicked, I see 16 images instead of 10 images from the gallery. It is still including images from other gallery.

sl

June 30, 2015 at 4:11 am #466133

slui
Participant

Any thoughts to this?

June 30, 2015 at 3:57 pm #466543

slui
Participant

Anybody can respond to this?

July 2, 2015 at 11:08 am #467397
Ismael
Moderator
Hey!

Did you place the masonry_entries.php code inside the “shortcodes” folder? This code will check for the ALB elements in the “shortcodes” folder:
```
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
	$template_url = get_stylesheet_directory();
    	array_unshift($paths, $template_url.'/shortcodes/');

	return $paths;
}
```
This process is still not future-proof because we might add or fix codes on the original file that will then be ignored because you have an existing file inside the child theme folder. The best thing to do is to create a change log or a note about this modification in case you update the theme.

Regards,
Ismael
July 2, 2015 at 11:55 am #467421
Josue
Inactive Moderator
Hey!

In case anyone else has a similar issue, this was not necessary after all, the issue was related to the avia_activate_lightbox, the fix was in line 895 of js/avia.js:
```
groups			:	['.avia-slideshow', '.avia-gallery', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu'], 
```
Changed to:
```
groups			:	['.avia-slideshow', '.avia-gallery', '.isotope', '.post-entry', '.sidebar', '.main_menu'], 
```
Regards,
Josue
July 6, 2015 at 8:39 pm #469229
slui
Participant
Thanks Josue for this solution.

Is there anyway to make this future proof for the moment?

I copied the avia.js file with the modification and place it in the JS directory in the child theme and it did not work.

sl
- This reply was modified 9 years, 4 months ago by slui.
July 6, 2015 at 8:44 pm #469231
slui
Participant
In addition, I found out that the number of images shown in the lightbox is not reflected of the number shown on the screen at the time (before you press “Load More”).

See screenshot: http://www.tiikoni.com/tis/view/?id=2476473

The screenshot shows total number of pictures to be 6 when in reality there are 7 images on the page.

Thanks.
- This reply was modified 9 years, 4 months ago by slui.
July 6, 2015 at 10:51 pm #469285
Josue
Inactive Moderator
Hi!

Place this code in functions.php to load child js/avia.js:
```
// Replace avia.js
function change_aviajs() {
   wp_dequeue_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'change_aviajs', 100 );
```
Regarding the number that’s expected, that shows the current number of images found in that precise moment, the non-loaded one don’t exist yet, you can use the following CSS code to hide it:
```
.mfp-counter{
display: none;
}
```
Best regards,
Josue
July 7, 2015 at 6:26 am #469389

slui
Participant

Hi Josue,

If you look at the images on the page, you will see that the counter (from the lightbox) showing is one less than is actually being displayed on the site. There should 7 images in the lightbox and not 6. There are 7 images showing before you press the Load More button.

The other tip worked beautifully. Thanks.

sl

July 7, 2015 at 6:31 am #469394

slui
Participant

Gallery before lightbox – Shows 6 pictures at the moment
http://www.tiikoni.com/tis/view/?id=ec2a65e

Lightbox when clicked on a single image – Shows only 5 pictures to display.
http://www.tiikoni.com/tis/view/?id=f27b112

July 7, 2015 at 9:54 pm #469942

Josue
Inactive Moderator

Hey!

Can you pass me the link to that page?

Best regards,
Josue

July 7, 2015 at 10:44 pm #469971

slui
Participant

Sure…take a look at the private info

July 7, 2015 at 11:39 pm #469988

Josue
Inactive Moderator

Hi Samuel!

This item is not linking to a .jpg image – http://screencast.com/t/7etOfhLwaTHK

Regards,
Josue

July 8, 2015 at 12:25 am #470000

slui
Participant

Okay..it has now been resolved….thanks so much..

July 8, 2015 at 12:25 am #470002

Josue
Inactive Moderator

You are welcome, glad to help :)

Regards,
Josue

October 11, 2015 at 10:44 am #516912
DutchPixelDesign
Participant
Would love to do this, but can’t get it to work.

What I did. In my child theme I created a JS folder and then.

line 895 of js/avia.js:
‘groups: [‘.avia-slideshow’, ‘.avia-gallery’, ‘.isotope’, ‘.post-entry’, ‘.sidebar’, ‘#main’, ‘.main_menu’],’
Changed to:
groups: ['.avia-slideshow', '.avia-gallery', '.isotope', '.post-entry', '.sidebar', '.main_menu'],

Place this code in functions.php to load child js/avia.js:
```
// Replace avia.js
function change_aviajs() {
   wp_dequeue_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'change_aviajs', 100 );
```
October 11, 2015 at 10:52 am #516913

Josue
Inactive Moderator

Hi,

Can you post the link to your website please?

Regards,
Josue

October 11, 2015 at 10:53 am #516914
DutchPixelDesign
Participant
http://www.dutchpixel.nl

Simply just want to show images with categories. And when people click on the categories the images are sorting. When they click on a image it opens in a lightbox :)

Thanks in advance!
- This reply was modified 9 years, 1 month ago by DutchPixelDesign.
October 11, 2015 at 12:47 pm #516932
DutchPixelDesign
Participant
I’ve actually solved it! Thanks to this topic!

https://kriesi.at/support/topic/lightroom-in-portfolio-masonry-or-sortable-masonry-gallery/#post-361857

Open up /enfold/config-templatebuilder/avia-shortcodes/masonry_entries.php and change line 704 from this.

$this->loop[$key]['url'] = get_permalink($id);

To this.
```
$this->loop[$key]['url']			= wp_get_attachment_image_src(get_post_thumbnail_id($id), apply_filters('avf_avia_builder_masonry_lightbox_img_size','large'));
$this->loop[$key]['url'] = reset($this->loop[$key]['url']);
```
That will have the masonry element images open in lightbox instead of linking to the post.

But I’m actually looking for a more future proof update. Any idea’s?
October 12, 2015 at 11:55 pm #517771

Andy
Inactive Moderator

Hi!

glad it’s working for you!
Try this for a solution using child theme: https://kriesi.at/support/topic/is-it-possible-to-modify-files-in-enfold-child/#post-218226

Regards,
Andy
Author

Posts