How to create a 3D rotating Image carousel?

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

How to create a 3D rotating Image carousel?

Post by Markus » Sun Sep 29, 2019 9:40 pm

Hello everyone,

Is it possible to build such a carousel with WebBuilder board equipment?

Image

Below the pictures there is an MP3 player.

Markus

User avatar
BaconFries
 
 
Posts: 4701
Joined: Thu Aug 16, 2007 7:32 pm

Re: How to create a 3D rotating Image carousel?

Post by BaconFries » Sun Sep 29, 2019 10:53 pm

Not exactly what your asking but maybe the following might be of interest.
https://www.wysiwygwebbuilder.com/carousel3d.html

User avatar
Pablo
 
Posts: 18398
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to create a 3D rotating Image carousel?

Post by Pablo » Mon Sep 30, 2019 6:03 am

I'm sorry, thee is no standard solution for this.
But you can use any third part script and add it via the HTML object.

alexmasss
 
 
Posts: 250
Joined: Mon Sep 28, 2015 4:25 pm

Re: How to create a 3D rotating Image carousel?

Post by alexmasss » Mon Sep 30, 2019 7:14 am


User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Mon Sep 30, 2019 8:13 am

Many thanks to all of you for your hints and tips.
So I will have to deal with the integration of foreign code (JS, CSS).

I keep my fingers crossed that it won't be too difficult and that there are no pitfalls. :)

My problem is that I don't come from the group of people who developed handwritten web code. I am a developer, but in regular programming languages. Therefore I use WebBuilder to abstract the core functions of web design.

So the way is a bit harder for me, because I don't know the paradigms and peculiarities of the individual components that have to work together for web design. :oops:

Markus

User avatar
BaconFries
 
 
Posts: 4701
Joined: Thu Aug 16, 2007 7:32 pm

Re: How to create a 3D rotating Image carousel?

Post by BaconFries » Mon Sep 30, 2019 10:13 am

When you say foreign code I take it you are referring to external scripts?. To use external scripts you can use the HTML Object See along with the File Publisher for any external scripts (jQuery, CSS etc) that maybe needed. Note not everything you see or think of (script wise) can be added to the program but suggestions can be made or requests for possible extension(s) asked. For extensions it is not possible to make them from paid (commercial) scripts as these cannot be shared due to copyrights etc but with that said if you have the knowledge you can make paid (commercial) for your own private use.

User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Wed Oct 02, 2019 12:11 pm

Well, I'm just trying to integrate this 3D carousel: https://3dtransforms.desandro.com/carousel

Image

The code for the carousel can be found here: https://codepen.io/desandro/pen/jxwELK

I have now created an HTML element in my project and inserted the corresponding HTML code.

Image

For CSS and JS I created two files with the corresponding content on the hard disk. The two files (CSS and JS) are integrated into the project with a FilePublisher.

Image

Image

Image

What do I still have to do to make these three components work together?

Image

Thank you very much for your help.

Markus

PS: I added now the following 2 rows between the page tags <head> and </head>:
<script src="3d-carousel.js"></script>
<script src="3d-carousel.css"></script>
But nothing changes.

PS2: I added the files carousel.js and carousel.css into the "resource window" of the HTML element and removed the entries in the <head> tag of the page.
Now I can at least see the carousel, but the buttons don't work. :( Really Hard stuff, if you don't have the strongest idea what you're doing.

Image

User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Wed Oct 02, 2019 7:08 pm

Sorry for the double post, but I wanted to push up the thread, because...

... I've finally made the example work.

Image

The carousel hasn't rotated, because the option "Load built-in JavaScript files asynchronous" wasn't activated under Options/HTML/JavaScript. This is the second time that a setting in WebBuilder has distorted or prevented the functionality of an element of the website.

Why does this setting affect a JavaScript file which is integrated with FilePublisher?

It is really hard when you have to pay attention to special settings in WebBuilder as a beginner. Especially since these dependencies are not obvious.
You just have to try everything to be lucky sometime (or not, because you did something wrong somewhere else, but unfortunately you will never know).

User avatar
Pablo
 
Posts: 18398
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to create a 3D rotating Image carousel?

Post by Pablo » Wed Oct 02, 2019 8:44 pm

All formatting options are 'post publish', they are applied after all code has been generated. So, it will affect all code on the page.
There is no other way, because the HTML does not exists until you publish the page.

I suggest not to change any settings unless you know what you are doing. See also the notes in the help.
You just have to try everything to be lucky sometime (or not, because you did something wrong somewhere else, but unfortunately you will never know).
The behavior is not 'random'. You can exactly predict what will happen based on the selected options if you understand the purpose of them.
All these settings were added based on feedback or requests of other users. They may not be useful for everyone and I do not recommend to enable them randomly without knowing what effect they will have.
For example, just because Google tells you to move JavaScripts to end of the page, does not means that it is always a good idea.

User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Thu Oct 03, 2019 6:54 pm

I understand what you want to tell me (the technical procedures in the background) and I understand that.

