How to create a 3D rotating Image carousel?

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

Hello everyone,

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

Below the pictures there is an MP3 player.

Markus

BaconFries · 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

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 · Post by **alexmasss** » Mon Sep 30, 2019 7:14 am

Not exactly but take a glance
http://lucknowwebs.com/hot-carousel-and ... for-wb11x/

Markus · 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.

Markus

BaconFries · 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.

Markus · 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

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.

Markus · 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.

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).

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.

Markus · 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

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.

Markus · 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.

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

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.

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

All right. Thanks for your help, though.

Markus · 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.

Markus

RiaanN · Post by **RiaanN** » Wed Oct 09, 2019 2:12 pm

Marcus

I can help you - How do I contact you directly ?

Markus · Post by **Markus** » Mon Oct 14, 2019 1:19 pm

Hello RiaaN,

thank you very much for your offer and your help.
After a short break (because of my main job) I continued to work with JavaScript and was able to program a working solution.

It all works very well. I probably didn't write any professional code (I didn't use classes, for example), but the solution is sufficient for my purpose.

Markus

crispy68 · Post by **crispy68** » Sat Oct 19, 2019 5:13 pm

Hey Markus,

Looks great. Would you mind sharing how you accomplished this?

,

Markus · Post by **Markus** » Sat Oct 19, 2019 10:12 pm

Yes, I will try it.

1) You need the flipster code from GitHub: https://github.com/drien/jquery-flipster
2) Extract the two files "jquery.flipster.min.css" and "jquery.flipster.min.js"
3) In addition you will need the files "myflipster.css" and "myflipster.audio.js" I have created (see below)
4) You also need the folowing sub folders structure within the folder where your webpage with the flipster element is located
/audio/ ; here you store all the audiofiles (mp3 & ogg version) for each flipster Image
/images/ ; here you place the images for the flipster
/myflipster/ ; here you store the images for the play button and the flipster js and css code
5) You have to add all these folders and the files to your project via the FilePublisher element
6) You have to use the HTML element within WebBuilder to create the "audio flipster". For the HTML code see below.

HTML code for the HTML element:

Code: Select all

<!-- MyFlipster BEG -->
<div class="myFlipster">
<ul>
<li id="myFlipsterItem1" data-audio-file="audio/Music1" data-song-text="Production: abc / Role: xyz" data-flip-title="1.png"><a href="javascript: void();" target=""><img src="images/1.png" alt="1.png" title="1.png" /></a></li>
<li id="myFlipsterItem2" data-audio-file="audio/Music2" data-song-text="Production: xyz / Role: abc" data-flip-title="2.png"><a href="javascript: void();" target=""><img src="images/2.png" alt="2.png" title="2.png" /></a></li>
<li id="myFlipsterItem3" data-audio-file="audio/Music3" data-song-text="Production: abc / Role: xyz" data-flip-title="3.png"><a href="javascript: void();" target=""><img src="images/3.png" alt="3.png" title="3.png" /></a></li>
<li id="myFlipsterItem4" data-audio-file="audio/Music4" data-song-text="Production: xyz / Role: abc" data-flip-title="4.png"><a href="javascript: void();" target=""><img src="images/4.png" alt="4.png" title="4.png" /></a></li>
<li id="myFlipsterItem5" data-audio-file="audio/Music5" data-song-text="Production: abc / Role: xyz (no audiofile)" data-flip-title="5.png"><a href="javascript: void();" target=""><img src="images/5.png" alt="5.png" title="5.png" /></a></li>
<li id="myFlipsterItem6" data-audio-file="audio/Music6" data-song-text="H&ouml;rspiel 6, Rolle: Erz&auml;hlerin" data-flip-title="6.png"><a href="javascript: void();" target=""><img src="images/6.png" alt="6.png" title="6.png" /></a></li>
</ul>
</div>

<div class = "myFlipster-PlayContainer">
  <div class = "myFlipster-ContainerCell" id = "myFlipster-Text">Hallo Welt</div>
  <div class = "myFlipster-ContainerCellButton"><img id = "myFlipster-PlayButton" src="myflipster/play_normal.png" alt="Play-Button" onmouseover="setButton(1)"; onmouseleave="setButton(0);" onclick="togglePlay();"></div>
</div>

<audio id="myFlipster-Player" preload oncanplaythrough = "playerReady()" onended = "playerReady()"; onabort = "playerError()">
  <source id = "myFlipster-Player-Source-mp3" src = "" type="audio/mpeg">
  <source id = "myFlipster-Player-Source-ogg" src = "" type="audio/ogg">
  Ihr Browser unterst&uuml;tzt das HTML5 Audio-Element leider nicht.
</audio>


<script src="myflipster/jquery.flipster.min.js"></script>
<script src="myflipster/myflipster.audio.js"></script>
<!-- MyFlipster END -->

Please note that you MUST NOT add the fileextension (.mp3 and .ogg) for the filename of the audiofiles (e.g. data-audio-file="audio/Music1"). The extension is added by the javascript code.

Put the following lines into the "Ressources" section of the HTML element:

Code: Select all

myflipster/jquery.flipster.min.css
myflipster/myflipster.css

Code for the myflipster.css file:

Code: Select all

.myFlipster-PlayContainer
{
  display: inline-grid;
  grid-template-columns: auto;
  // background-color: #ffffff44;
  // border: 1px solid #ffffffff;
  position: relative;
  top: -35px;
  left: 15px;
  width: 350px;
  padding: 3px;
}

