Remove link from thumbnails in Portfolio Gallery - Support | Kriesi.at

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
January 23, 2014 at 12:15 am #213610

redpupmedia
Participant

Hello.
Using an Ajax Portfolio Preview, Display Preview Images as Gallery.
We want to prevent the thumbnails and big_thumb from being links. We disabled the lighbox per http://kriesi.at/documentation/enfold/prevent-image-or-link-from-opening-in-a-lightbox/ , but the thumbnails open the image file in a new window. We want to disable the link on the thumbnails and retain the mouse-over-to-fake-lightbox functionality. The thumbnails and big_thumb should not open or link anywhere, but simply display in the fake lightbox area.
Seems like it should be in /config-templatebuilder/avia-shortcodes/gallery.php around line 218… but I can’t remove the link without disabling the mouse-over.

January 23, 2014 at 3:44 am #213651
Ismael
Moderator
Hey redpupmedia!

Edit config-templatebuilder > avia-shortcodes > gallery.php, find this code on line 212:
```
$output .= "<a class='avia-gallery-big fakeLightbox $imagelink $crop_big_preview_thumbnail' href='".$link[0]."' data-onclick='1' title='".$description."' >";
							$output .= "	<img src='".$prev[0]."' title='".$title."' alt='".$alt."' />";
			 if($caption) $output .= "	{$caption}";
							$output .= "</a>";
```
Replace it with:
```
$output .= "	<img src='".$prev[0]."' title='".$title."' alt='".$alt."' />";
			 if($caption) $output .= "	{$caption}";
```
And this code on line 216:
```
$thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
```
Replace it with:
```
$thumbs .= " <img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' />";
```
Add this on Quick CSS to retain the cursor. Remove browser cache then reload the page.
```
.avia-gallery {
cursor: pointer;
}
```
Best regards,
Ismael
January 23, 2014 at 6:11 am #213705

redpupmedia
Participant

Thanks for the quick reply.

I’ve made the changes as described and the thumbnails are no longer links, but they are 80×80 images that are being stretched to 684×685 and do not display in the Fake Lightbox.
dev site: http://paradigm.redpupmedia.com

January 24, 2014 at 12:23 am #214209
Yigit
Keymaster
Hi!

Please add following code to Quick CSS as well
```
#top .portfolio-preview-image .avia-gallery-thumb img { height: 80px;
width: 80px;
}
```
Best regards,
Yigit
January 24, 2014 at 7:39 pm #214559

redpupmedia
Participant

Hi.

Thanks. That fixed the image size issue.
But the thumbnails are not displaying in the fake-light-box (big-thumb?).

January 25, 2014 at 6:47 am #214737

Ismael
Moderator

Hi!

Can you please give us the link to the page with the gallery? I don’t see the navigation on the home page.

Best regards,
Ismael

January 25, 2014 at 8:16 pm #214875

redpupmedia
Participant

Thanks.
Its on the home page. Under the Projects heading.
(this is a single page site; we have removed the navigation.)

January 26, 2014 at 3:49 am #214941
Ismael
Moderator
Hi!

Please reset the changes that we made then edit js > shortcodes.js, find this code on line 1007:
```
gallery.find('.avia-gallery-thumb a').eq( this.getAttribute("data-onclick") - 1).trigger('click');
```
Replace it with this code to remove the lightbox trigger.
```
gallery.find('.avia-gallery-thumb a').eq( this.getAttribute("data-onclick") - 1);
```
Edit config-templatebuilder > avia-shortcodes > gallery.php, find this code on line 218:
```
$thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
```
Replace it with:
```
$thumbs .= "<a data-prev-img='".$prev[0]."'><img data-rel='gallery-".self::$gallery."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url {$tooltip} src='".$img[0]."' alt='".$alt."' /></a>";
```
Last, add this on Quick CSS:
```
.avia-gallery-big .image-overlay.overlay-type-image {
	display: none !important;
}
```
Remove browser cache then reload the page a few times.

