Jquery. Evento hover, cambiarlo por función.

autonotel · #1 (**permalink**) 19/01/2012, 04:26

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

madhatterdef · #2 (**permalink**) 19/01/2012, 11:32

que tratas de hacer y a que evento reacciona goto_next();

autonotel · #3 (**permalink**) 19/01/2012, 13:36

Reacciona a un onload que viene de ajax

madhatterdef · #4 (**permalink**) 19/01/2012, 17:17

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

autonotel · #5 (**permalink**) 20/01/2012, 04:48

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

madhatterdef · #6 (**permalink**) 20/01/2012, 15:19

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

autonotel · #7 (**permalink**) 21/01/2012, 04:04

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.

autonotel · #8 (**permalink**) 21/01/2012, 04:07

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.

autonotel · #9 (**permalink**) 21/01/2012, 05:11

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

madhatterdef · #10 (**permalink**) 21/01/2012, 07:36

de nada