777jogo.com- the top and most reliable online casino games platform.Claim Your Free 999 Pesos Bonus Today

Resolved lionelst
(@lionelst)

8 months, 2 weeks ago

Hello,

I am building a website to display some paintings and wanted to create a virtual gallery like in a museum and display the paintings in some empty frames.

I understood it was possible to do something like that with this plugin.

https://rextheme.com/virtual-art-gallery-in-wordpress/

https://rextheme.com/docs/wp-vr-customize-hotspot-icons-and-color/

I don’t have the premium access and I don’t know if it’s the reason why I don’t succeed to make it work or if I missed a step.

I’ve uploaded a picture of a museum with empty frame and I’ve created a hotspot pointing on the empty frame. I can well see the “i” icon and when I click on it I can see the picture.

Then I’ve added a custom css

.Painting1{
height:26px;
width : 26px;
background:
url(“https://eagle-artgallery.com/wp-content/uploads/2021/08/eagle-1450672_1920.jpg”) no-repeat center center / auto;
border-radius : 12px;
}

and I’m calling the class in Hotspot Custom Icon Class

But unfortunately the icon is staying a white i circulated in black.

Thank you in advance for your feedback and help

Lionel

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Support Fatema-Tuz-Zohra Nabila
(@nabila98)

8 months, 2 weeks ago
Hello Lionel,

Thank you for reaching out. It sounds like you’re looking to customize the hotspot icons in your virtual gallery using custom CSS. Let me guide you through the process to achieve this:
1. Choose an icon of your choice on your website.
2. Use the icon URL to prepare the following code snippet:
.custom-icon {
height: 26px;
width: 26px;
background:
url(“your image URL”) no-repeat center center / auto;
border-radius: 12px;
}

Here, replace "your image URL" with the URL of the icon you’ve chosen. Adjust the height, width, and border-radius values according to your preferences.
1. Go to your WordPress Dashboard > Appearance > Customize.
2. In the Additional CSS section, paste the code snippet you prepared in the previous step.
3. Save or Publish the changes.
4. Next, go to the Tour you created and navigate to the hotspot settings of the hotspot for which you want to use this custom icon.
5. In the Hotspot Custom Icon Class field, input the name of the class you used in the CSS snippet. For example, in this case, it would be custom-icon.
6. Save or Publish the tour.
7. Finally, embed the tour on a page to see that the hotspot icon has been replaced with your custom icon.
These customizations are specific to each hotspot, so you’ll need to repeat the process for any additional hotspots you want to customize.

I hope this helps! Let me know if you have any further questions or need additional assistance.

Best Regards,
Thread Starter lionelst
(@lionelst)

8 months, 1 week ago

Hello,

Thank you very much for your feedback.

It worked well when I’ve published it and saw directly on the live website.
In the preview it was not visible so I thought it was not working.

For what I want to do it’s still a little complex to do it that way : I wanted to attach as icon a picture of a painting which will fit in a empty frame of picture of a museum. And here if I start to zoom in or out the size of the “icon” is not adapting so then the painting looks going out of the frame or too small for the frame.

I understand the best use of the pluggin is then I should place the paintings in a room and take a picture of the room and then I can move around with the pluggin.

Thank you very much for your support.

Best regards

Lionel

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Display Hotspot has picture’ is closed to new replies.