-
Posts
-
Hi Guys,
Well there are lots of blog post out there dealing with this subject – but none that I could get to work within Enfold.
I see the natively Enfold is using jquery prettyPhoto
you can add “rel=”lightbox” to any < a href element and the lightbox works
So there must be a manual way of setting this up to work with a gallery
OR preferably
changing the Framework options AVIA Layout builder Gallery – to link from text or single image
so that my client can edit the gallery imagesany help woud be greatly appreciated
So I have created it manually…
[av_textblock ] <a rel="prettyPhoto[gal2]" title="photo 1 title" href="http://domain.com/_WORDPRESS/wp-content/uploads/2013/11/image_001.jpg">test lightbox text link</a> <div style="display:hidden;"> <a rel="prettyPhoto[gal2]" title="photo 2 title" href="http://domain.com_WORDPRESS/wp-content/uploads/2013/11/image_002.jpg"></a> <a rel="prettyPhoto[gal2]" title="photo 3 title" href="http://domain.com/_WORDPRESS/wp-content/uploads/2013/11/image_003.jpg"></a> <a rel="prettyPhoto[gal2]" title="photo 4 title" href="http://domain.com/_WORDPRESS/wp-content/uploads/2013/11/image_004.jpg"></a> <a rel="prettyPhoto[gal2]" title="photo 5 title" href="http://domain.com/_WORDPRESS/wp-content/uploads/2013/11/image_005.jpg"></a> </div> [/av_textblock]can you add a template option to the Avia Advanced Layout builder GALLERY to do something like this
Hi!
You can suggest new template elements here: https://kriesi.at/support/enfold-feature-requests/ and if more users vote for it we’ll look into it. Personally I think it’s not very intuitive to open a gallery by clicking on a single image especially because many themes/websites show slideshow controls or preview thumbnails of the gallery images. If these thumbnails are missing many users will probably miss the hidden gallery images.
Regards,
PeterHi Dude,
Thanks for the link – I will post there later!
I have a ul li list with icons
<li><a href=""><span class="icon"></span>Open Image Gallery</a></li>So this is not miss leading…
For now I have a work around for anyone else trying to do this.
Create the gallery
Create your TEXT BOX
this is and example <a href link
use the url of the first image from your gallery[av_textblock ] <a class="first_thumb lightbox " title="" href="http://domain/_WORDPRESS/wp-content/uploads/2013/11/image_1.jpg" data-onclick="1" data-rel="gallery-1">Open Image Gallery</a> [/av_textblock]Add the following to your child theme css style.css file
.avia-gallery {display:none; visibility:hidden;}The Gallery is…
1. hidden from the user – but is activated by the text link
2. Is visible in the AVIA Layout Builder and can still be editedcheers : )
I know this is an old thread, but just in case HuxburyQuinn is still notified of replys, thought it was worth a try…
Thanks for your help, however the code you supplied seems to open the first image in the lightbox, but does not include the other images within the hidden gallery created. Any ideas what i’m doing wrong?
Any advice is much appreciated.
Hi Birdster,
Looks like Enfolds have changed the way the associated gallery
data-relworks.Try this solution here:
https://kriesi.at/support/topic/triggering-lightbox-gallery-with-link/Or see if my popup content Shortcode is of any use
https://kriesi.at/support/topic/code-snippet-inline-post-content-popup-magnific-popup-shortcode/
Thanks HuxburyQuinn,
The first links seems to work fine, but isn’t as functional as your previous solution, as you cant populate a hidden gallery – which would have been a bonus.
I was going to try out your popup content shortcode – which sounds great and seems a well detailed tutorial for non coders like myself – however, before I start adding all the code, i did have two quick questions;
when publishing the popup contents page with the desired gallery element, will the popup link open the gallery as if it has already been clicked on (eg: in the lightbox) or , will it look like a gallery on a page (eg: big image with thumbnails below and still need to be clicked on)?
Also, do you add the shortcode straight into the text box with the link,
Or
do you add the shortcode into a code block and then add the html href into the text box with the link (eg: link_text)Thanks again for taking the time to help me,
Hi Bridster,
Q1. Popup content page – It will be a page with the gallery and then you will have to click again to open the gallery.
Q2. The Shortcode is entered not in a code block but just as text. switch from visual mode to text mode in the text editor.
see my tutorial here:enfolds (dot) huxburyquinn (dot) com (dot) au (/) 2018 (/) 02 (/) 28 (/) enfolds-content-pop-up
Hi,
Let us know if the solution above worked for you or you need additional help.
Best regards,
VinayHey Vinay,
I believe my issue is as sorted as it can be. Ismael’s work around in the link below achieves the correct result, but is not client friendly – due to the lack of any GUI.
https://kriesi.at/support/topic/triggering-lightbox-gallery-with-link/
As for HuxburyQuinn’s link, his code is awesome and his tutorial pages very impressive and detailed. Unfortunately, his content popup doesn’t quite solve my lightbox gallery issue – but i hope to utilise his popup pages elsewhere if possible, and believe it would be a great additional for a future enfold version.
I will look for a gallery plugin that offers a link directly to the lightbox modal – or use a freelance developer to set up some code to automatically pull in images from a media folder into Ismael’s solution. Either way, you can mark my question as resolved.
Thanks both.
Hi Bridster,
The original Manual workaround at the beginning of the thread still works.
If you do the following without STEP 1 – The text block HTML will still work, However, you won’t be able to see or re-edit the HTML after you have published. So do Step 1 First. That way you can re-edit the HTML in the Debug Window below the Layout Builder.
STEP 1
Add AVAI LAYOUT BUILDER DEBUG MODE code to you CHILD THEME functions.php file./*------------------------------------------------------------------------------- Avia builder debug mode -------------------------------------------------------------------------------*/ add_action( 'avia_builder_mode', "builder_set_debug" ); function builder_set_debug() { return "debug"; }STEP 2
On the page with the gallery add a mannual list of links to images in your media gallery.
Add an Avia Layout Builder TEXT BLOCK Element. Change from Visual to Text mode.
The trick here is to add rel=”prettyPhoto[gal2]” to the <a href
The First Image is outside of the hidden <div><a rel="prettyPhoto[gal2]" title="photo 1 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/2.jpg">test lightbox text link</a> <div style="display:hidden;"> <a rel="prettyPhoto[gal2]" title="photo 2 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/014.jpg"></a> <a rel="prettyPhoto[gal2]" title="photo 3 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/013.jpg"></a> <a rel="prettyPhoto[gal2]" title="photo 4 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/1.jpg"></a> </div>TESTED HERE:
enfolds (dot) huxburyquinn (dot) com (dot) au (/) lightbox-text-linkHi,
Thanks for sharing the steps that worked for you here. I’m sure it will also help others and it looks great!
Don’t forget to bookmark Enfold Documentation for future reference.
Thank you for using Enfold :)
Best regards,
Vinay
- The topic ‘Open Gallery from a link or sigle image’ is closed to new replies.