Display title, Image and description dynamically based on image click on Modal Popup

Question

Display title, Image and description dynamically based on image click on Modal Popup

MOHAMED ASIK ADAM 1

Hi All,

I have a scenario in which I need to display a modal popup based on user click. When user click on the image it should open the same image in small size with Title and description Dynamically. How to achieve this?
2 code scenario needed:

1st I need to display in Html and Jquery- Code.
Dynamically get the data from SharePoint list (OnlineSpfx) and display .-Code.

MOHAMED ASIK ADAM 1 Reputation point

2021-10-18T10:11:47.087+00:00

Please see the details of the image for your reference. If I click the image same image in small size with name and Department below and right hand side description should display with dropdown arrow.
MOHAMED ASIK ADAM 1 Reputation point

2021-10-18T10:12:33.99+00:00

Please see the details of the image for your reference. If I click the image same image in small size with name and Department below and right hand side description should display with dropdown arrow.
RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2021-10-19T02:05:34.687+00:00

Hi @MOHAMED ASIK ADAM ,
Could you confirm that you store image file in a document library or just store the url of img in sharepoint list please?
RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2021-10-25T07:59:31.133+00:00

Hi @MOHAMED ASIK ADAM ,
would you please provide us with an update on the status of your issue?

1 answer

Your answer

MOHAMED ASIK ADAM 1 Reputation point

2021-10-18T10:11:47.087+00:00

Please see the details of the image for your reference. If I click the image same image in small size with name and Department below and right hand side description should display with dropdown arrow.
MOHAMED ASIK ADAM 1 Reputation point

2021-10-18T10:12:33.99+00:00

Please see the details of the image for your reference. If I click the image same image in small size with name and Department below and right hand side description should display with dropdown arrow.
RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2021-10-19T02:05:34.687+00:00

Hi @MOHAMED ASIK ADAM ,
Could you confirm that you store image file in a document library or just store the url of img in sharepoint list please?
RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2021-10-25T07:59:31.133+00:00

Hi @MOHAMED ASIK ADAM ,
would you please provide us with an update on the status of your issue?

Answer 1

RaytheonXie_MSFT 40,471 Microsoft External Staff

Hi @MOHAMED ASIK ADAM ,
We can first create a div to store image and list data and it should be hidden as default. Then make a function change the properties of hidden on click. Here is my code for sample.
142397-sample.txt

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2021-10-28T09:19:58.977+00:00

Hi @MOHAMED ASIK ADAM ,
I am checking to see how things are going there on this issue.
RaytheonXie_MSFT 40,471 Reputation points Microsoft External Staff

2021-10-29T08:24:33.9+00:00

Hi @MOHAMED ASIK ADAM ,
Have you tried the solution I proposed?

If you have any questions or progress, you can contact me in time.

Looking forward to your reply

Have a lucky day!

Thanks,
Raytheon Xie

Share via

Display title, Image and description dynamically based on image click on Modal Popup

1 answer

Your answer