I m trying to create a new block and i am stuck a bit...
I made a block tha contains some content that scrolls with Jquery Scrollable....
I've added to Overall Header
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
<!-- mousewheel support -->
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<!-- styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navig.css" />
<!-- mousewheel support -->
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<!-- styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navig.css" />
Then i've added the style to my templates css and at last i created a block tpl and added inside
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />
<h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">60 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />
<h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">80 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb17.jpg" />
<h3><em>13. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">300 sec</span>
</div>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />
<!-- javascript coding -->
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable
$("div.scrollable").scrollable({
size: 3,
items: '#thumbs',
hoverClass: 'hover'
});
});
</script>
I placed the block through CMS and images, arrows and and colors are correct but no effect applies....I suspect that the javascript at the bottom of the block.tpl is not executing and i cant make it work....
Any ideas please? I 'm stuck !!!!
Thanks
~Alex
In the Boxes