But after resetting all settings of WebBuilder to default, I have to say that the option "Load built-in JavaScript files asynchronous" is not set by default. So, my problem with the caroussel would also have occurred with the default setting (which of course still wouldn't mean I understood what the exact technical cause of the problem was). It is only solved if the option is set against the default.

It will probably be due to the complexity of this powerful software that some things only work with one option and other things only work with another option in the settings. But maybe every webdesigner trained at school would know exactly what leads to this problem, I can't judge that.

I have never claimed that the program behavior is random. I am a Windows application developer myself and know that there is no random program behavior. Everything has its reason, even if you can't recognize it right away. ;-) Please don't feel personally attacked if I criticize something. I know that I can be wrong as a beginner in this field and I mean it in any case constructively. I also don't want to rule out the possibility that I'm just talking nonsense because I just don't know any better.

Speaking of constructive criticism:
When resetting the program settings I noticed that with the button "Reset Settings" all 8 sections of the options window are reset (General, HTML, Fonts... and so on). In my case it would have been better if I could reset each section individually.

And is there an option to export and import the WebBuilder settings? Apparently at least some of these settings are saved directly with the project and not globally.

So if I now change the settings in my project "D" after reading this thread, then I also have to make all these single changes manually in the projects "A", "B", and "C". Here an export/import of the settings would be useful or the option that the settings are saved globally and are therefore the same for all existing and new projects. The next logical conclusion would then be that you can overwrite a global setting with a project-related setting, since there are obviously certain special cases, such as one or the other option must be set exactly differently in some projects.

Is that stupid or would such a logic make sense for WebBuilder?

Markus

User avatar
Pablo
 
Posts: 18398
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to create a 3D rotating Image carousel?

Post by Pablo » Thu Oct 03, 2019 8:36 pm

Most HTML formatting options are stored in the project because they are usually project specific.
The 'Reset settings ' was added to make sure the everything is back to the 'safe' settings.

The option "Load built-in JavaScript files asynchronous" is usually not the best option, unless all scripts use it. Otherwise you may run into timing issues. That is why it's off by default.

If your script requires this option to be enable then it may be because that script was designed to be in a specific part of the page.

User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Sat Oct 05, 2019 6:04 pm

Thanks for the info, Pablo.

I'm now trying the Flipster Extension and a little bit JavaScript that I've read here and there.

Generally this works quite well (even if it's not a real rotating carousel, but I could soften this requirement a bit).

However, I still have a little thing to solve on the flipster.
I want a new audio file to be loaded into a MediaPlayer when a new Flipster item is moved to the middle.

This works with my Javascript snipplet only with 2 clicks. The first click causes the flipster item to move to the center. And then I have to click it again to call the link or the Javascript snipplet which loads the audio file into the mediaplayer.

Image

Is there any way to register the first click on a flipster item and determine the item number?

The current code of the flipster looks like this.

Code: Select all

<div id="wb_Extension2" style="display:inline-block;width:100%;z-index:12;">
<ul>
<li data-flip-title="t1.png"><a href="javascript: var playme = document.getElementById('MediaPlayer1'); playme.src='Music1.mp3'; playme.load();" target=""><img src="1.png" alt="t1.png" title="t1.png" /></a></li>
<li data-flip-title="t2.png"><a href="javascript: var playme = document.getElementById('MediaPlayer1'); playme.src='Music2.mp3'; playme.load();" target=""><img src="2.png" alt="t2.png" title="t2.png" /></a></li>
<li data-flip-title="t3.png"><a href="javascript: var playme = document.getElementById('MediaPlayer1'); playme.src='Music3.mp3'; playme.load();" target=""><img src="3.png" alt="t3.png" title="t3.png" /></a></li>
<li data-flip-title="t4.png"><a href="javascript: var playme = document.getElementById('MediaPlayer1'); playme.src='Music4.mp3'; playme.load();" target=""><img src="4.png" alt="t4.png" title="t4.png" /></a></li>
</ul>
</div>
I have not yet found a solution to this problem.

Markus

User avatar
Pablo
 
Posts: 18398
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to create a 3D rotating Image carousel?

Post by Pablo » Sat Oct 05, 2019 8:52 pm

I'm sorry, I cannot help you with custom code because for me it may also take a lot of time to figure out how to implement this.

User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Sat Oct 05, 2019 9:12 pm

All right. Thanks for your help, though.

User avatar
Markus
 
 
Posts: 123
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to create a 3D rotating Image carousel?

Post by Markus » Sun Oct 06, 2019 1:07 pm

I have seen that the Flipster Extension is derived from a Github project and I have now taken a closer look at the "original".

The original is able to call a function when the carousel is turned. The parameters are the current item and the the previous item. I am currently working my way into JavaScript. Fortunately I have a lot of time with this project, because it is for a private friend.

It is exciting and thrilling to see what new possibilities this opens up, even though it is quite tedious to "program" without any meaningful error messages in the browser. But I believe that I can realize my original intention including an audio player in the carousel.

Therefore: Thank you for the recent creation of the Flipster extension. It got the ball rolling. :D

Markus

Post Reply