Foros del Web » Programando para Internet » Jquery »

Scroll horizontal con jquery

Estas en el tema de Scroll horizontal con jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2011, 12:16
 
Fecha de Ingreso: septiembre-2007
Mensajes: 120
Antigüedad: 16 años, 9 meses
Puntos: 0
Scroll horizontal con jquery

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.
  #2 (permalink)  
Antiguo 24/10/2011, 15:46
 
Fecha de Ingreso: septiembre-2007
Mensajes: 120
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Scroll horizontal con jquery

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:
Ver original
  1. <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
  2. <!-- standalone page styling (can be removed) -->
  3.     <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>  
  4.  
  5. <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>
  6.  
  7. <body>
  8.  
  9. <link rel="stylesheet" type="text/css" href="http://mexmedia.colmex.mx/tezcatl/themes/default/css/nuevoscroll/scrollable-horizontal.css" />
  10. <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
  11. <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navigator.css" />    
  12.    
  13. <?php
  14.     $vn_scrollingColHeight = 600;
  15.     $vn_numItemsPerCol = 3;
  16. ?>
  17.  
  18. <!-- wrapper for navigator elements -->
  19. <div class="navi"></div>
  20. <!-- "previous page" action -->
  21. <a class="prev browse left"></a>
  22. <!-- root element for scrollable -->
  23. <div class="scrollable" id=browsable>  
  24.    
  25.    <!-- root element for the items -->
  26.    <div class="items">
  27.  
  28.    
  29.      <?php
  30.     $vn_recently_added_count = 0;
  31.    
  32.         if(is_array($this->getVar("recently_added")) && sizeof($this->getVar("recently_added")) > 0){
  33.  
  34.        
  35. $contador=1;
  36.  
  37.     foreach($this->getVar("recently_added") as $vn_object_id => $vs_thumb){
  38.  
  39.   if ($contador==1){ echo '<div>';}
  40.  
  41. print caNavLink($this->request, $vs_thumb, '', 'Detail', 'Object', 'Show', array('object_id' => $vn_object_id));
  42.  
  43. if($contador==5){
  44.     echo '</div>';
  45.    
  46.         $contador=1;
  47.        
  48. }
  49.  
  50. else     {
  51. $contador++;
  52. }
  53.  
  54. $vn_recently_added_count++;
  55.         }
  56.     }
  57. ?>
  58.            
  59.    </div>
  60.    
  61. </div>
  62.  
  63. <!-- "next page" action -->
  64. <a class="next browse right"></a>
  65.  
  66. <br clear="all">
  67.  
  68. <!-- javascript coding -->
  69.  
  70.  
  71. <script>
  72. // What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
  73. $(document).ready(function() {
  74.  
  75. // initialize scrollable together with the navigator plugin
  76. $("#browsable").scrollable().navigator();  
  77. });
  78. </script>

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

Saludos

Etiquetas: horizontal, html, imagenes, php, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:26.