Foros del Web » Programando para Internet » Jquery »

Jquery. Evento hover, cambiarlo por función.

Estas en el tema de Jquery. Evento hover, cambiarlo por función. en el foro de Jquery en Foros del Web. Hola, tengo un plugin Jquery que al pasar el mouse por encima de cada imagen esta se agranda y otras cosas. Lo que querría es ...
  #1 (permalink)  
Antiguo 19/01/2012, 04:26
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Jquery. Evento hover, cambiarlo por función.

Hola,

tengo un plugin Jquery que al pasar el mouse por encima de cada imagen esta se agranda y otras cosas.

Lo que querría es que esa función respondiera a la ejecución de otra en lugar de responder al evento hover.

Tengo una función que hace varias cosas:
Código:


function Right(){
// meter aquí lo que hace que se produzca lo que se produce cuando se produce el evento .hover o bien en la función goto_next()
goto_next(); 
}
El demo del plugin:
http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/
Código:





$(function() {

    $('#container img').hover(

        function(){

            var $this = $(this);

            $this.stop().animate({

                    'opacity':'1.0',

                    'height':'200px',

                    'top':'0px',

                    'left':'0px'

                });

        },

        function(){

            var $this = $(this);

            $this.stop().animate({

                'opacity':'0.5',

                'height':'500px',

                'top':'-66.5px',

                'left':'-150px'

                });

        }

    );

});
Gracias de antemano
  #2 (permalink)  
Antiguo 19/01/2012, 11:32
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 13 años
Puntos: 59
Respuesta: Jquery. Evento hover, cambiarlo por función.

que tratas de hacer y a que evento reacciona goto_next();
  #3 (permalink)  
Antiguo 19/01/2012, 13:36
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Jquery. Evento hover, cambiarlo por función.

Reacciona a un onload que viene de ajax
  #4 (permalink)  
Antiguo 19/01/2012, 17:17
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 13 años
Puntos: 59
Respuesta: Jquery. Evento hover, cambiarlo por función.

mi idea era remplazar este evento

