Jquery Automatic Image Slider w/CSS & jQuery

Question

Questo è Automatic Image Slider w/CSS & jQuery di Soh Tanaka Sto cercando di personalizzarlo per mostrare .desc quando il mouse passa sopra il cursore ma non sembra funzionare Aiuto?

//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

Ho fatto a demo per voi. Ma fondamentalmente ho dovuto spostare i blocchi di descrizione all'esterno del blocco image_reel perché era stato riposizionato e sarebbe stato troppo difficile aggiungere script per posizionarlo correttamente.

ecco un riepilogo delle modifiche: Aggiunto 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; 
} 

nuova finestra Blocco

<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 (Aggiornato)

//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

Dal momento che non si mostra la Markup HTML, presumo che '.desc' sia un div contenente una sorta di capti sopra. In ogni caso, non vedo perché leghi due volte il passaggio del mouse e inoltre devi eseguire slideToggle nella funzione di unhover. Per fare questo è necessario modificare queste righe:

//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 tal:

//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

ho sviluppato un semplice plugin per jQuery per ottenere quello che stai dopo, si chiama Basic jQuery Slider - Se si decide di utilizzare e ha qualche problema, fai una domanda alla pagina Github e ti aiuterò.