[SOLVED] How to add images into a div

Help & Support
1

Hey buddy , Im also trying to do something as you guys did. If you could provide me your project link that would be really good. Also do you know how to add images in a div from external api? in play canvas

2

Hey @svmirshvh,

Try adding the CSS libraries to your page’s head in your script’s initialize method using something like the code below(the example below uses jQuery) -

$("head").append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" integrity="sha512-HqxHUkJM0SYcbvxUw5P60SzdOTy/QVwA1JJrvaXJv4q7lmbDZCmZaqz01UPOaQveoxfYRv1tHozWGPMcuTBuvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />');

This would add the Bulma CSS CDN to your project for example. To add jQuery to your project, you can use the “external scripts” section under your project settings(this will work for any JS CDN).

3

thanks for this buddy. also if you can help me out in adding images in img tag from an external api. will i have to add that as texture asset before using it in img tags?

4

Could you please explain this further? What external API are you using?

5

Im trying to fetch a list of image urls and title. how should i go about doing it? i have my rest api written in django

6

If you are adding image URLs to img tags in HTML, no they don’t have to be loaded as assets in PlayCanvas.

You just generate to create HTML elements that you add directly to the page dynamically.

If you can post an example project of what you are trying to do, it will help others give you more concrete information/advice/code

1 Like
7

hey @yaustar , Im trying to add hotspots on globe and on click of it i want to pop a div filled with that hotspot image and some information about it . so basically what im trying to achieve is pop a div on click of an 3d/2d playcanvas element and at the same time an ajax request to an external api to fetch info/image. How should i go about doing that. Im new on playcanvas with only few days experience considering i dont know how to attach a script to a 2d/3d element. Please help !!

8

Breaking down the problem:

  1. Detecting when the user presses a hotspot
  2. Add HTML elements to the page
  3. Show a HTML div
  4. Make an AJAX request for information and image

3 and 4 are not PlayCanvas specific and places like stackoverflow will help with that with example code.

If you can post a project where you have tried to this, it will really help us give you advice/code etc.

This page covers some areas really quickly (such as creating your first script): Your First App | Learn PlayCanvas

There’s also some from the community:

And also from a workshop that Joao did for PlayCanvas at the JS Web Game Dev Summit 2022 (we are looking to finish the workshop in the near future and posting on our channel)

1 Like
9

Thank you so much @yaustar for the resources. Sorry , i forgot to mention the link of my proj.
Here’s the link:
https://playcanvas.com/project/931137/overview/aimedis_webgl_ui

10

Where are the hotspots in the world to click on and what div are you trying to show/hide?

11

havent added the hotspots yet , but lets just assume on click of globe i want to pop a div . how should i go about doing that . Can you write the script for me for doing that? It’d be really helpful .

12

Here is an example of clicking on a hotspot to show a div with text content that is driven from the hotspot: https://playcanvas.com/project/933149/overview/f-hotspots-with-html

This is a combination of examples from Hotspots and HTML UI with some custom code on top.

13

Hey , Thank you so much @yaustar . You just solved my problem.