[Closed] Making Image Gallery display with Light Box

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will answer your ticket in about 2.53 hours from now. Thank you for your understanding.

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.

Related documentation: Content Templates

This topic contains 6 replies, has 2 voices, and was last updated by  Luo Yang 1 week, 1 day ago. The support staff assigned to this topic is Luo Yang.

Viewing 7 posts - 1 through 7 (of 7 total)
Author
Posts
#577060

Tell us what you are trying to do?
Hello,
This is an extension of a previous resolved support ticket:
https://wp-types.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://wp-types.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:
https://www.asecureinvestor.com/

What is the link to your site?
http://projects.goodstewardservicing.com/

#577159

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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

#577966

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:
https://www.asecureinvestor.com/ (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]
#578053

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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

#578071

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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]
http://docs.getshortcodes.com/article/76-how-to-use-lightbox-shortcode

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

#578293

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.

#578396

Luo Yang
Forum moderator

Supporter languages: English (English ) Chinese (Simplified) (简体中文 )

Supporter Timezone: Asia/Hong_Kong (GMT+08:00)

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]
Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘[Closed] Making Image Gallery display with Light Box’ is closed to new replies.