Bienvenido, Invitado
Nombre de Usuario Contraseña: Recordarme

Parallax como banner
(1 viendo) (1) Invitado
  • Página:
  • 1
  • 2

TEMA: Parallax como banner

Parallax como banner hace 2 años, 3 meses #13716

Buena Joni, googleando como siempre me tope con un .js que cuando vean de que trata seguro que va a poner de lo mas feliz a mas de uno jaja.

Se trata del parallax.

La verdad, este .js es asombroso! pero por mas que leí, y leí, e investigue, hice cerca de 50 pruebas diferentes, etc... no lo pude hacer andar... (en bleachanime.com.ar)

En teoría, es muy simple, pero por mas que intento no logro que me trabaje en el lugar del banner de mi sitio...

webdev.stephband.info/parallax.html

Esa es la dirección del .js

En teoría (insisto), debería ser tan simple como agregar el script del jquery.jparallax.js en el <header>, dar la indicación del movimiento y luego en el lugar del banner, agregar las imágenes con <div>... pero NO puedo hacerlo funcionar de ninguna manera.

Hago lo siguiente:

dentro del head coloco:

 
<script type="text/javascript" src="jquery.jparallax.js"></script>
 
<script type="text/javascript">
 
<!--
// jQuery.noConflict();
// RUN
 
jQuery(document).ready(function(){
 
jQuery('h1').html('');
 
jQuery('#wrapper_top').jparallax(
{},
 
{xtravel: '0px', ytravel: '0px'},
 
{xtravel: '320px', ytravel: '320px'},
 
{xtravel: '120px', ytravel: '120px'}
);
});
//-->
 
</script>
 


y luego en el <div id=wrapper_top> coloco lo siguiente:

<div id="wrapper_top">
 
<div style="width: 700px; height: 300px;">
<img alt="" src="images/0.png"/></div>
 
<div style="width: 750px; height: 280px;">
<img style="position:absolute; top:0px; left:350px;" alt="" src="images/1.png"/></div>
 
<div style="width: 700px; height: 250px;">
<img style="position:absolute; top:200px; left:0px;" alt="" src="images/2.png"/></div>
 
</div>


Pero no hay caso... no funciona lamentablemente.

Si necesitas un joomla para hacer testeos, mañana mismo te paso un enlace con el joomla montado y los mismos componentes que el sitio actual (mi sitio de pruebas).

(otro detalle, es que como no estaba seguro donde colocar el jquery.jparallax.js lo fui colocando en todas las carpetas para asegurarme que lo tome jajajaja)

Un abrazo!
  • DimeOscuro
  • DESCONECTADO
  • Ayudante
  • Temas: 128
  • Karma: 5
Última Edición: hace 2 años, 3 meses Por JoniJnm.

Re: Parallax como banner hace 2 años, 3 meses #13717

Hola, pásame el demo y miro qué tienes mal, para no tener que poner el jquery en todas las carpetas pon la ruta entera:
<script type="text/javascript" src="http://www.mi-web.com/js/jquery.jparallax.js"></script>

Tienes que incluir las dos librerías para que funcione:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://webdev.stephband.info/js/jquery.jparallax.js"></script>


Esto funciona:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://webdev.stephband.info/" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
//-->
</script>
</head>
<body>
<div id="parallax" class="clear">
<div style="width:860px; height:273px;">
<img src="images/parallax_sketch/0_sun.png" alt="" style="position:absolute;left:300px;top:-12px;"/>
</div>
<div style="width:920px; height:274px;">
<img src="images/parallax_sketch/1_mountains.png" alt="" />
 
</div>
<div style="width:1100px; height:284px;">
<img src="images/parallax_sketch/2_hill.png" alt="" style="position:absolute; top:40px; left:0;" />
</div>
<div style="width:1360px; height:320px;">
<img src="images/parallax_sketch/3_wood.png" alt="" style="position:absolute; top:96px; left:0;"/>
</div>
</div>
</body>
</html>
  • JoniJnm
  • DESCONECTADO
  • Administrador
  • Temas: 4167
  • Karma: 144
Los siguientes usuarios han agradecido: DimeOscuro

Re: Parallax como banner hace 2 años, 3 meses #13727

EDITO:

Era un error mio, tenia que hacer la carga del js desde otro php. Pero ya esta funcionando barbaro

Lo pueden ver en bleachanime.com.ar/

Ahora que funciona le hago un diseño mas bonito al banner.

Como siempre, un maestro, muchas gracias Joni!

PEEERO.... parece que me esta haciendo conflictos con otro js...

Creo que es precisamente con jquery.min.js

Por que funciona el banner, pero deja de funcionar el modulo de gavik_pro

En la pagina de inicio, el modulo llamado Novedades Bleach Anime! deja de funcionar...

Alguna idea de como evitar esto Joni?
  • DimeOscuro
  • DESCONECTADO
  • Ayudante
  • Temas: 128
  • Karma: 5
Última Edición: hace 2 años, 2 meses Por DimeOscuro. Razón: nuevo bug

Re: Parallax como banner hace 2 años, 2 meses #13733

Qué librerías utiliza "Novedades Bleach Anime"? A ver si se van a cargar dos jquery.min.js
  • JoniJnm
  • DESCONECTADO
  • Administrador
  • Temas: 4167
  • Karma: 144

Re: Parallax como banner hace 2 años, 2 meses #13737

utiliza:

engine_category.js
engine_category_compressed.js
engine_standard.js
engine_standard_compressed.js
mootools.js
  • DimeOscuro
  • DESCONECTADO
  • Ayudante
  • Temas: 128
  • Karma: 5

Re: Parallax como banner hace 2 años, 2 meses #13742

gracias DimeOscuro .. me voy a poner a modificar mi plantilla... . si llegas a encontrar mas cosas para enchular.. ya sabes postealo
  • gonzaunit
  • DESCONECTADO
  • Colaborador
  • Temas: 291
  • Karma: 25

Re: Parallax como banner hace 2 años, 2 meses #13787

Sigue sin funcionar? Puedes desactivar el plugin compressJsCss para que lo vea mejor?
  • JoniJnm
  • DESCONECTADO
  • Administrador
  • Temas: 4167
  • Karma: 144

Re: Parallax como banner hace 2 años, 2 meses #13804

Hola Joni, si... sigue sin funcionar y estuve toqueteando e investigando y no hay caso... probé de todo y nada aun.

Desactivo el plugin para los js, solo queda activo para los css por que me come crudo el rendimiento del sitio actual jajajaja.. Si te estorba el plugin con los css lo desactivo por completo.
  • DimeOscuro
  • DESCONECTADO
  • Ayudante
  • Temas: 128
  • Karma: 5
Última Edición: hace 2 años, 2 meses Por DimeOscuro.

Re: Parallax como banner hace 2 años, 2 meses #13818

Hola, pues sí que hay errores .js, he visto que tienes dos veces cargando la librería jquery:
<script type="text/javascript" src="http://bleachanime.com.ar/templates/template36a4w/lib/js/jquery-1.3.2-vsdoc2.js"></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Deja la 1.3.2, que es más reciente

Cargas también la librería mootools de google, pero Joomla ya la trae:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>


A ver qué pasa después de arreglar eso
  • JoniJnm
  • DESCONECTADO
  • Administrador
  • Temas: 4167
  • Karma: 144
Última Edición: hace 2 años, 2 meses Por JoniJnm.
  • Página:
  • 1
  • 2
Página generada en: 0.60 segundos