[SOLVED] How to make Image field have modal popup of full sized image

Hi,

On a user's profile we would like to have 2 alternate photos display as thumbs and when you click on the thumb the full sized image opens in a modal window.

See this profile:



It is the 2 images on the right that we would want to open in a modal window when clicked. We also don't want the default 'no image' photo if there isn't an image available for either of these image fields.

I used a new tab to display these 2 image fields on the right.

1. How could we go about making the default 'no image' not used for these fields?
2. How can we have the full image open in a modal window when the thumb is clicked?

Thank you.

You can change the default image for each image field individually by editing the field in CB > Field Management under Parameters > Image Display.

As far as a modal window that's entirely up to you. We've no built in support for that for image fields and no plans to support such a feature for image fields. You'll need to write custom jQuery to open them as a modal window or try using a 3rd party extension if any are available. You can load custom jQuery on profile using CB Auto Actions and its Code action on the before or after profile display triggers.

Hi Kyle,

Thank you.

Is there anywhere that Auto Actions are explained, how to set things up?

I installed rokbox plugin which does modal popup for media. What I need is to add:
<a data-rokbox href="imagelink">image</a> to get the modal link to work.

The code right now has the code to display the image so I need to add: <a data-rokbox href="imagelink"> before it and </a> after it.

So, I tried to setup a Auto Action for this, but now I am not even getting the image to display anymore. I used onBeforeUserProfileDisplay set the Type to Field and Access to Everybody. My field is called cb_headshot2 so made the condition cb_headshot2 not empty. Here is how I set my actions:



Now when I look in the frontend the whole tab is empty. Is there a way to add this code around the image using the Auto Actions or do I have to have a function to do this?

Thank you.

stuntlist wrote: Hi Kyle,

Thank you.

Is there anywhere that Auto Actions are explained, how to set things up?

...

On our Youtube channel, there are many tutorials:
www.youtube.com/user/Joomlapolis
(scroll right)

Including 5 tutorials videos for CB Auto Actions in this playlist:
www.youtube.com/playlist?list=PLp0puRITgC7McQcw0Sli1qfSUQGwmflzi

Hi,

I watched the videos, but they don't help what I am trying to do.

The image field displays as an mage location. See the prefix and suffix that I setup in the screenshot provided previously. Why is nothing being displayed now?

Where is the documentation for what var1, var2, etc. mean? I would like a pointer to the Auto Action written documentation rather than videos.

Thank you.

I don't recommend doing what you're trying to do with CB Auto Actions at all. That will break an images ability to load as the database value is used as the image path. You need to use the Layout parameters. Within CB > Field Management edit your field then under Parameters > Layouts set Profile Value Layout to the following.

Where is the documentation for what var1, var2, etc. mean? I would like a pointer to the Auto Action written documentation rather than videos.

Each trigger has different variables. So the var1, var2, etc.. entirely depends on the trigger used. This isn't something so easily documented, but we do have the below that at least gives you the original names of those variables.

www.joomlapolis.com/documentation/279-community-builder/tutorials/18358-using-cb-triggers