Personnalisation du plugin défilant avec prevpage et nextpage sur l'image? (voir maquette)

Question

J'implémente un scrollable pour une galerie de portfolio.

(plugin = scrollable Défilant dans http://flowplayer.org/tools/index.html)

Il y aura un élément visible à la fois.

Par défilement, les boutons précédent/suivant situés en dehors de la zone d'image et en cliquant sur l'image active permettent de faire défiler le contenu. Je souhaite avoir le rendu prev/next dans la zone de l'image.

2. Je souhaite qu'une légende d'image s'affiche lorsque vous passez la souris sur la partie inférieure de l'image.

maquette: http://i303.photobucket.com/albums/nn160/upstagephoto/mockups/scrollable_mockup.jpg

Toutes les idées sur la façon d'obtenir un ou les deux de ces?

Merci!

Answer 1

La partie principale de votre approche sera comme ceci dans votre code html:

<div id="mainContainer"> 
    <div class="scrollable"> 
    <div class="items"> 
     <div class="scrollableEl"> 
     <img src="yourimage.jpg" /> 
     <div class="caption">Your caption</div> 
     </div> 

     <div class="scrollableEl"> 
     <img src="yourimage2.jpg" /> 
     <div class="caption">Your caption 2</div> 
     </div> 

     ... so on ... 
    </div> 
    </div> 
    <a href="#" class="prev">&laquo;</a> 
    <a href="#" class="prev">&laquo;</a> 
</div> 

Et comme si dans votre CSS:

.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 660px; 
    height:90px; 
} 

.scrollable .items { 
    width:20000em; 
    position:absolute; 
} 

.items .scrollableEl { 
    float:left; 
    positon: relative; 
} 

.items .scrollableEl .caption { 
    display:none; 
    position: absolute; 
    bottom: 0; 
    height: 100px; 
    width: 660px; 
} 

.items .scrollableEl:hover .caption { /*this will show your caption on mouse over */ 
    display:none; 
} 

.next, .prev { 
    position: absolute; 
    top: 0; 
    display: block; 
    width: 30px; 
    height: 100%; 
} 
.next { 
    right: 0; 
} 
.prev { 
    left: 0; 
} 
#mainContainer { 
    position: relative; 
} 

Le javascript doit être assez standard. J'espère que cela t'aides!

Answer 2

DEMO:http://jsbin.com/ijede/2SOURCE:http://jsbin.com/ijede/2/edit

$(function() { 
    // 5 minute slide show ;-) 
    $('.next,.prev').click(function(e) { 
     e.preventDefault(); 
     var pos = parseInt($('.current').attr('id').split('_')[1]); 
     var tot = $('.slides a').size() - 1; 
     var click = this.className; 
     var new_pos = (click == 'next') ? pos + 1: pos - 1; 
     var slide = (click == 'next') ? 
        (pos < tot ? true : false) : (pos > 0 ? true : false); 

     if (slide) $('.current').toggle(500,function() { 
      $(this).removeClass('current'); 
     }); 
     $('#pos_' + new_pos).toggle(500,function() { 
      $(this).attr('class', 'current'); 
     }); 
    }); 
    //cross-browser div :hover 
    $('.next,.prev').hover(function() { 
     $(this).children().children().fadeIn(500); 
    },function() { 
     $(this).children().children().fadeOut(500); 
    }); 
    //auto add unique id to each image 
    $('.slides a').each(function(e) { 
     $(this).attr('id', 'pos_' + e); 
     if (!e) $(this).attr('class', 'current'); 
    }); 
});​ 

CSS sur la source!

NOTE: depuis lire le plugin doc nécessite plus de temps pour moi que de faire un diaporama à partir de zéro, j'en ai fait un nouveau!

espérons que vous l'aimerez!