Slide de noticias, una ayudita porfa

[fher2010]

Saludos cordiales, no estoy muy seguro si debería publicar esto aquí o en la parte de Js, por favor si estoy mal les rogaría mover el post ....

El asunto es el siguiente ... desde hace mucho buscaba el scrip para incluir a mi sitio el tan deseado "Slide" para noticias ... pero de texto, no de imágenes. Ese tipo marquesina pero q a diferencia de usar <MARQUEE> y hacer pasar el texto como si se trataran de los títulos o créditos de una película, realice barridos por párrafos ..

Bueno me topé con este script, es cual está muy interesante y pueden verlo y descargarlo del siguiente sitio ... http://www.jugbit.com/jquery-vticker-vertical-news-ticker/ .. incluso hay un ejemplo para ver como trabaja ... http://www.jugbit.com/jquery/vticker.php

Ahora bién ... la explicación de como utilizarlo se ve q tan solo hay q declarar una .clase la cual luego se llama desde la etiqueta <div class"LA_CLASE"> ... y listo .. todo de 10 .....

Lo lamentable es q por mas FACIL q parece .. no me doy cuenta y no se como poder utilizar y aplicar este script en mi sitio ... ¿dónde declaro la .CLASE? .. en el Js?? .. en el código HTML entre las etiquetas <script type></script>??

Lo q hice hasta ahora fue descargar el escript .... luego lo coloqué dentro del directorio de mi sitio en una carpeta llamada js

En el código HTML hago la llamada al archivo js de la siguiente manera: <script type="text/javascript" src="js/jquery.vticker.js"></script>

y hasta ahí llego ... pos no se donde o como hacer la declaracion de la famosa clase .. se supone q en el código html se aplicaría así

Código HTML:

<div class"LA_CLASE_A_DECLARAR">
<ul>
<li>TEXTO INFORMATIVO NRO 1</li>
<li>OTRO TEXTO INFORMATIVO</li>
</ul>
</div>
 

en fin espero q me puedan dar una ayuda ... creo q es cuestion de dos líneas y asunto solucionado .. pero no se donde, como ... jejeje .. Gracias anticipadas ...
de todas formas adjunto el código Js, q como indiqué antes pueden descargarlo --

Código Javascript:

/*
* vertical news ticker
* Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
* http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
*/
(function($){
$.fn.vTicker = function(options) {
    var defaults = {
        speed: 700,
        pause: 4000,
        showItems: 3,
        animation: '',
        mousePause: true,
        isPaused: false,
        direction: 'up',
        height: 0
    };
 
    var options = $.extend(defaults, options);
 
    moveUp = function(obj2, height, options){
        if(options.isPaused)
            return;
        
        var obj = obj2.children('ul');
        
        var clone = obj.children('li:first').clone(true);
        
        if(options.height > 0)
        {
            height = obj.children('li:first').height();
        }       
        
        obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
            $(this).children('li:first').remove();
            $(this).css('top', '0px');
        });
        
        if(options.animation == 'fade')
        {
            obj.children('li:first').fadeOut(options.speed);
            if(options.height == 0)
            {
            obj.children('li:eq(' + options.showItems + ')').hide().fadeIn(options.speed).show();
            }
        }
 
        clone.appendTo(obj);
    };
    
    moveDown = function(obj2, height, options){
        if(options.isPaused)
            return;
        
        var obj = obj2.children('ul');
        
        var clone = obj.children('li:last').clone(true);
        
        if(options.height > 0)
        {
            height = obj.children('li:first').height();
        }
        
        obj.css('top', '-' + height + 'px')
            .prepend(clone);
            
        obj.animate({top: 0}, options.speed, function() {
            $(this).children('li:last').remove();
        });
        
        if(options.animation == 'fade')
        {
            if(options.height == 0)
            {
                obj.children('li:eq(' + options.showItems + ')').fadeOut(options.speed);
            }
            obj.children('li:first').hide().fadeIn(options.speed).show();
        }
    };
    
    return this.each(function() {
        var obj = $(this);
        var maxHeight = 0;
 
        obj.css({overflow: 'hidden', position: 'relative'})
            .children('ul').css({position: 'absolute', margin: 0, padding: 0})
            .children('li').css({margin: 0, padding: 0});
 
        if(options.height == 0)
        {
            obj.children('ul').children('li').each(function(){
                if($(this).height() > maxHeight)
                {
                    maxHeight = $(this).height();
                }
            });
 
            obj.children('ul').children('li').each(function(){
                $(this).height(maxHeight);
            });
 
            obj.height(maxHeight * options.showItems);
        }
        else
        {
            obj.height(options.height);
        }
        
        var interval = setInterval(function(){ 
            if(options.direction == 'up')
            { 
                moveUp(obj, maxHeight, options); 
            }
            else
            { 
                moveDown(obj, maxHeight, options); 
            } 
        }, options.pause);
        
        if(options.mousePause)
        {
            obj.bind("mouseenter",function(){
                options.isPaused = true;
            }).bind("mouseleave",function(){
                options.isPaused = false;
            });
        }
    });
};
})(jQuery);
 

