Exemple CarouFredSel n ° 61 – vertical au lieu d’horizontal

Je tente de modifier l’exemple défini ici:

http://coolcarousels.frebsite.nl/c/61/

… pour afficher les vignettes verticalement plutôt qu’horizontalement.

DEMO

• La liaison d’éléments avec Javascript fonctionne avec .innerHTML, mais pas avec les nœuds enfants XML
• Uncaught TypeError: L’object # n’a pas de méthode ‘find’
• Remplacer le contenu de Div par le contenu d’une autre div jQuery
• glisser déposer et changer le parent d’une div en dom
• Sélecteurs jQuery: avec ou sans nom?

Tout est configuré et le carrousel fonctionne bien, mais l’obstacle que je franchis maintenant est la vignette en surbrillance qui apparaît en haut et au milieu (j’ai le compte à rebours jusqu’à 3).

Voici la version modifiée du Javascript qui exécute le carrousel:

$(function() { var $carousel = $('#carousel'), $pager = $('#pager'); function getCenterThumb() { var $visible = $pager.sortingggerHandler( 'currentVisible' ), center = Math.floor($visible.length / 2); return center; } $carousel.carouFredSel({ responsive: true, items: { visible: 1, width: 746, height: (214/746*100) + '%' }, scroll: { fx: 'scroll', onBefore: function( data ) { var src = data.items.visible.first().attr( 'src' ); src = src.split( '/large/' ).join( '/small/' ); $pager.sortinggger( 'slideTo', [ 'img[src="'+ src +'"]', -getCenterThumb() ] ); $pager.find( 'img' ).removeClass( 'selected' ); }, onAfter: function() { $pager.find( 'img' ).eq( getCenterThumb() ).addClass( 'selected' ); } }, pagination: { container: '#nav' }, duration: 10000, }); $pager.carouFredSel({ width: '252px', direction: 'up', auto: false, items: { visible: '1', width: 252, height: (71/252*100) + '%' }, scroll:{ items: '3', }, onCreate: function() { var center = getCenterThumb(); $pager.sortinggger( 'slideTo', [ -center, { duration: 0 } ] ); $pager.find( 'img' ).eq( center ).addClass( 'selected' ); } }); $pager.find( 'img' ).click(function() { var src = $(this).attr( 'src' ); src = src.split( '/small/' ).join( '/large/' ); $carousel.sortinggger( 'slideTo', [ 'img[src="'+ src +'"]' ] ); }); $('#nav').hover(function() { var current = $('#carousel').sortingggerHandler( 'currentPosition' ); thumbs.sortinggger( 'slideTo', [ current, 0, true, { fx: 'none' } ] ); $('#thumbs').stop().fadeTo(300, 1); }, function() { $('#thumbs').stop().fadeTo(300, 0); }); $('#nav a').mouseenter(function() { var index = $('#nav a').index( $(this) ); // clear the queue thumbs.sortinggger( 'queue', [[]] ); // scroll thumbs.sortinggger( 'slideTo', [index, { queue: true }] ); }); }); 

Quelqu’un a-t-il une idée sur la façon de changer la vignette SÉLECTIONNÉE de FIRST dans la stack à la SECONDE et de toujours s’aligner sur le carrousel principal?

EDIT: Je pensais que je déposais la prime sur une autre question à propos de ce carrousel. Donc, je vais append l’autre poont que je souhaite faire.

COMMENT puis-je modifier le code pour permettre aux images d’être contenues dans des DIV tout en fonctionnant comme je l’ai indiqué ci-dessus? J’ai joué avec la variable src et l’appel déclencheur, mais je n’ai pas eu beaucoup de chance d’atteindre mon objective.

• Comment additionner les sorties Jquery
• AngularJS: Comment changer la propriété de couleur via bascule lorsque la classe css change?
• attachEvent ou addEventListener – stocké où?
• Capturer un nouvel événement d’ouverture de la fenêtre du navigateur avec javascript
• JW Player – La vidéo fonctionne en chrome, pas firefox ou IE

 #carousel div{ position:relative; } #carousel { width: 800px; height: 500px; overflow: hidden; position:relative; } #carousel h1{ position:absolute; top:0; left:105px; font-size:30px; color:red; }