[Found the answer (please scroll down to Edit2]: I'm trying to implement Scrollable into my theme. I ran into a few problems. I don't know much about javascript, but as people here encouraged me to try as it's very well documented, I gave it a try. Now, I need your help.
I want several instances, but with my current setting it doesn't work. If I scroll through one instance, the other one will scroll, too. This is probably easy to fix for somebody who knows what to do.
Also (it's a CSS problem, I suppose), I cannot get the "prev" and "next" buttons to work properly and I have no clue why.
Here's the messed up page where I tried to implement it: click I used the minimal setup html, javascript and CSS provided here. The documentation says something about multiple instances here, but I don't quite get it.
EDIT: It seems to work fine, here: http://www.tribalmystic.com/test/prevnext/ I used Firebug to analyze the Javascript. They tried exactly what I did using .scrollable2 etc., but it doesn't take effect at all for me!! Anybody any idea why?
Ok, here we go: HTML + JS:
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
<!-- test 1 -->
$("#scrollable-1").scrollable();
<!-- test 2 -->
$("#scrollable-2").scrollable();
});
</script>
<!-- "previous page" action -->
<a class="prev browse left"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/left.png" border="0" ></a>
<!-- root element for scrollable -->
<div id="scrollable-1">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<div>
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
</div>
<!-- 5-10 -->
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
</div>
<!-- 10-15 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/right.png" border="0" ></a>
</div>
<!-- "previous page" action -->
<a class="prev browse left"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/left.png" border="0" ></a>
<!-- root element for scrollable -->
<div id="scrollable-2">
<!-- root element for the items -->
<div class="items">
<!-- 15-20 -->
<div>
a ölkad jfaölkds jfölksad jfösalkd jfsa
daödkjf aölksd jfölksad jfölksad jf
adsfjaöksdl jfölkdsa jfölkdsa jfölksad jfölkdsa jfölksadjf ölksadjf
dsfjaöksd jfölksadjf
</div>
<!-- 20-25 -->
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST
</div>
<!-- 25-30 -->
<div>
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
</div>
<!-- "next page" action -->
<a class="next browse right"><img src="http://zoomingjapan.com/wp-content/themes/alltuts/images/right.png" border="0" ></a>
CSS:
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
#scrollable-1 {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:#fff;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
#scrollable-1 .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
#scrollable-1 img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
#scrollable-1 .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
#scrollable-1 {
float:left;
}
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
#scrollable-2 {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
height:120px;
/* custom decorations */
border:1px solid #ccc;
background:#fff;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
#scrollable-2 .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
.items div {
float:left;
width:680px;
}
/* single scrollable item */
#scrollable-2 img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
width:100px;
height:75px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
#scrollable-2 .active {
border:2px solid #000;
position:relative;
cursor:default;
}
/* this makes it possible to add next button beside scrollable */
#scrollable-2 {
float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
display:block;
width:30px;
height:30px;
float:left;
margin:40px 10px;
cursor:pointer;
font-size:1px;
}
/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
/* left */
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }
/* disabled navigational button */
a.disabled {
visibility:hidden !important;
}
Where's the mistake?
EDIT2: Found a solution: I finally found out what to do, so I'm writing it here as answer for future reference (maybe others run into the same problem). I hope it's okay to answer your own question? If not, please let me know!
If you wrap the whole scrollable div in its own div INCLUDING the "prev" and "next" divs, then it works without any problems, more about it here.
My poor nerves!! ;)
I really appreciate your help, thanks!
