Jquery Automatic Image Slider w/CSS & jQuery

Question

Esto es Automatic Image Slider w/CSS & jQuery de Soh Tanaka Estoy tratando de personalizarlo para mostrar .desc cuando el mouse pasa el control deslizante pero no parece funcionar ¿ayuda?

//Set Default State of each portfolio piece 
$(".paging").show(); 
$(".paging a:first").addClass("active"); 

//Get size of images, how many there are, then determin the size of the image reel. 
var imageWidth = $(".window").width(); 
var imageSum = $(".image_reel ul.examples").size(); 
var imageReelWidth = imageWidth * imageSum; 

//Adjust the image reel to its new size 
$(".image_reel").css({'width' : imageReelWidth}); 

//Paging + Slider Function 
rotate = function(){  
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide 
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide 

    $(".paging a").removeClass('active'); //Remove all active class 
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) 

    //Slider Animation 
    $(".image_reel").animate({ 
     left: -image_reelPosition 
    }, 500); 

}; 

//Rotation + Timing Event 
rotateSwitch = function(){  
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds 
     $active = $('.paging a.active').next(); 
     if ($active.length === 0) { //If paging reaches the end... 
      $active = $('.paging a:first'); //go back to first 
     } 
     rotate(); //Trigger the paging and slider function 
    }, 7000); //Timer speed in milliseconds (3 seconds) 
}; 

rotateSwitch(); //Run function on launch 

//On Hover 
$(".image_reel").hover(function() { 
    clearInterval(play); //Stop the rotation 
}, function() { 
    rotateSwitch(); //Resume rotation 
}); 

//Hide the tooglebox when page load 
$(".desc").hide(); 
//slide up and down when hover over heading 2 
$(".image_reel").hover(function(){ 
// slide toggle effect set to slow you can set it to fast too. 
$(this).next(".desc").slideToggle("slow"); 
return true; 
}); 


//On Click 
$(".paging a").click(function() { 
    $active = $(this); //Activate the clicked paging 
    //Reset Timer 
    clearInterval(play); //Stop the rotation 
    rotate(); //Trigger rotation immediately 
    rotateSwitch(); // Resume rotation 
    return false; //Prevent browser jump to link anchor 
}); 

Answer 1

He hecho a demo para usted. Pero básicamente tuve que mover los bloques de descripción fuera del bloque image_reel porque estaba siendo reubicado y habría sido demasiado problema agregar scripts para colocarlo correctamente.

Así que aquí es un resumen de los cambios: Agregado CSS

.desc { 
display: none; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 101; 
background: url(http://i45.tinypic.com/30w087b.png); /* 1x1 png with 70% opacity */ 
color: #fff; 
font-size: 2em; 
padding: 10px; 
-moz-border-radius: 0 0 3px 0; 
-khtml-border-radius: 0 0 3px 0; 
-webkit-border-radius: 0 0 3px 0; 
} 

una nueva ventana del bloque

<div class="window">  
<div class="image_reel"> 
    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_1.jpg" alt="" /></a> 
    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_2.jpg" alt="" /></a> 
    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_3.jpg" alt="" /></a> 
    <a href="http://www.designbombs.com/tag/slider/"><img src="reel_4.jpg" alt="" /></a> 
</div> 
<div class="descriptions"> 
    <div class="desc">blah blah blah 1</div> 
    <div class="desc">blah blah blah 2</div> 
    <div class="desc">blah blah blah 3</div> 
    <div class="desc">blah blah blah 4</div> 
</div> 
</div> 

Script (Actualizado)

//slide up and down when hover over heading 2 
$(".window").hover(function(){ 
    // slide toggle effect set to slow you can set it to fast too. 
    $(".desc").eq($('.paging a.active').attr("rel") - 1).slideDown("slow"); 
    return true; 
}, function(){ 
    $(".desc").stop(true,true).slideUp('slow'); 
}); 

Answer 2

Dado que no se presenta el Etiquetado HTML, supongo que '.desc' es un div que contiene algún tipo de capti en. En cualquier caso, no veo por qué enlazar el elemento estacionario dos veces, y también necesita ejecutar slideToggle en la función de desvío. Para ello, debe cambiar estas líneas:

//On Hover 
$(".image_reel").hover(function() { 
    clearInterval(play); //Stop the rotation 
}, function() { 
    rotateSwitch(); //Resume rotation 
}); 

//Hide the tooglebox when page load 
$(".desc").hide(); 
//slide up and down when hover over heading 2 
$(".image_reel").hover(function(){ 
// slide toggle effect set to slow you can set it to fast too. 
$(this).next(".desc").slideToggle("slow"); 
return true; 
}); 

a esto:

//Hide the tooglebox when page load 
$(".desc").hide(); 

//On Hover 
$(".image_reel").hover(function() { 
    $(this).next(".desc").slideToggle("slow"); 
    clearInterval(play); //Stop the rotation 
}, function() { 
    $(this).next(".desc").slideToggle("slow"); 
    rotateSwitch(); //Resume rotation 
}); 

Answer 3

he desarrollado una muy simple plugin de jQuery para lograr lo que está buscando, se llama Basic jQuery Slider - Si decide utilizar y tiene algún problema, solo haz una pregunta a la página de Github y te ayudaré.