question

MOHAMEDASIKADAM-0268 avatar image
0 Votes"
MOHAMEDASIKADAM-0268 asked RaytheonXie-MSFT commented

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

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:
1) 1st I need to display in Html and Jquery- Code.
2) Dynamically get the data from SharePoint list (OnlineSpfx) and display .-Code.

office-sharepoint-online
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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.

0 Votes 0 ·

141364-image.png

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.


0 Votes 0 ·
image.png (15.0 KiB)

Hi @MOHAMEDASIKADAM-0268 ,
Could you confirm that you store image file in a document library or just store the url of img in sharepoint list please?

0 Votes 0 ·

Hi @MOHAMEDASIKADAM-0268 ,
would you please provide us with an update on the status of your issue?

0 Votes 0 ·

1 Answer

RaytheonXie-MSFT avatar image
0 Votes"
RaytheonXie-MSFT answered RaytheonXie-MSFT commented

Hi @MOHAMEDASIKADAM-0268 ,
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.





sample.txt (2.8 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @MOHAMEDASIKADAM-0268 ,
I am checking to see how things are going there on this issue.

0 Votes 0 ·

Hi @MOHAMEDASIKADAM-0268 ,
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

0 Votes 0 ·