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

7 years 11 months ago - 7 years 10 months ago #282485 by stuntlist
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.
Attachments:

Please Log in to join the conversation.

7 years 11 months ago #282505 by krileon
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.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

7 years 11 months ago #282554 by stuntlist
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.
Attachments:

Please Log in to join the conversation.

7 years 11 months ago #282560 by beat

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

Beat - Community Builder Team Member

Before posting on forums: Read FAQ thoroughly -- Help us spend more time coding by helping others in this forum, many thanks :)
CB links: Our membership - CBSubs - Templates - Hosting - Forge - Send me a Private Message (PM) only for private/confidential info

Please Log in to join the conversation.

7 years 10 months ago #282686 by stuntlist
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.

Please Log in to join the conversation.

7 years 10 months ago #282700 by krileon
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.

File Attachment:

File Name: img_field_linked.txt
File Size:0 KB


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


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Attachments:

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.249 seconds

Facebook Twitter LinkedIn