Not working jquery scroller

Question

I tried run the Malihu´s scroller on my website (http://manos.malihu.gr/jquery-thumbnail-scroller/), unfortunately I cant´t get it to work at my website. Could you please tell me if I am doing something wrong?

(I am think that maybe the problem is somewhere around this code? dont know...)

<div id="zelena">

<div id="mg1">mg1</div>
<div id="mg2">mg2</div>
<div id="mg3">mg3</div>
<div id="mg4">mg4</div>
<div id="mg5">mg5</div>

<br>

<div id="akt1">akt1</div>
<div id="akt2">akt2</div>
<div id="akt3">akt3</div>
<div id="akt4">akt4</div>
<div id="akt5">akt5</div>

<br>

<div id="prip1">prip1</div>
<div id="prip2">prip2</div>
<div id="prip3">prip3</div>
<div id="prip4">prip4</div>
<div id="prip5">prip5</div>

<br>

<div id="min1">min1</div>
<div id="min2">min2</div>
<div id="min3">min3</div>
<div id="min4">min4</div>
<div id="min5">min5</div>

<br>

</div> <!-- konec #zelena -->

Here is the code: http://jsfiddle.net/Lz6fo597/ eventualy all the files: http://www.filedropper.com/mgwebslide Thank You in dvance.

Answer 1

First of all I think that to properly use this plugin you must use ul elements and not only div. For instance instead of having:

<div id="zelena">
    <div id="mg1">mg1</div>
    <div id="mg2">mg2</div>
    <div id="mg3">mg3</div>
    <div id="mg4">mg4</div>
    <div id="mg5">mg5</div>
</div>

you will have to use this:

<div id="zelena">
    <ul>
        <li id="msg1">msg1</li>
        <li id="msg2">msg2</li>
        <li id="msg3">msg3</li>
        <li id="msg4">msg4</li>
        <li id="msg5">msg5</li>
    </ul>
</div>

That said, I also think you cannot have one scrollbar acting on multiple ul, so this:

<div id="zelena">
    <ul>
        <li id="msg1">msg1</li>
        <li id="msg2">msg2</li>
        <li id="msg3">msg3</li>
        <li id="msg4">msg4</li>
        <li id="msg5">msg5</li>
    </ul>

    <ul>
        <li id="akt1">akt1</li>
        <li id="akt2">akt2</li>
        <li id="akt3">akt3</li>
        <li id="akt4">akt4</li>
        <li id="akt5">akt5</li>
    </ul>
</div>

will not work and therefore you will have to do something like this:

<div id="zelena">
    <ul>
        <li id="msg1">msg1</li>
        <li id="msg2">msg2</li>
        <li id="msg3">msg3</li>
        <li id="msg4">msg4</li>
        <li id="msg5">msg5</li>

        <li id="akt1">akt1</li>
        <li id="akt2">akt2</li>
        <li id="akt3">akt3</li>
        <li id="akt4">akt4</li>
        <li id="akt5">akt5</li>

        <li id="prip1">prip1</li>
        <li id="prip2">prip2</li>
        <li id="prip3">prip3</li>
        <li id="prip4">prip4</li>
        <li id="prip5">prip5</li>

        <li id="min1">min1</li>
        <li id="min2">min2</li>
        <li id="min3">min3</li>
        <li id="min4">min4</li>
        <li id="min5">min5</li>
    </ul>
</div>

in combination with some css styling.

Finally be careful when you use jQuery with jsFiddle as I, for instance, had some problems in calling the initialising function as by default jsFiddle executes the javascript code after the page is loaded and therefore this:

(function($){
    $(window).load(function(){
        $("#zelena").mThumbnailScroller({
          axis:"x",
          type:"hover-100"
        });
    });
})(jQuery);

might cause problems while this:

$("#zelena").mThumbnailScroller({
    axis:"x",
    type:"hover-100"
});

should work.

You can have a look at this Fiddle where I've tried to obtain a similar "structural" result with the one you provided.