[memoadian]

primero que nada, es evidente que esto es javascript, no se en que parte le ves el php

luego este script es muy claro, incluyes la libreria js de Jquery, luego haces una lista dentro de un div que contenga un class="x"

y al final simplemente colocas esto

Código Javascript:

<script type="text/javascript">
$('.x').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});
</script>
 

en donde quieras, puede ser al final del body o entre las etiquetas head de tu web, si te fijas lo unico es que la clase x o como la llames la llamas con la última parte del código que te pasé, eso es todo, lo demás es solo añadir las librerías que hacen toda la chamba.

[abimex]

no precisamente tiene que ser una clase, tambien puede ser un id, en el ejemplo usan un id, ya que jquery puedes usar cualquier objeto dentro del DOM....
Y para usar este plugin debes utilizar listas, por ejemplo

Código HTML:

<div class="noticias>
<ul>
<li> Noticia uno </li>
<li> Noticia dos </li>
<li> Etc... </li>
</ul>
</div>
 

y en el head recuerda tambien poner el

Código HTML:

<script type="text/javascript" src="jquery.js"></script>
 

quedaria masomenos asi

Código HTML:

<!doctype html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
    $('.noticias').vTicker();
});
</script>
</head>
<body>
<div class="noticias" style="width: 200px; height: 100px;">
<ul>
<li> Noticia 1 </li>
<li> Noticia 2 </li>
<li> Noticia 3 </li>
<li> Noticia 4 </li>
<li> Noticia 5 </li>
<li> Noticia 6 </li>
<li> Noticia 7 </li>
</ul>
</div>
</body>
</html>
 

prueba el codigo que acabo de poner a mi si me funciono

[memoadian]

el chiste es que se llama al div de jquery, puede ser clase, id, name, pseudo clase, pero nocompliquemos al joven con nimiedades.

[fher2010]

Muchas gracias memoadian ... me hiciste reir y recordar a un gran amigo cuando dices .. "primero que nada, es evidente que esto es javascript, no se en que parte le ves el php" .... jajaja ... y es q tienes mucha razón ... lo q pasa es q las noticias que mostrarán el slide salen de una serie de consultas mediante php a una BD ... y claro .. el archivo en el q estoy trabajando se llama index.php ----- jejeje ... sorry de todas maneras por la inexperiencia .... En fin gracias por la ayuda hay un poco mas de claridad... aunq lamento decir q aún no lo comprendo del todo pero mis dudas se van discipando y seguiré leyendo mas sobre el uso de librerias js ..

En cuanto a abimex ... efectivamente el código q colocaste funciona a la perfección .... y soluciona el problema .. aunq no se como ni por qué ... jajajajaja ....

Es decir .. en tu ejemplo veo q incluyes o llamas a la librería aquí:

Código Javascript:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
 

luego declaras la clase:

Código Javascript:

<script type="text/javascript">
$(function(){
    $('.noticias').vTicker();
});
</script>
 

y claro en el div ya es cuestion de utilizarla .. como clase en este caso o id, name, etc .. si fuera la cuestion ...

Pero mis dudas son:

Si ya tengo la librería copiada en el directorio del sitio es decir en la siguiente ruta "js/jquery.vticker.js" .. y en el HTML coloco ...

Código Javascript:

<script type="text/javascript" src="js/jquery.vticker.js"></script>
<script type="text/javascript">
$(function(){
    $('.noticias').vTicker();
});
</script>
 

¿por qué no funciona?

¿Por qué cuando incluyes la librería parece q la llamas directamente desde el sitio de descarga (o del creador si se prefiere) .. y no desde tu propio sitio? ... digo porque se ve mas o menos así ..

src="http://code.jquery.com/jquery-latest.min.js"
src="http://www.jugbit.com/jquery/jquery.vticker-min.js"

En fin son dudas q tengo ... no me gusta poner por poner un código o script q no es hecho por mi ... no soy muy avanzado en programación pero con lo que se hasta ahora me las rebusco ...

Con la solución (código) q colocaste funciona de maravilla y tendría q darme por satisfecho ... pero seguiré investigando hasta entender ... en una de esas son las pocas horas de sueño q tengo ..en una de esas mañana despierto y veo las cosas con mas claridad ...

Muchas gracias a ambos por responder ...

Suerte

[memoadian]

lo que pasa es que seguramente la ruta relativa que usas esta mal escrita, entra al código fuente y clickea el link de esa ruta relativa que pones

js/jquery.vticker.js

y si te sale el código esta bien, pero si te sale otra cosa como una página 404 es que esta mal.