Building addon around javascript image slider

Dave Badia

Hi community -
I am in need of a responsive, touch compatible image slider and am trying to build a vaadin addon around the flexslider2 javascript implementation. I've read the various documentation and examples, but I can't get it to work.

In my test project, the vaadin UI starts fine and all other components are displayed, but the image slider just doesn't appear. I've used multple web browsers to look for javascript errors, bad file paths, etc but don't see any clues and I am completely out of ideas after looking at this for a few days

I've been comparing the raw html/javascript solution with my vaadin code:
htmldemo - contains a bare minimum html demo of the slider. just open me.html and you should see some desserts in your browser
vaadin-component - the vaadin project with my addon on code (note it's not in official addon form just yet). Just run mvn jetty:run then go to localhost:8080 you'll see a few components but no image slider. Interesting slider code is in src\main\webapp\VAADIN\addons\flexslider2 and \src\main\java\com\github\woothemes\flexslider2

I've put a zip with 2 directories here: https://lighthousevillahhi.com/vaadin-flexslider.zip
(add attachment keeps giving me errors tonight)
For those who would rather not download, here's the short version:

htmldemo

<!DOCTYPE html>
<html  lang="en">
<head>
    <meta content="charset=utf-8">
    <title>FlexSlider 2</title>
    <link rel="stylesheet" href="flexslider.css" type="text/css" />
</head>
<body >
 
        <div class="flexslider">
          <ul class="slides">
            <li>
                  <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_lemon.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_donut.jpg" />
                  </li>
                  <li>
                  <img src="images/kitchen_adventurer_caramel.jpg" />
                  </li>
          </ul>     
    </div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
  <!-- FlexSlider -->
  <script src="jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 3000
      });
    });
  </script>
</body>
</html>

vaadin-component
FlexSlider2.java

@JavaScript({
    "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",
    "vaadin://addons/flexslider2/jquery.flexslider.js",
    "vaadin://addons/flexslider2/flexslider2.js",
})
@StyleSheet({
    "vaadin://addons/flexslider2/flexslider.css",
})
public class FlexSlider2 extends AbstractJavaScriptComponent {
}

flexslider2.js

com_github_woothemes_flexslider2_FlexSlider2 = function() {
    var galleryElem = $('<div class="flexslider">' +
            '<ul class="slides">' +
            '<li><img src="./VAADIN/images/kitchen_adventurer_cheesecake_brownie.jpg" /></li>' +
            '<li><img src="./VAADIN/images/kitchen_adventurer_lemon.jpg" /></li>' +
            '<li><img src="./VAADIN/images/kitchen_adventurer_donut.jpg" /></li>' +
            '<li><img src="./VAADIN/images/kitchen_adventurer_caramel.jpg" /></li>' +
            '</ul>' +
          '</div>');

galleryElem.appendTo(this.getElement());
    
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
}

Any help or suggestions are greatly appreciated!
Dave

Marco Collovati

Try invoke initialization directly (not in onload) or better do it in onStateChange special function

var me = this;
me.onStateChange = function() {
   $('.flexslider').flexslider({
    animation: "slide"
  });
};

Maybe you could also use onStateChange to regenerating galleryElem when images are changed on server side

Regards
Marco

Dave Badia

Thanks for the suggestion Marco, I am getting closer :)

When I changed my code to onStateChange, I could see the "dots" being rendered and moving every 2 seconds, indicating that the javascript is now running. But the images themselves are missing:

I then tried removing the stylesheet annotation from FlexSlider2.java which revealed the image slideshow without the proper formatting. This was expected (since I removed the stylesheet) but was just a debugging step to ensure the images were accessible and do some addiitoal validtion of the javascript logic.

So it seems the stylesheet is not getting interpreted properly. Somehow enabling the stylesheet causes the images themselves to not be rendered

[url=http://lighthousevillahhi.com/img/vaadinWithStyleSheet.JPG]@JavaScript({
    "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",
    "vaadin://addons/flexslider2/jquery.flexslider.js",
    "vaadin://addons/flexslider2/flexslider2.js",
})
@StyleSheet({
    "vaadin://addons/flexslider2/flexslider.css",
})
public class FlexSlider2 extends AbstractJavaScriptComponent {
}[/url]

For reference, here is what the pure html/javascript renders:

Any other suggestions are greatly appreciated!

Thanks
Dave

Marco Collovati

That's weird, your code works for me with onStateChange (see attached screen shot); may be a browser cache issue?

By the way, the flexslider icon font is not loaded.

screenshot.png (528.1 kB)

Dave Badia

That's good news that it's working for you!

Unfortuantely, it's still not for me. I must be doing something dumb. I did clear cache, etc when I tested.
I redownload the zip from my original post and made 2 changes: added the font dir (I had noticed this too in the web debugger) and the onStateChange in the js file

I have deployed that code to http://lighthousevillahhi.com/flex2/
(Not this is http not https - https isn't downloadnig everything properly)

I've tried in a bunch of browsers and have clared cache, every time I get the dots (see attached)

The new code can be downloaded from lighthousevillahhi.com/flex2.zip

With a little more help I will be able start working on the real addon with options support, etc

Thanks!
Dave

dots.jpg (11.4 kB)

Marco Collovati

Hi Dave,
seems like the problem depends on the width of the component; if you leave width undefined it doesn't work well.
I forgot to mention that in my previous test I set component to full size.
Try this in your demo UI

FlexSlider2 flexSlider2 = new FlexSlider2();
flexSlider2.setWidth("400px");
layout.addComponents(name, button, flexSlider2);

HTH
Marco

Dave Badia

That was it, thanks!!

Dave

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Building addon around javascript image slider

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.