[Resolved] Making Image Gallery display with Light Box

[Author]

Posts

[theW]

Tell us what you are trying to do?
Hello,
This is an extension of a previous resolved support ticket:
https://toolset.com/forums/topic/create-custom-field-that-renders-as-an-image-slider-with-maximum-of-12-pictures/

I was able to follow the tutorial and successfully achieved all results required except the Lightbox Effect.
Currently there's plenty of plugins on my site already so I would like to integrate the Lightbox Effect with the "Shortcodes Ultimate" Plugin: https://wordpress.org/plugins/shortcodes-ultimate/

This plugin also provides a Short-Code to achieve the light box effect:

[su_lightbox type="iframe" src="" class=""]
[/su_lightbox]

My current code in my View Template looks like this:

<H3>Pictures:</H3>
[wpv-for-each field="wpcf-slider"]
<a href="[types field='slider' size='full' url='true' separator=','][/types]">[types field='slider' alt='%%ALT%%' title='%%TITLE%%' width='270' height='160' align='none' resize='crop' separator=', '][/types]</a>
[/wpv-for-each]

Could you please help me figure out how can I make this two pieces of code work together?

Is there any documentation that you are following?
Yes, almost all done, except Last Step (light-box) :
https://toolset.com/2017/10/adding-a-gallery-of-images-for-custom-posts/

Is there a similar example that we can see?
Yes, The slider under the video here:
hidden link

What is the link to your site?
hidden link

[Luo Yang]

Dear theW,

It is a compatibility problem with "Shortcodes Ultimate" Plugin, I am not familiar with it, could you describe detail steps to duplicate same problem, how do you setup the shortcode [su_lightbox], what is the expected result? is there any demo for it? I need to test and debug it in my localhost, thanks

[theW]

Thank you for your Reply Luo,

I haven't gotten any errors nor thought that they wouldn't be compatible. I'm just not a programer but I try.
Please see the 4 screenshots attached.

Screen Shot #1
Using Types, I added a Field Group and a new Custom Field (image) called "slider".
Ideally, I wanted it to be a slider, just like the sample right here:
hidden link (The slider under the video.)
But I'm satisfy enough with the current gallery like rendering.

Screen Shot #2
Using Views, I added the Image Short Code to my regular WP Posts Template.
This is the code:

<H3>Pictures:</H3>
[wpv-for-each field="wpcf-slider"]
<a href="[types field='slider' size='full' url='true' separator=','][/types]">[types field='slider' alt='%%ALT%%' title='%%TITLE%%' width='270' height='160' align='none' resize='crop' separator=', '][/types]</a>
[/wpv-for-each]

(The field above (slider) is a simple image field that is repeatable)

Here is where I need your help.
The "Shorcodes Ultimate" plugin gives the Short Code bellow:

[su_lightbox type="iframe" src="" class=""]
// (I know this second short code has to wrap the first code above some how)
[/su_lightbox]

Screen Shot #3
You can see that image values are entered in the post editor.

Screen Shot #4
The output it's a nice and even image gallery, but when as image gets clicked there is no Lightbox effect.

I guess my question is, where do I insert? :

[su_lightbox type="iframe" src="" class=""]
[/su_lightbox]

BELLOW? :

<H3>Pictures:</H3>
[wpv-for-each field="wpcf-slider"]
<a href="[types field='slider' size='full' url='true' separator=','][/types]">[types field='slider' alt='%%ALT%%' title='%%TITLE%%' width='270' height='160' align='none' resize='crop' separator=', '][/types]</a>
[/wpv-for-each]

[Luo Yang]

Thanks for the details, I am trying to duplicate same problem, will feedback if there is anything found

[Luo Yang]

Here is what I found, you can put the Types shortcode [types] into attribute "src" of shortcode [su_lightbox], for example:

<h3>Pictures:</h3>
[wpv-for-each field="wpcf-slider"]
[su_lightbox type="iframe" src="[types field='slider' alt='%%ALT%%' title='%%TITLE%%' size='full' align='none' ][/types]"] Open lightbox with web page [/su_lightbox]
[/wpv-for-each]

The su_lightbox shortcode is a shortcode of "shortcodes-ultimate" plugin, which is out the range of Toolset support, I suggest you follow their document to setup the shortcode [su_lightbox]
hidden link

You can also ask help from the author of "shortcodes-ultimate" plugin:
https://wordpress.org/support/plugin/shortcodes-ultimate

[theW]

Thank you so much for that piece of Code Luo.
I Copied and pasted to my Views Template.
Please see the results in the screenshot attached.

[Luo Yang]

As I mentioned above, you will need to follow their document to setup the shortcode [su_lightbox], for example you can use shortcode [su_lightbox] to wrap the Types image shortcode [types], like this:

<h3>Pictures:</h3>
[wpv-for-each field="wpcf-slider"]
[su_lightbox type="iframe" src="[types field='slider' alt='%%ALT%%' title='%%TITLE%%' size='full' align='none' ][/types]"] [types field='slider' alt='%%ALT%%' title='%%TITLE%%' width='270' height='160' align='none' resize='crop' ][/types] [/su_lightbox]
[/wpv-for-each]