jquery tools "scrollable" in ullright
General Notes
In the html markup the classes ".scrollable" and ".items" seems to be hardcoded and therefore necessary exaclty like that
ColumnsConfig
$this['gallery'] ->setLabel(__('Gallery', null, 'ullCmsMessages')) ->setMetaWidgetClassName('ullMetaWidgetGallery') ->setOption('image_width', 717) ->setOption('image_height', 1247) // much higher to accomodate portrait style images ->setOption('generate_thumbnails', false) ->setHelp(__('Images are automatically resized. Drag images around to sort.', null, 'ullCmsMessages') . '<br />717 x 418px.') ;
Template
<div class="scrollable" id="scrollable"> <div class="items"> <?php foreach (ullWidgetGalleryWrite::getImagesAsArray($doc->gallery) as $image): ?> <div> <?php echo image_tag($image, 'width=717') ?> </div> <?php endforeach ?> </div> <!-- "previous page" action --> <a class="prev browse left scrollable_arrow" id="scrollable_arrow_left"> <?php echo image_tag('arrow_left') ?> </a> <!-- "next page" action --> <a class="next browse right scrollable_arrow" id="scrollable_arrow_right"> <?php echo image_tag('arrow_right') ?> </a> </div>
Notes: when using "circular" make sure you specify the width of the img tag. Otherwise there is a bug in scrollable which shows the last image first.
Javascript in Template
Put this code before the closing </body> tag
<?php echo javascript_tag(' $(document).ready(function() { /* Gallery scroll */ // initialize scrollable $("#scrollable").scrollable({ circular: true }); }); ') ?> <?php use_javascript('/ullCorePlugin/js/jq/jquery.tools.min.js') ?>
CSS
/* scrollable gallery */ /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position: relative; overflow: hidden; width: 717px; height: 418px; } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accommodate scrollable items. it's enough that you set width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width: 200000em; position: absolute; } /* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ .items div { float:left; width: 717px; /* important! otherwise autoscroll startup missalign bug */ height: 418px; } .scrollable_arrow { position: absolute; cursor: pointer; } .scrollable_arrow:hover { opacity: .7; } .scrollable_arrow.disabled { opacity: 0; cursor: auto; } #scrollable_arrow_left { top: 293px; right: 0; } #scrollable_arrow_right { top: 337px; right: 0; }
Advanced Options
Documentation: http://jquerytools.github.io/documentation/scrollable/
Scrollable API
<?php echo javascript_tag(' $(document).ready(function() { /* Gallery scroll */ // initialize scrollable $("#scrollable").scrollable({ circular: true }); // get api var api = $("#scrollable").data("scrollable"); // do something when seeking to the first image/element api.onSeek(function() { if (0 === api.getIndex()) { doSomething(); } }); }); ') ?>
Navigator
Template html
<div class="scrollable" id="scrollable"> <div class="items"> <?php $lang = $sf_user->getCulture() ?> <?php for ($i = 1; $i <= 5; $i++): ?> <?php $filename = 'slider/0' . $i . '_' . $lang . '.jpg' ?> <div><?php echo image_tag($filename) ?></div> <?php endfor ?> </div> </div> <div id="scrollable_nav_container"> <ul id="scrollable_nav"> <?php for ($i = 1; $i <= 5; $i++): ?> <li></li> <?php endfor ?> </ul> </div>
Template js
<?php echo javascript_tag(' $(document).ready(function() { /* Slider */ // initialize scrollable $("#scrollable") .scrollable({ circular: true }) .navigator("#scrollable_nav"); ; // autoscroll only on the startpage if ($("body").hasClass("cms_page_homepage")) { $("#scrollable").autoscroll(3000); } // activate first slider nav point $("#scrollable_nav li:first-child").addClass("active"); // get api var api = $("#scrollable").data("scrollable"); $("#scrollable .items").click(function() { api.next(); }); }); ') ?>
css
/* scrollable gallery */ /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position: relative; overflow: hidden; width: 961px; height: 240px; } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accommodate scrollable items. it's enough that you set width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width: 20000em; position: absolute; } /* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ .items div { float:left; width: 961px; /* important! otherwise autoscroll startup missalign bug */ height: 240px; } /* scrollable navigator */ #scrollable_nav_container { position: absolute; bottom: 0; left: 0; height: 28px; width: 100%; text-align: center; } ul#scrollable_nav { margin: 0; padding: 0; list-style-type: none; } ul#scrollable_nav li { display: inline; margin: 0; padding: 0 10px; /* Simulate width & height which are not possible due to display inline */ background-image: url("/images/scrollable.png"); background-repeat: no-repeat; background-position: center; cursor: pointer; } ul#scrollable_nav li.active{ background-image: url("/images/scrollable_hot.png"); }