$('#container img').hover(

por ese pero siendo un onload no se me ocurre nada

cual es la idea en concreto a ver si se me ocurre algo

  #5 (permalink)  
Antiguo 20/01/2012, 04:48
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Jquery. Evento hover, cambiarlo por función.

Hola, ante todo gracias.

En principio pongo que quiero que reaccione a una función en lugar de al evento .hover porque así precisamente no tendría problemas para invocar lo que quiero hacer.

Bueno, ese plugin lo que hace es un grid con imágenes, que al pasarle el ratón por encima se agranda.

Lo que quiero hacer es elegir yo la imagen y que esta haga el efecto de agrandarse cuando la tengo elegida.

Por ejemplo:
<div onclick="siguiente_imagen()">siguinete</div>

function siguiente_imagen(){
//elijo el número de imagen y me hace el efecto que se produce
//con .hover
}

en lugar de this, elegiré la imagen por su id y la agrandaré.

Espero haberme explicado.

Gracias
  #6 (permalink)  
Antiguo 20/01/2012, 15:19
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 13 años
Puntos: 59
Respuesta: Jquery. Evento hover, cambiarlo por función.

fíjate si esto te sirve cualquier duda pregunta y tratare de responderte

en el html

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="style.css" type="text/css"/>
       <script type="text/javascript" src="mijquery.js"></script>
      <script type="text/javascript" src="funciones.js"></script>
    <title>Photo Zoom Out Effect with jQuery</title>
    </head>
    <body>
        <div id="container" class="container">
            <div class="wrap"><img src="images/image1.jpg" alt="Picture 1" id="img1"/></div>
            <div class="wrap"><img src="images/image2.jpg" alt="Picture 2" id="img2"/></div>
            <div class="wrap"><img src="images/image3.jpg" alt="Picture 3"/></div>
            <div class="wrap"><img src="images/image4.jpg" alt="Picture 4"/></div>
            <div class="wrap"><img src="images/image5.jpg" alt="Picture 5"/></div>
            <div class="wrap"><img src="images/image6.jpg" alt="Picture 6"/></div>
        </div>
        <div>
<div id="1">1</div>
<div id="2">2</div>
         </div>
    </body>
</html> 
hace un JS con el nombre funciones.js y ponelo en la misma carpeta

con el código

Código:
            $(function() {        
                 $('#1').click(
                    function(){
                        $("#img1").stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
                    }
                ); 
                $('#2').click(
                    function(){
                        $("#img2").stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
                    }
                ); 
            });
pone el style.css en la misma carpeta

con el código

Código:
*{
    margin:0;
    padding:0;
}
body{
    background:#fff url(../title.png) no-repeat 25% 20px;
}
.container{
    width:600px;
    height:400px;
    margin:100px auto 0px auto;
    border:10px solid #333;
    -moz-box-shadow:1px 1px 12px #000;
    -webkit-box-shadow:1px 1px 12px #000;
    box-shadow:1px 1px 12px #000;
}
.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap img  {
    border:none;
    position:absolute;   
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
PD hay llamo al archivo de jquery en mi pc para que esto funcione bajalo de la página oficial, cambiale el nombre a mijquery y ponelo en la misma carpeta

luego me dices si te funciono y si era lo que buscabas
  #7 (permalink)  
Antiguo 21/01/2012, 04:04
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Jquery. Evento hover, cambiarlo por función.

Oye ante todo muchas gracias por tu esfuerzo.

Pero tengo el mismo problema, lo ideal sería conseguir que hiciese ese efecto pero con una funcion, que en este caso sería con onckick.

<div id="1" onclick="la_funcion_que_anima_y_cambia_estilo()">c lic</div>


Quizá debería conocer un poco más sobre jquery, pero he hecho pruebas y nada. Supongo que habría que crear una función que haga esto:

$("#img1").stop().animate({'opacity':'1.0','height ':'200px','top':'0px','left':'0px'});

Pero no se como crearla y que funcione claro.


Muchas gracias.
  #8 (permalink)  
Antiguo 21/01/2012, 04:07
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Jquery. Evento hover, cambiarlo por función.

Oye ante todo muchas gracias por tu esfuerzo.

Lo he probadi y funciona.

Pero tengo el mismo problema , lo ideal sería conseguir que hiciese ese efecto pero con una funcion, que en este caso sería con onckick.

index.html
Código HTML:
<div id="1" onclick="la_funcion_que_anima_y_cambia_estilo_1()">clic</div> 

Quizá debería conocer un poco más sobre jquery, pero he hecho pruebas y nada. Supongo que habría que crear una función que haga esto:

Funciones.js
Código:
$("#img1").stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
aLgo como ?


Código:

function la_funcion_que_anima_y_cambia_estilo_1(){
document.getElementById("img1").animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
}
??

Pero que funcione claro.


Muchas gracias.

Última edición por autonotel; 21/01/2012 a las 04:32
  #9 (permalink)  
Antiguo 21/01/2012, 05:11
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Jquery. Evento hover, cambiarlo por función.

Hola, como no podía ser de otra manera, era lo más sencillo del Mundo.

Supongo que por eso no me entendías.
Simplemente crear la función y meter el Jquery dentro:

function click_1(){
$(function() {
$("#img1").stop().animate({'opacity':'1.0','height ':'200px','top':'0px','left':'0px'});
}
});
}


<div id="1" onclick="click_1()">clic_1</div>


Funciona.

Muchas gracias

Última edición por autonotel; 21/01/2012 a las 05:17
  #10 (permalink)  
Antiguo 21/01/2012, 07:36
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 13 años
Puntos: 59
Respuesta: Jquery. Evento hover, cambiarlo por función.

de nada

Última edición por madhatterdef; 21/01/2012 a las 17:38

Etiquetas: evento, hover
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 17:53.