.myFlipster-ContainerCell
{
  // border: 1px solid #ff000044;
  top: -50em;
  height: 35px;
  text-align: center; 
  color: #ffffaaff;
  font-family: Arial;
  font-weight: normal;
  font-size: 16px;
}

.myFlipster-ContainerCellButton
{
  // border: 1px solid #00ff0044;
  text-align: center; 
}

Code for the myflipster.audio.js file:

Code: Select all

$('.myFlipster').flipster({
    itemContainer: 'ul',
    // [string|object]
    // Selector for the container of the flippin' items.

    itemSelector: 'li',
    // [string|object]
    // Selector for children of `itemContainer` to flip

    start: 'center',
    // ['center'|number]
    // Zero based index of the starting item, or use 'center' to start in the middle

    fadeIn: 250,
    // [milliseconds]
    // Speed of the fade in animation after items have been setup

    loop: true,
    // [true|false]
    // Loop around when the start or end is reached

    autoplay: false,
    // [false|milliseconds]
    // If a positive number, Flipster will automatically advance to next item after that number of milliseconds

    pauseOnHover: true,
    // [true|false]
    // If true, autoplay advancement will pause when Flipster is hovered

    style: 'coverflow',
    // [coverflow|carousel|flat|...]
    // Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
    // Create your own theme in CSS and use this setting to have Flipster add the custom class

    spacing: -0.6,
    // [number]
    // Space between items relative to each item's width. 0 for no spacing, negative values to overlap

    click: true,
    // [true|false]
    // Clicking an item switches to that item

    keyboard: false,
    // [true|false]
    // Enable left/right arrow navigation

    scrollwheel: false,
    // [true|false]
    // Enable mousewheel/trackpad navigation; up/left = previous, down/right = next

    touch: true,
    // [true|false]
    // Enable swipe navigation for touch devices

    nav: true,
    // [true|false|'before'|'after']
    // If not false, Flipster will build an unordered list of the items
    // Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items

    buttons: false,
    // [true|false|'custom']
    // If true, Flipster will insert Previous / Next buttons with SVG arrows
    // If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`

    buttonPrev: 'Previous',
    // [text|html]
    // Changes the text for the Previous button

    buttonNext: 'Next',
    // [text|html]
    // Changes the text for the Next button

    onItemSwitch: itemSwitched
    // [function]
    // Callback function when items are switched
    // Arguments received: [currentItem, previousItem]
});

var AudioPlayer = document.getElementById("myFlipster-Player");
var AudioPlayerMp3 = document.getElementById("myFlipster-Player-Source-mp3");
var AudioPlayerOgg = document.getElementById("myFlipster-Player-Source-ogg");
var PlayButton = document.getElementById("myFlipster-PlayButton");
var Text = document.getElementById("myFlipster-Text");

var Song;
var OldSong;
var SongText;

itemSwitched(document.getElementById("myFlipsterItem4"), "0");

function itemSwitched(a, b) {
  Song = a.getAttribute("data-audio-file");
  SongText = a.getAttribute("data-song-text");
  
  AudioPlayerMp3.src = Song + ".mp3";
  AudioPlayerOgg.src = Song + ".ogg";
  AudioPlayer.load();

  Text.innerHTML = SongText;
}

function togglePlay() {
  if (AudioPlayer.paused == true) {
    AudioPlayer.play();
  } else {
    AudioPlayer.pause();
  }
  setButton(1);
}

function playerReady() {
  setButton(0);
}

function playerError() {
  setTimeout(function() {
    setButton(0);
  }, 50);
}

function setButton(hover) {
  if (AudioPlayer.networkState == 3) {
    PlayButton.src="myFlipster/play_none.png";
  } else {
    if (AudioPlayer.paused == true) {
      (hover == 0) ? PlayButton.src="myFlipster/play_normal.png" : PlayButton.src="myFlipster/play_hover.png";
    } else {
      (hover == 0) ? PlayButton.src="myFlipster/pause_normal.png" : PlayButton.src="myFlipster/pause_hover.png";
    }
  }
}

Below is the structure of the files and directories:

Dont forget to include all theses files to your project:

I hope you get along with this description and can reproduce the audio-flipster.

If you're good at Javascript and you might convert the code to classes or arrays, then I'd be very interested in the improved version.

Greetings
Markus

crispy68 · Post by **crispy68** » Sun Oct 20, 2019 4:46 pm

Hey Markus,

Thanks for the info. However, i'm having issues getting it to work. I followed your instructions but still cant get it to work.

Would you possibly have a working demo project file you could send me? Don't need all of the audio files sent. If you do, please send it to ron@wizbangwebdesign.com

thanks.

Post by **Pablo** » Sun Oct 20, 2019 5:00 pm

Just for the fun of it, I have created an extension project for this, in case someone finds it useful:
https://www.wysiwygwebbuilder.com/suppo ... raudio.zip

Note that this not completely finished. It provided "AS IS."
The project can be modified with Extension Builder.

Markus · Post by **Markus** » Sun Oct 20, 2019 6:09 pm

chrispy68,

you have got mail

Markus

crispy68 · Post by **crispy68** » Sun Oct 20, 2019 6:23 pm

@Markus, Thank you!

www.wysiwygwebbuilder.com

How to create a 3D rotating Image carousel?

How to create a 3D rotating Image carousel?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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