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.
Post Reply
User avatar
Markus
 
 
Posts: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

How to create a 3D rotating Image carousel?

Post by Markus »

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: 5328
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

Not exactly what your asking but maybe the following might be of interest.
https://www.wysiwygwebbuilder.com/carousel3d.html
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post by Pablo »

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: 105
Joined: Mon Sep 28, 2015 4:25 pm

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

Post by alexmasss »

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

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

Post by Markus »

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: 5328
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

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: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

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: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

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: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post by Pablo »

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: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

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: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post by Pablo »

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: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

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: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post by Pablo »

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: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

All right. Thanks for your help, though.
User avatar
Markus
 
 
Posts: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

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
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

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

Post by RiaanN »

Marcus

I can help you - How do I contact you directly ?
User avatar
Markus
 
 
Posts: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

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.

Image

Markus
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

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

Post by crispy68 »

Hey Markus,

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

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

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

Post by Markus »

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
Image

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:

Image

Image

Image

Image

Dont forget to include all theses files to your project:

Image

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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

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

Post by crispy68 »

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.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

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

Post by Pablo »

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.
User avatar
Markus
 
 
Posts: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus »

chrispy68,

you have got mail ;-)

Markus
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

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

Post by crispy68 »

@Markus, Thank you!
Post Reply