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");
}