Regards,
Ismael
January 27, 2014 at 8:05 pm #215475

redpupmedia
Participant

Perfect!
Incredible support! Thank-you very much!
One last ?: I’m using a child theme, is it possible upgrade-proof these changes, as they were made directly in the parent theme?

January 27, 2014 at 8:16 pm #215478
Dude
Participant
Hi!

If you want a less invasive solution you can deactivate the links with css code – insert
```
.portfolio-preview-image .avia-gallery a{ pointer-events: none; } 
```
into the quick css field and this code should deactivate all gallery links without any additional theme code adjustments.

Best regards,
Peter
January 27, 2014 at 8:22 pm #215481

redpupmedia
Participant

Thanks Peter. That solution prevents the small thumbnails from displaying in the ‘fake lightbox/Big-Thumb’. I still want that functionality, but not the pop-over light box (fancy box).

The invasive option works perfect. I am just looking for a way to hook into that via the child theme to prevent update issues.

January 29, 2014 at 10:24 am #216286
Dude
Participant
Hi!

Unfortunately it makes no sense to overwrite the shortcode.js file with a child theme because we update this file very often. So if you want to solve this issue with a child theme you must choose the less invasive approach :)

You can try following css code – it will just affect the big image
```
.portfolio-preview-image .avia-gallery a.avia-gallery-big{ pointer-events: none; }
```
Regards,
Peter
February 11, 2014 at 4:50 pm #222295

lrobbins303
Participant

I think my case is similar. I have a ajax portfolio grid-gallery. I added this line to custom.css:
.portfolio-preview-image .avia-gallery a.avia-gallery-big{ pointer-events: none; }
which stops the big picture from displaying the lightbox.

On the thumbnails, I want to disable the lightbox and change the pointer to be an arrow instead of a hand. When you move your mouse over the thumbnail I still want it to display the thumbnail picture as the big picture. Do I need to make the changes mentioned in post #214941?

Thank you for your great support!

February 12, 2014 at 10:26 am #222663

Dude
Participant

Hey!

You could select the “Don’t show the images at all and display the preview text only” option: http://www.clipular.com/c/6453051829256192.png?k=5TIdSdjsRn87CQytVuQeUU4899A

By going this way Enfold will stretch the content area of the ajax preview to 100% width and you can use the new space to build your custom layout. I.e. use the gallery shortcode to build the layout/template you requested in your post (select “Use Lighbox” – “No, don’t add a link to the images at all”).

Best regards,
Peter

February 12, 2014 at 4:50 pm #222872

lrobbins303
Participant

Thanks for your support. I changed the the portfolio items “ajax preview images” to an “image list” (i only have 1 picture anyway). So when I use the ajax portfolio grid on my projects page, I want to disable the lightbox. Is there a line like the following that works w/ the “image list” option?
.portfolio-preview-image .avia-gallery a { pointer-events: none; }

Thanks again!

February 13, 2014 at 4:17 pm #223484
Yigit
Keymaster
Hey!

Please add following code to Quick CSS in Enfold theme options under Styling tab
```
#top .portolio-preview-list-image { pointer-events: none!important; }
```
Regards,
Yigit
March 5, 2014 at 5:59 pm #232830

linda838
Participant

Hi! I just wanted to say I am new to Enfold and I wanted this same functionality and your edits work brilliantly Yigit. This is a great forum topic, thank you!

I feel as if this topic should be highlighted as I imagine there are many users (for example the user who posted item #227928 on forum) who probably would like the gallery with thumbnails to perform without the full lightbox opening up on mobile browsers / ipads / etc. rather they would prefer to have the image appear in the “fake” lightbox window when you click on thumbnail.

Thanks for listening!
Linda

March 6, 2014 at 7:53 am #233084

Ismael
Moderator

Hi!

Glad we could help. You can request it here: https://kriesi.at/support/topic/enfold-feature-requests/

Closing the thread now.

Cheers!
Ismael
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Remove link from thumbnails in Portfolio Gallery’ is closed to new replies.