Building addon around javascript image slider

Flow
1

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

[code]

FlexSlider 2 
    <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>
[/code][b] vaadin-component [/b] FlexSlider2.java [code] @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 { } [/code]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

2

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

3

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

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:

[url=http://lighthousevillahhi.com/img/vaadinWithStyleSheet.JPG]

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]

[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

4

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

5

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

26061.jpg

6

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

7

That was it, thanks!!

Dave