Scroll horizontal con jquery

[zubintro]

Hola amigos, tengo un problema con una accion que estan en Jquery que la verdad desconozco. No se casi nada o nada de jquery por eso quisiera saber si pueden ayudarme. Tengo el siguiente codigo en php:

Código PHP:

  <?php
    $vn_scrollingColHeight = 600;
    $vn_numItemsPerCol = 3;
?>
    <h1><?php print _t("Favoritos ARCHIVO PRUEBA"); //MODIFICADO EN FavoritesController ?></h1> 
    <div class="textContent">
<?php
        print $this->render('Favorites/favorites_intro_text_html.php');
?>
    </div><!-- end textContent -->
    <!-- end favoritesColumn -->
    <div class="favoritesColumn2" id="recentlyAddedCol"> <!-- LLAMADA A CSS -->
        <!-- <div class="favoritesColumn" id="recentlyAddedCol">  LLAMADA A CSS -->
        <div class="title"><?php print _t("Recently Added"); ?></div>
        <div class="bg2">
            <div id="scrollRecentlyAdded">
                <div id="scrollRecentlyAddedContainer">
<?php
    $vn_recently_added_count = 0;
    if(is_array($this->getVar("recently_added")) && sizeof($this->getVar("recently_added")) > 0){
        foreach($this->getVar("recently_added") as $vn_object_id => $vs_thumb){
?>
            <table cellpadding="0" cellspacing="0" style="float:left"><tr><td valign="middle" align="center"><?php print caNavLink($this->request, $vs_thumb, '', 'Detail', 'Object', 'Show', array('object_id' => $vn_object_id)); ?></td></tr></table>
<?php
            $vn_recently_added_count++;
        }
    }
?>
                </div><!-- end scrollRecentlyAddedContainer -->
            </div><!-- end scrollRecentlyAdded -->
                        
                        
                        
        </div><!-- end bg -->
        <a href="#" onclick="scrollRecentlyAddedItems(); return false;" class="more"><?php print _t("More"); ?> &gt;</a>
    </div><!-- end favoritesColumn -->
<script type="text/javascript">
    var scrollRecentlyAddedItemsCurrentPos = 0;
    function scrollRecentlyAddedItems() {
        var t = parseInt(jQuery('#scrollRecentlyAddedContainer').css('top'));
        if (!t) { t = 0; }
        if ((scrollRecentlyAddedItemsCurrentPos + <?php print $vn_numItemsPerCol; ?>) >= <?php print $vn_recently_added_count; ?>) { 
            t = <?php print $vn_scrollingColHeight; ?>; scrollRecentlyAddedItemsCurrentPos = -<?php print $vn_numItemsPerCol; ?>;
            
        }
        jQuery('#scrollRecentlyAddedContainer').animate({'top': (t - <?php print $vn_scrollingColHeight; ?>) + 'px'}, {'queue':true, 'duration': 1000, 'complete': function() { jQuery('#scrollRecentlyAddedContainer').stop(true); scrollRecentlyAddedItemsCurrentPos += <?php print $vn_numItemsPerCol; ?>; }});
    }
</script>  

Como veran al final del codigo esta armando un Script y esta pasando la accion .animate que me imagino es la que hace que mi scroll de una serie de imagenes corra de manera vertical, de arriba para abajo. Necesito pasar esa accion para que ocurra de manera horizontal, de izquierda a derecha. Sera que me pueden ayudar??


Espero pueda ayudarme y gracias por adelantado. Quisiera pasarles el codigo del jquery pero es muy largo y no me deja cargarlo. Espero puedan ayudarme. Igual puedo pasarle el archivo a quien se interese para que pueda ver el codigo.

[zubintro]

Para los que visitaron el tema y quedaron con la duda les presento la solucion que encontre aprovechando de usar una una libreria de Jquery de flowplayer.org que esta disponible para cualquier persona y haciendo unos ajustes en el php, el codigo quedaria asi y funciona perfectamente:

Código PHP:

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   
 
<style id='flashfirebugstyle' type='text/css'>object,embed{visibility:hidden !important;}</style><script type='text/javascript'>window.addEventListener('load', function() {document.addEventListener('DOMNodeInserted', function(e) {if(e.target.tagName.toLowerCase() == 'object' || e.target.tagName.toLowerCase() == 'embed'){try{FlashFirebug_init();}catch(e){}}}, false);try{FlashFirebug_init();}catch(e){}},false);</script></head>
 
<body>
 
<link rel="stylesheet" type="text/css" href="http://mexmedia.colmex.mx/tezcatl/themes/default/css/nuevoscroll/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navigator.css" />    
    
<?php
    $vn_scrollingColHeight = 600;
    $vn_numItemsPerCol = 3;
?>
 
<!-- wrapper for navigator elements -->
<div class="navi"></div>
<!-- "previous page" action -->
<a class="prev browse left"></a>
<!-- root element for scrollable -->
<div class="scrollable" id=browsable>   
   
   <!-- root element for the items -->
   <div class="items">
 
   
     <?php
    $vn_recently_added_count = 0;
    
        if(is_array($this->getVar("recently_added")) && sizeof($this->getVar("recently_added")) > 0){
 
        
$contador=1;
 
    foreach($this->getVar("recently_added") as $vn_object_id => $vs_thumb){
 
  if ($contador==1){ echo '<div>';}
  
print caNavLink($this->request, $vs_thumb, '', 'Detail', 'Object', 'Show', array('object_id' => $vn_object_id)); 
 
if($contador==5){ 
    echo '</div>'; 
    
        $contador=1;
       
}
 
else     {
$contador++;
}
 
$vn_recently_added_count++;
        }
    }
?>
            
   </div>
   
</div>
 
<!-- "next page" action -->
<a class="next browse right"></a>
 
<br clear="all">
 
<!-- javascript coding -->
 
 
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
 
// initialize scrollable together with the navigator plugin
$("#browsable").scrollable().navigator();   
});
</script>
 

Si alguien quiere que le explique como arme el codigo php con gusto..... espero le sirva a alguien.

Saludos