Is it possible to build such a carousel with WebBuilder board equipment?
Below the pictures there is an MP3 player.
Markus
How to create a 3D rotating Image carousel?
How to create a 3D rotating Image carousel?
Hello everyone,
Is it possible to build such a carousel with WebBuilder board equipment?
Below the pictures there is an MP3 player.
Markus
Is it possible to build such a carousel with WebBuilder board equipment?
Below the pictures there is an MP3 player.
Markus
-
BaconFries
-
- Posts: 4826
- Joined: Thu Aug 16, 2007 7:32 pm
Re: How to create a 3D rotating Image carousel?
Not exactly what your asking but maybe the following might be of interest.
https://www.wysiwygwebbuilder.com/carousel3d.html
https://www.wysiwygwebbuilder.com/carousel3d.html
Re: How to create a 3D rotating Image carousel?
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.
But you can use any third part script and add it via the HTML object.
Re: How to create a 3D rotating Image carousel?
Not exactly but take a glance
http://lucknowwebs.com/hot-carousel-and ... for-wb11x/
http://lucknowwebs.com/hot-carousel-and ... for-wb11x/
Re: How to create a 3D rotating Image carousel?
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.
Markus
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.
Markus
-
BaconFries
-
- Posts: 4826
- Joined: Thu Aug 16, 2007 7:32 pm
Re: How to create a 3D rotating Image carousel?
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.
Re: How to create a 3D rotating Image carousel?
Well, I'm just trying to integrate this 3D carousel: https://3dtransforms.desandro.com/carousel
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.
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.
What do I still have to do to make these three components work together?
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.
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.
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.
What do I still have to do to make these three components work together?
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.Re: How to create a 3D rotating Image carousel?
Sorry for the double post, but I wanted to push up the thread, because...
... I've finally made the example work.
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).
... I've finally made the example work.
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).
Re: How to create a 3D rotating Image carousel?
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.
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.
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.
The behavior is not 'random'. You can exactly predict what will happen based on the selected options if you understand the purpose of them.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).
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.
Re: How to create a 3D rotating Image carousel?
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
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
Re: How to create a 3D rotating Image carousel?
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.
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.
Re: How to create a 3D rotating Image carousel?
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.
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.
I have not yet found a solution to this problem.
Markus
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.
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>Markus
Re: How to create a 3D rotating Image carousel?
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.
Re: How to create a 3D rotating Image carousel?
All right. Thanks for your help, though.
Re: How to create a 3D rotating Image carousel?
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.
Markus
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.
Markus