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

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

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

Marcus

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

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

Image

Markus

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

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

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

Hey Markus,

Looks great. Would you mind sharing how you accomplished 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 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
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: 618
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

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

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.

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

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

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.

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 20, 2019 6:09 pm

chrispy68,

you have got mail ;-)

Markus

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

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

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

@Markus, Thank you!

Post Reply