Coding using two Jquery

Design help Custom code
1

Hi everyone !

I would like to insert an interactive picture that I’ve made.
here you can see what is supposed to look like : http://pierrecharles.net/victor/

I’ve been trying to copy the code into a block “imageprojet50” that I’ve made ( http://ca-va-faire-du-bruit.com/projets/totem. )

But it isn’t working.

I think the reason might be because I’m calling an other version of Jquery.
Do you think of a way to insert my image and the cote into a block ? or maybe to make possible two Jquery co-exit on the same page ?

Here is the link of the code of the image I would like to insert :

I am not really familiar with coding so, any advice would be appreciated !

2

why not just create an animated GIF ?

3

Hi thank you for your answer. I think it won’t be possible using a gift. The images are loaded with sound, hover and click interactions…

Le 7 janv. 2017 ? 19:49, “Revolution” <webflow1@discoursemail.commailto:webflow1@discoursemail.com> a ?crit :

    Revolution<https://discourse.webflow.com/users/revolution>

January 7

why not just create an animated GIF ?

4

hi, I tried to change the code in order to use two Jquery. Using i$, but still it doesn’t work… I someone can help.

Here’s the new code : https://code.empreintesduweb.com/11285.html

and the link where it should appear : http://ca-va-faire-du-bruit.com/projets/totem

Thx!

5

Stacking images:
If you only need to stack 2 pictures on hover, just layer 2 pictures:
in one container with position relative, place 2 container with position absolute. Each of them contains a layer of your picture. On the second layer set the opacity to 0, but on hover set it to 100.

Playing sound on click:
You need to code a bit to achieve this. Take a look at some sound libraries for example GitHub - goldfire/howler.js: Javascript audio library for the modern web.
If you’re not into coding that may take some time for you to figure it out.

6

Thx for answering, but I might be a little bit complicated that just 2 pictures. I created many map zones on those pictures…so if I can just re-use the same code, it will be easier for me ! (have a look of what I am talking cliking on the case of the totem : http://pierrecharles.net/victor/ )

7

I see, you probably just need to copy your code into the bottom section in the custom code of your page. You can find it in site settings.

8

yes, I tried but it is too long. Too many characters, any ideas ?

9

You need to host the script on external server and link it in the custom code.
For example you can upload it on GitHub and use RawGit service to get link to your script.
Then you need to link it in the script tag, for example
<script src="https://cdn.rawgit.com/maciejsaw/tooltipster-for-webflow/master/tooltipster-for-webflow.js"></script>

You can also google for other free solutions for free script hosting, free CDN etc.

10

I managed to generate this link: <script src="https://cdn.rawgit.com/Mau-mo/TO/master/index%203.html"></script>
but after putting it in the custom code it doesn’t appear…haha I struggle a lot for this thing !

11

Now that the code is in Github, some one could figure out why it doesn’t appear on my page ?
I attached the location where I put it.

1435×775 69.9 KB

12

Custom code only runs when published or exported

  • not at design or preview time.

See the “white message” is displayed for the html embed ?

13

Yes but it still don’t appear on the website:
http://ca-va-faire-du-bruit.com/projets/totem

Strange because it works well on this website : http://pierrecharles.net/victor/

14

Maybe I’m not understanding correctly.

Embedded code will never appear on previewed site.

This is live site… not a preview
http://pierrecharles.net/victor/

15

Ok, I’ll try to re-formulate,

the image I coded doesn’t appear like it should. cf the http://pierrecharles.net/victor 's site