Ayuda con una galeria pequeña.
Avatar Image
Machacateclados
Machacateclados

Bueno gente, mas que nada Josepe, andube buscando galerias de imagenes despues del ultimo tema, y a pesar de no poseer la "descripcion", a esta si logre hacerla andar... pero hay un gran problema. Como podran ver, es el siguiente:

http://levelx-prueba.mforos.com/

Mientras una imagen desaparese, la otra aparese ensima y asi sucesivamente... o sea, es basicamente como deberia funcionar, solo que deberia apareser una sobre la otra, no una arriba de la otra.

Este es el code, esta con html y JQ:

<center><div id="toprot">
                        <ul class="ppt">
                <li style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></li> 
         
                <li style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-Life Resurrection!" border="0"></a></li>          <li style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></li>                   <li style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></li>              <li style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></li>                   
            </ul>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        var cur = $('.ppt li:first');
        
        function animate() {
            cur.fadeOut( 1000 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
            cur.fadeIn( 1000 );
        }
        
        
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>

Alguien sabe donde me estoy equivocando?

Intente varias formas, incluso revice si de casualidad, tenia el JQ bien llamado, pero no le pego :S

Mil gracias.

NOTA: Dije mas que nada Josepe por que el me respondio la ultima vez.

Avatar Image
Moderador del foro
Moderador del foro

Lo mejor que puedes hacer es poner el fadeOut a 0:

<center><div id="toprot">
                        <ul class="ppt">
                <li style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></li>
        
                <li style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-Life Resurrection!" border="0"></a></li>          <li style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></li>                   <li style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></li>              <li style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></li>                  
            </ul>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        var cur = $('.ppt li:first');
       
        function animate() {
            cur.fadeOut( 0 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
            cur.fadeIn( 1000 );
        }
       
       
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>
Avatar Image
Machacateclados
Machacateclados
<center><div id="toprot">
                        <ul class="ppt">
                <li style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></li>
        
                <li style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-Life Resurrection!" border="0"></a></li>          <li style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></li>                   <li style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></li>              <li style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></li>                  
            </ul>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        var cur = $('.ppt li:first');
       
        function animate() {
            cur.fadeOut( 0 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
            cur.fadeIn( 1000 );
        }
       
       
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>

Quedo bien, se arreglo el bug, pero no quedo igual al ejemplo que estaba en la pagina. Usaron como ejemplo un contenido que tiene el banner de la pagina de Clanco (www.clanco-com.ar) .

Ahi se ve que mientras desaparece uno, aparese el otro.

De todas formas anda y quedo bien, pero una pregunta.

¿Como puedo sacarle el punto que aparese abajo a la izquierda de las imagenes?

Avatar Image
Machacateclados
Machacateclados
<center><div id="toprot">
                        <ul class="ppt">
                <li style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></li>
        
                <li style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-Life Resurrection!" border="0"></a></li>          <li style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></li>                   <li style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></li>              <li style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></li>                  
            </ul>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        var cur = $('.ppt li:first');
       
        function animate() {
            cur.fadeOut( 0 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
            cur.fadeIn( 1000 );
        }
       
       
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>

Quedo bien, se arreglo el bug, pero no quedo igual al ejemplo que estaba en la pagina. Usaron como ejemplo un contenido que tiene el banner de la pagina de Clanco (www.clanco-com.ar) .

Ahi se ve que mientras desaparece uno, aparese el otro.

De todas formas anda y quedo bien, pero una pregunta.

¿Como puedo sacarle el punto que aparese abajo a la izquierda de las imagenes?

Por cierto, a todo esto, sigue teniendo un error la galeria... Resulta que mientras escribia la anterior respuesta lo deje corriendo en el foro de prueba, cuando volvi a abrir la pestaña aparesian todas las imagenes una arriva de la otra y parpadeando...

Eso tampoco deberia pasar.

Por lo que me das a entender, el codigo esta incompleto no?

Avatar Image
Moderador del foro
Moderador del foro

El punto que dices que aparece abajo de las imágenes es porque las imágenes las están poniendo en una lista desordenada:

<ul>
    <li><img /></li>
    <li><img /></li>
</ul>

Que tendría como resultado:

  • <img />
  • <img />

No he mirado como funciona el código, y no se si al quitaqr los li dejará de funcionar o no.

Cita:

Por lo que me das a entender, el codigo esta incompleto no?

No lo se, yo he modificado el código que tú has posteado y te lo he devuelto entero (solo he cambiado la propiedad fadeOut de 1000 a 0). Así que si está incompleto deberías revisarlo donde lo cogiste.

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por Josepepe033

El punto que dices que aparece abajo de las imágenes es porque las imágenes las están poniendo en una lista desordenada:

<ul>
    <li><img /></li>
    <li><img /></li>
</ul>

Que tendría como resultado:

  • <img />
  • <img />

No he mirado como funciona el código, y no se si al quitaqr los li dejará de funcionar o no.

Cita:

Por lo que me das a entender, el codigo esta incompleto no?

No lo se, yo he modificado el código que tú has posteado y te lo he devuelto entero (solo he cambiado la propiedad fadeOut de 1000 a 0). Así que si está incompleto deberías revisarlo donde lo cogiste.

Y el ultimo error como lo soluciono? ese que cuando cambio de pestaña despues de un rato vuelvo y aparesen las 4 imagenes parpadeando.

Avatar Image
Moderador del foro
Moderador del foro

Sí, acabo de revisar la parte de JavaScript y se manejan desde el <ul>. Prueba esto (cambiando el <ul> por un <div> y los <li> por <span>):

<center><div id="toprot">
                        <div class="ppt">
                <span style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></span>
        
                <span style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-spanfe-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-spanfe Resurrection!" border="0"></a></span>          <span style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></span>                   <span style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></span>              <span style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></span>                  
            </div>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt span:gt(0)').hide();
        $('.ppt span:last').addClass('last');
        var cur = $('.ppt span:first');
       
        function animate() {
            cur.fadeOut( 0 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt span:first');
            else
                cur = cur.next();
            cur.fadeIn( 1000 );
        }
       
       
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>
Avatar Image
Machacateclados
Machacateclados
<center><div id="toprot">
                        <div class="ppt">
                <span style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></span>
        
                <span style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-spanfe-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-spanfe Resurrection!" border="0"></a></span>          <span style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></span>                   <span style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></span>              <span style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></span>                  
            </div>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt span:gt(0)').hide();
        $('.ppt span:last').addClass('last');
        var cur = $('.ppt span:first');
       
        function animate() {
            cur.fadeOut( 0 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt span:first');
            else
                cur = cur.next();
            cur.fadeIn( 1000 );
        }
       
       
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>

Si cacando <li> </li> dejaba de funcionar...

Ahora el unico problema que queda es el que cuando yo cambio de pestaña (en este monento estoy usando Google Chrome) y estoy un rato en otra pagina o lo que sea, y luego VUELVO a la pestaña donde esta la galeria, aparesen las 4 imagenes que estan actualmente pero una sobre la otra y parpadeando, hasta que se estabilida y retoma el ritmo normal.

Es como si la galeria siguiera corriendo, pero el navegador no la dejara, no se como explicarlo.

Podrias notarlo vos si estas un rato en este foro con la otra pestaña abierta de la galeria y cuando vuelvas seguramente te pasa.

Avatar Image
Moderador del foro
Moderador del foro
Escrito originalmente por GM-Dero
Si cacando <li> </li> dejaba de funcionar...

También he modificado el código JS, por eso ahora si funciona quitando la lista desordenada.

El otro error que comentas, no se por qué sucede, he estado un buen rato en esa página y no me ha ocurrido (ni cambiando de pestaña ni estando quieto).

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por Josepepe033
Escrito originalmente por GM-Dero
Si cacando <li> </li> dejaba de funcionar...

También he modificado el código JS, por eso ahora si funciona quitando la lista desordenada.

El otro error que comentas, no se por qué sucede, he estado un buen rato en esa página y no me ha ocurrido (ni cambiando de pestaña ni estando quieto).

Estube mirando ahora tambien con Firefox y pasa de misma manera.

Aca dejo unas screenshots:

Justo agarre "parpadeando" en la screen.

Asi es cuando vuelve al estado normal.

Estube investigando, el codigo lo saque de justamente una persona que preguntaba en un yahoo respuestas, como podria arreglarlo, nadie le respondio.

Segun el, su amigo lo saco de la web de clanco, y puso el ejemplo de la pagina.

www.clanco.com.ar

En el banner a la derecha, asi es como realmente debe funcionar.

Si funciona mal con chrome y con Firefox entonces sigue abiendo un error en el codigo.

El HTML no parese estar mal, incluso use la herramienta "Inspeccionar elemento" del Google Chrome para ver el codigo fuente y es de ahi de donde lo saco este "Anonimo". El codigo funciona con <li> y de hecho, funciona muy diferente al que poseo yo, no se por que motivo una imagen va tomando la foma de la otra "cambiando" y el que tengo yo, entra desde un destello blanco.

Me imagino que donde esta ESE error del destello blanco tambien se encuentra el problema que detalle mas arriva con imagenes.

Espero que esto se pueda solucionar, se que no es un codigo que presente una galeria para decir "wow" y que me esta trayendo mas problemas que los que tiene mi abuela con su cadera, pero la verdad es que esto tan simple y que tanto busque era justo lo que necesitaba.

Si no se puede resolver el asunto bueno... una lastima y desde ya agradesco muchisimo tu ayuda y felicitarte (medio tarde) por tu nuevo rango, ademas de que lo tenes bien merecido.

Avatar Image
@man / @woman
@man / @woman

A ver si esto sirve (para pruebas lo guardas como html y ejecutas):

Spoiler:

<html>
<head>
<style>
<style type='text/css'>
body{font-family:Verdana;font-size:13px;}
#ppt li{list-style-type:none;}
#ppt li img{display:none;width:500px;height:150px;border:0;}
</style>
</head>
<body>
<center>
<div>
<ul id='ppt'>
<li><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-c ounter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" alt="Lanzamiento del servidor del CS MW 2.0!"></a></li>
<li><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrec tion-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" alt="V2 Half-Life Resurrection!"></a></li>
<li><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News. jpg" alt="Info Gamer"></a></li>
<li><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Gam es.PNG" alt="Descarga y pedi tus juegos!"></a></li>
<li><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562 "><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" alt="Level X en Facebook!"></a></li>
</ul>
</div>
</center>

<script type='text/javascript'>
var img=document.getElementById('ppt').getElementsByTagName('img');
var last=img.length-1;
var cur=0;
var pre=last;

function animate(){
if(cur==last){
pre=last;
cur=0;
}else{
pre=cur;
cur=cur+1;
}
img[pre].style.display='none';
img[cur].style.display='block';
}
setInterval('animate()',2000);
</script>

</body>
</html>

#ppt li{list-style-type:none;} lo que hace es quitar los puntos a los <li>

y en vez de class=ppt usé id=ppt

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

A ver si esto sirve (para pruebas lo guardas como html y ejecutas):

Spoiler:

<html>
<head>
<style>
<style type='text/css'>
body{font-family:Verdana;font-size:13px;}
#ppt li{list-style-type:none;}
#ppt li img{display:none;width:500px;height:150px;border:0;}
</style>
</head>
<body>
<center>
<div>
<ul id='ppt'>
<li><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-c ounter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" alt="Lanzamiento del servidor del CS MW 2.0!"></a></li>
<li><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrec tion-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" alt="V2 Half-Life Resurrection!"></a></li>
<li><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News. jpg" alt="Info Gamer"></a></li>
<li><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Gam es.PNG" alt="Descarga y pedi tus juegos!"></a></li>
<li><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562 "><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" alt="Level X en Facebook!"></a></li>
</ul>
</div>
</center>

<script type='text/javascript'>
var img=document.getElementById('ppt').getElementsByTagName('img');
var last=img.length-1;
var cur=0;
var pre=last;

function animate(){
if(cur==last){
pre=last;
cur=0;
}else{
pre=cur;
cur=cur+1;
}
img[pre].style.display='none';
img[cur].style.display='block';
}
setInterval('animate()',2000);
</script>

</body>
</html>

#ppt li{list-style-type:none;} lo que hace es quitar los puntos a los <li>

y en vez de class=ppt usé id=ppt

El bug ya no ocurre al pareser, pero se perdio la transicion de una imagen a la otra y hai algunas que por mas que las relinkee no aparesen..

http://levelx-prueba.mforos.com/

Avatar Image
@man / @woman
@man / @woman

La transición es producida por la librería que se carga con Mi@ (este JavaScript no la usa de allí que la transición sea instantánea).

Si no puedes ver algunas de las imágenes es debido que al copiar y pegar se inserten espacios o saltos de línea en las urls.

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

La transición es producida por la librería que se carga con Mi@ (este JavaScript no la usa de allí que la transición sea instantánea).

Si no puedes ver algunas de las imágenes es debido que al copiar y pegar se inserten espacios o saltos de línea en las urls.

Y como puedo hacer que esa transicion vuelva? de ser asi ya estaria solucionado todo por que en lo demas quedo bien solo falta eso.

Avatar Image
@man / @woman
@man / @woman

Para tener trancisión usa el código anterior; intenta poner este estilo para quitar los puntos de los <li>.

.ppt li{list-style-type:none;}

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

Para tener trancisión usa el código anterior; intenta poner este estilo para quitar los puntos de los <li>.

.ppt li{list-style-type:none;}

Ok lo voy a intentar.

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GM-Dero
Escrito originalmente por GestionXls

Para tener trancisión usa el código anterior; intenta poner este estilo para quitar los puntos de los <li>.

.ppt li{list-style-type:none;}

Ok lo voy a intentar.

Lo intente, poniendo el "." en vez del "#" como mostraste vos, quedo peor, mucho peor, a si que lo volvi al estado anterior.

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GM-Dero
Escrito originalmente por GM-Dero
Escrito originalmente por GestionXls

Para tener trancisión usa el código anterior; intenta poner este estilo para quitar los puntos de los <li>.

.ppt li{list-style-type:none;}

Ok lo voy a intentar.

Lo intente, poniendo el "." en vez del "#" como mostraste vos, quedo peor, mucho peor, a si que lo volvi al estado anterior.

Estare atento al tema

Avatar Image
@man / @woman
@man / @woman

Me perdí un poco, pero hago una aclaración:

----

si en el HTML usas class, en CSS debería ser con punto, así

<ul class='ppt'>
<li ....

.ppt li{list-style-type:none;}

----

si usas id, en CSS debería ser con numeral, así

<ul id='ppt'>
<li ....

#ppt li{list-style-type:none;}

----

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

Me perdí un poco, pero hago una aclaración:

----

si en el HTML usas class, en CSS debería ser con punto, así

<ul class='ppt'>
<li ....

.ppt li{list-style-type:none;}

----

si usas id, en CSS debería ser con numeral, así

<ul id='ppt'>
<li ....

#ppt li{list-style-type:none;}

----

Bueno, probe el codigo de las dos formas, si cambiaba el ID por CLASS para usar los "." en vez de "#" la galeria ni siquiera cargaba... quedaba como codigo roto.

Entonces hice algunas variaciones, y aunque cargaba quedo mal, al fin y al cabo termine poniendo ID de nuevo con los # y quedo la galeria como antes.

En cuestion, me esta haciendo la vida imposible. Lo estare maltratando mucho (?) jaja

Avatar Image
@man / @woman
@man / @woman

El maltrato -a veces- se lo dá uno mismo.

En el foro, hay muchísimo código que se está ejecutando, lo ideal es agregar elementos de forma tal que no se vean 'perjudicados'.

Para ejemplo: si tomas los códigos (usando class o id) en archivos individuales y los pruebas en tu pc, verás que ambos funcionan; pero al integrarlos al foro ya no (señal inequívoca que algo lo afecta: CSS o JavaScript).

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

El maltrato -a veces- se lo dá uno mismo.

En el foro, hay muchísimo código que se está ejecutando, lo ideal es agregar elementos de forma tal que no se vean 'perjudicados'.

Para ejemplo: si tomas los códigos (usando class o id) en archivos individuales y los pruebas en tu pc, verás que ambos funcionan; pero al integrarlos al foro ya no (señal inequívoca que algo lo afecta: CSS o JavaScript).

Osea que la galeria para mi se hace imposible? Osea, tenerla asi, con la transicion y sin el bug que dije antes y marque en las imagenes no se puede?

Ademas... este codigo esta funcionando mal en un foro de prueba que NO TIENE NADA.

Todavia no lo pase a mi foro.

este es el de prueba (esta limpio)

www.levelx-prueba.mforos.com

y el mio esta en mi enlace web abajo.

O sea que el unico codigo que podria alterar ahi es el mimo de Mi@...

Si yo dijera que lo puse en mi foro de una si te diria que hay mucho codigo que podria perjudicar a este en CSS, pero en el foro de prueba donde el unico CSS es el de Mi@?

no lo creo... algo mas esta pasando, ALGO tiene de malo este codigo.

Avatar Image
@man / @woman
@man / @woman

Me expresé mal, no me refería que hay algo malo en el código, sólo que juntos no se llevan bien...

El foro usa JavaScript de JQuery (varios scripts relacionados), mas código propio de Mi@, mas el de publicidad, el del editor. Cualquiera puede estar provocando 'que no se lleven bien' y sumado s los estilos.

Para ejemplo, mientras escribo esto (la barra superior de botones, este editor, los mensajes previos del tema y el pie de página), el código tiene 10 scripts de JavaScript y 3 de estilos.

Imposible? no, no lo es, pero hay que buscar en todo eso para encontrar las causas, y -de lograrlo. hay una alta probabilidad que comience a verse afectado algun elemento que ahora no lo está; o buscar alternativas como usar divs (ya planteado en posts anteriores).

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por GestionXls

Me expresé mal, no me refería que hay algo malo en el código, sólo que juntos no se llevan bien...

El foro usa JavaScript de JQuery (varios scripts relacionados), mas código propio de Mi@, mas el de publicidad, el del editor. Cualquiera puede estar provocando 'que no se lleven bien' y sumado s los estilos.

Para ejemplo, mientras escribo esto (la barra superior de botones, este editor, los mensajes previos del tema y el pie de página), el código tiene 10 scripts de JavaScript y 3 de estilos.

Imposible? no, no lo es, pero hay que buscar en todo eso para encontrar las causas, y -de lograrlo. hay una alta probabilidad que comience a verse afectado algun elemento que ahora no lo está; o buscar alternativas como usar divs (ya planteado en posts anteriores).

Entonces gracias a que este codigo puede estar afectado por algo interno de mia como vos decis se debe quedar sin animacion como esta?

Avatar Image
Moderador del foro
Moderador del foro
Escrito originalmente por GM-Dero

Entonces gracias a que este codigo puede estar afectado por algo interno de mia como vos decis se debe quedar sin animacion como esta?

O eso, o el código que obtuviste está incompleto.

Avatar Image
Machacateclados
Machacateclados
Escrito originalmente por Josepepe033
Escrito originalmente por GM-Dero

Entonces gracias a que este codigo puede estar afectado por algo interno de mia como vos decis se debe quedar sin animacion como esta?

O eso, o el código que obtuviste está incompleto.

Pero si logramos que andubiera sin la transicion pero bien, tendriamos que hacer que ande con ella agregandosela aparte. O no se podria?

Avatar Image
Moderador del foro
Moderador del foro

El problema que daba la transición es que empezaba a mostrar el siguiente elemento sin que se hubiera ocultado el anterior. Podría quedar bien si ponemos la primera transición a 500, y ejecutamos la segunda (a 500 también) pasados 500 milisengundos (con setTimeout()).

Algo así (modifico el código del primer mensaje):

<center><div id="toprot">
                        <ul class="ppt">
                <li style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></li> 
         
                <li style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-Life Resurrection!" border="0"></a></li>          <li style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></li>                   <li style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></li>              <li style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></li>                   
            </ul>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        var cur = $('.ppt li:first');
        
        function animate() {
            cur.fadeOut( 500 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
            setTimeout(function(){cur.fadeIn( 500 )},500);
        }
        
        
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>

Pruébalo y nos dices. ;)

Avatar Image
Machacateclados
Machacateclados
<center><div id="toprot">
                        <ul class="ppt">
                <li style="display: none; "><a href="http://levelx.mforos.com/1530543/10232582-inauguracion-del-servidor-counter-strike-modern-warfare-2-0/"><img src="https://espacioforos.miarroba.st/1530543/upload/bannervert-CSMW2.png" width="500" height="150" alt="Lanzamiento del servidor del CS MW 2.0!" border="0"></a></li> 
         
                <li style="display: none; "><a href="http://levelx.mforos.com/1899782/9914447-descargar-half-life-resurrection-v1-1-1/"><img src="https://espacioforos.miarroba.st/1530543/upload/3.png" width="500" height="150" alt="V2 Half-Life Resurrection!" border="0"></a></li>          <li style="display: none; "><a href="http://levelx.mforos.com/1973693-info-sobre-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Gamers_News.jpg" width="500" height="150" alt="Info Gamer" border="0"></a></li>                   <li style="display: none; "><a href="http://levelx.mforos.com/1821225-descargas-de-juegos/"><img src="https://espacioforos.miarroba.st/1530543/banners_secciones/Download_Games.PNG" width="500" height="150" alt="Descarga y pedi tus juegos!" border="0"></a></li>              <li style="display: none; "><a href="http://www.facebook.com/pages/Comunidad-Gamer-Level-X/129022583828562"><img src="https://espacioforos.miarroba.st/1530543/lxfb.png" width="500" height="150" alt="Level X en Facebook!" border="0"></a></li>                   
            </ul>
        <script type="text/javascript" src="https://espacioforos.miarroba.st/1530543/archivos_web/jQuery.js"></script>
        <script type="text/javascript">
        $('.ppt li:gt(0)').hide();
        $('.ppt li:last').addClass('last');
        var cur = $('.ppt li:first');
        
        function animate() {
            cur.fadeOut( 500 );
            if ( cur.attr('class') == 'last' )
                cur = $('.ppt li:first');
            else
                cur = cur.next();
            setTimeout(function(){cur.fadeIn( 500 )},500);
        }
        
        
        $(function() {
            setInterval( "animate()", 5000 );
        } );
        </script>
        </div></center>

Pruébalo y nos dices. ;)

Volvio a tener el mismo error de antes, ese que despues de un rato en otra pestaña al volver se ponia una imagen sobre la otra.

Ademas de que volvio a apareser el punto, es como el primer codigo que me pasaste

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Opciones:
Permisos:
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 06:47 UTC+01:00
Ir al subforo:
Temas similares
TemaUsuariosRespuestasVisitasActividad
bijinusagi GestionXls4801Feb/11
3773yomero aerialss88 arabe195522kAug/09