Add a rotating image with icon/text

Hey there! I've integrated jQuery reel into my website to showcase a 3D view of a site in London. You can see an example here.

Now, I'm looking to spice things up by adding some interactive icons and text to 5 specific locations on the images. While I know how to do it for one image like shown here, I'm not sure how to make them move along with the background as the user navigates through the different images. There are about 40 images in total.

If anyone has any ideas or suggestions, I would greatly appreciate the help! Thanks

javascriptjqueryhtmlcss

Answer №1

Automating this process isn't available as of now. The animation is created using a sequence of images that may not be directly related to each other.

The first step would involve mapping the coordinates for each individual image.

Next, you would have to detect when the image is being switched and adjust the icons accordingly. As far as I know, there might not be a plugin that supports this functionality.

There is an example where this technique is used here, but it seems like they are only using a single image in that case.

Answer №2

I successfully completed the task using detailed annotations.

You can find all the details in the official documentation.

$('#reel-image')
    .reel({
        images: 'sitePlans/<%=siteID%>/###.png',
        frames: 20,
        speed: 0,
        annotations: {
            'example':
            {
                x: [286,350,400,450,500,550,600,650,700,750,800,850,900,950],
                y: [187,150,100,150,100,150,100,150,100,150,100,150,100,150],
                link:
                {
                    text: 'This is an example', target: '_blank',
                    href:'#'
                }
            }
        }
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I submit my form in Django, the data does not get added to the database

My current project involves creating a contact page for a website using Django. The goal is for clients to enter their information, which should then be submitted to the database. Even though the form is submitting without errors and the project runs smoot ...

pythonhtmldjangodjango-forms

What is the method for including a JavaScript file at the bottom of the </body> element in GatsbyJS?

I'm a newcomer to React and Gatsby and I'm looking for assistance on how to add JS at the bottom of a GatsbyJS site. I'm having trouble finding where to place the script since there is no index.html file with </body> in my /src folder. ...

javascriptreactjsgatsby

This code encountered an Uncaught SyntaxError due to an invalid or unexpected token

Hey there, I've been struggling with an Uncaught SyntaxError: Invalid or unexpected token issue whenever I try to click on the edit or delete button. Can someone please help me figure out what's wrong with this code? I've spent hours looking ...

javascriptjqueryajax

Navigating through props outside a class component in React

I'm struggling to grasp how I can access props that are defined outside of a React class component. In the code snippet below, all props are clearly outlined except for this.props.checkboxArray, which is currently throwing an error "cannot read prope ...

javascriptreactjsreact-props

A secret form input unexpectedly triggers the expansion of a table cell in IE7 (see image)

I've encountered a strange issue where a form inside a table cell with hidden inputs causes the cell to expand in IE7 once there are more than one hidden input present. Here is a screenshot showing the problem: Here is the HTML code: <table bord ...

htmlcssinternet-explorercross-browserinternet-explorer-7

Resize event of an Angular2 application within an iframe has been triggered

My current project involves embedding an Angular2 application within a Liferay portlet using iframes. The Liferay tomcat server is hosted on a different domain than the Angular2 application, and I am facing challenges with dynamically resizing the iframe b ...

javascriptangularjsangulartypescriptiframe

Combine various form input values with a specific name into a single array using Node.js with the npm forms package

Despite my efforts, I am struggling with a seemingly simple task. Even after scouring through Stack Overflow and various documentation, nothing seems to work, prompting me to seek help here. My goal is to handle an HTML form (templated through JADE) and s ...

javascriptarraysnode.jsexpress

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

I have integrated the weather.js library into my HTML file by adding the necessary imports: <script src="js/current.js"></script> <script src="js/sugar.min.js"></script> <script src="js/weather.js"></script> <script ...

javascriptjqueryhtmlweather

Reasons for Choosing the "*" Selector Over the Body Element

While I was researching the significance of the * sign, I discovered its meaning. But I couldn't help wondering why we don't utilize the body element instead, which would select all elements within the body element. ...

htmlcsscss-selectors

The node.js application claims to be registering users, but the MongoDB database is not actually creating new user profiles

I'm having an issue with MongoDB where it's not creating a new database and collection when the application registers something, even though it shows that data is posted correctly. The connection string for MongoDB contains sensitive information. ...

javascriptnode.jsmongodb

Utilizing the 'as' controller attribute in external JavaScript files

I have a JavaScript mapping component that includes a map and I want to customize the color based on user preferences set in an Angular 1.5 'as' controller. Here is an example of my controller code: app.controller('PreferenceController&apo ...

javascripthtmlangularjs

Show the data received from an Ajax request in an input field

How can I show an ajax response in an input field? Thank you! ...

jqueryajax

What solutions are available for resolving the issue of automatic next click not working in the antd date time range

When I try to change the datetime in my Ant Design date time range picker, the month starts changing continuously. The initial selection works correctly, but subsequent changes trigger this issue. I managed to replicate the behavior here. Below is the co ...

javascriptreactjsantd

Tips for avoiding the selected color from changing when refreshing the browser

Excuse my English proficiency... I have implemented a feature on my website that allows users to change the colors of the site based on their selection, and it is working well. However, the issue I am facing is that when the browser window is refreshed, ...

javascriptjqueryhtmlcssbootstrap-4

Tips for integrating a template generated by webpack into Laravel

I am currently working on a Laravel project and have incorporated a third-party HTML template that utilizes webpack and Laravel mix to compile assets. Is there a way to import this HTML template into my Laravel project and have it compiled within the pro ...

javascriptlaravelwebpacksasslaravel-mix

Unable to eliminate the margin on the right side

I can't seem to get the width of my whole page to stay at 1200px. Every time I set the html or body width to 1200px, Chrome web dev tools shows it as around 1300px with a wide right margin. I've tried adding extra code based on similar posts that ...

htmlcss

Can data sent to unauthenticated (angularFire) clients in firebase be limited or restricted in any way?

Using angularFire, I am fetching data in my project: angular.module('FireApp', ['firebase']) .controller('Document', function($scope, $routeParams, angularFire){ var url = "https://my-account.firebaseio.com/test" + "/" ...

javascriptangularjsfirebaseangularfire

Transferring an Array into an Object within an Object Using Angular

I'm currently diving into Angular and I decided to tackle angular.copy with a simple example. My goal is to create an Object using a Service, and then create a new Object that only contains certain elements from the original Object. Check out the ful ...

javascriptarraysangularjsangularjs-ng-repeatangularjs-factory

What is the best way to retrieve data from a map function in a React component?

Recently, I've started learning React and decided to build a shopping cart using it. My goal is to take the data of selected items from the store and send it to the server. Below is the code I've been working on: import React,{Component} from &a ...

javascriptreactjsecmascript-6

Is there a way to automate the loading process when a file is uploaded to an HTML input field?

How can I upload a file via Ajax post in HTML without clicking the button? Currently, my code only works after clicking the bootstrap button. My current implementation is as follows: $(document).ready(function () { $("#but_upload").click(function () { ...

javascriptjqueryhtmlajax