Jquery efecto con mouse over Hola, estoy haciendo una página que tiene un destacado similar a los de por ejemplo lanacion.com
La idea es que cuando se pasa por arriba del destacado (el que tiene la foto de la chica japonesa) se haga un slide de la segunda pantallita en donde se muestra más texto.
Hoy tengo algo armado, es parecido pero no lo que necesito.
Actualmente cuando paso por arriba del texto "Mas Info" me muestra la segunda pantalla y cuando salgo encima de "Mas Info" vuelve a la primer pantalla.
Lo que necesito es este efecto pero en lugar de que pase cuando poso el mouse encima de Mas Info lo haga cuando paso directamente por arriba del destacado.
También, cuando hago click sobre la foto o sobre alguno de los textos o directamente sobre la caja del destacado, me debería linkear a una página nueva.
El HTML es el siguiente...
================================================== ===
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba slider contenidos</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<script src="pro_drop_1/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#block_destacado_1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript" src="js/easyMultipleSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easyMultipleSlider(
{
number_slides_visible:1
}
);
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li>
<div class="slide">
<a href="">
<img alt="" src="images/01.jpg"/> </a>
<p class="header">
<a href="#">PRIMER SLIDE</a> </p>
<p>Praesent aliquam nulla at enim. Duis non velit. Etiam in ligula. Phasellus molestie metus sit amet lacus. Sed arcu. Aenean a arcu ut odio dictum tincidunt. Nullam eget risus. </p>
</div>
</li>
<li>
<div class="slide">
<p class="header">
<a href="#">SEGUNDO SLIDE</a> </p>
<p>Praesent aliquam nulla at enim. Duis non velit. Etiam in ligula. Phasellus molestie metus sit amet lacus. Sed arcu. Aenean a arcu ut odio dictum tincidunt. Nullam eget risus. Praesent aliquam nulla at enim. Duis non velit. Etiam in ligula. Phasellus molestie metus sit amet lacus. Sed arcu. Aenean a arcu ut odio dictum tincidunt. Nullam eget risus.</p>
</div>
</li>
</ul>
</div> </td>
</tr>
<tr>
<td height="1000"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
===========================================
El archivo JSQUERY es el siguiente...
===========================================
* Easy Slider 1.5 - jQuery plugin
* written by Ale[/COLOR]n Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
************************************************** **********************
* Modify by Enrique Chavez
* Show multiple slider
************************************************** **********************
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easyMultipleSlider = function(options){
// default configuration properties
var defaults = {
nextId: 'nextBtn',
nextText: 'Mas Info',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: true,
speed: 150,
auto: false,
pause: 800,
continuous: true,
number_slides_visible: 1
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = ( !options.vertical ) ? $("li", obj).width() * options.number_slides_visible : $("li", obj).width() ;
var h = ( options.vertical ) ? $("li", obj).height() * options.number_slides_visible : $("li", obj).height();
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = (s / options.number_slides_visible )-1;
var t = 0;
$("ul", obj).css('width', s*w );
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
html += options.controlsAfter;
$(obj).after(html);
};
$("a","#"+options.nextId).mouseover(function(){
animate("next",true);
});
$("a","#"+options.nextId).mouseout(function(){
animate("prev",true);
});
function animate(dir,clicked){
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
speed
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
################################
MUCHAS GRACIAS
