Slide jquery con frecce sempre visibili

[azcoit]

Ciao A tutti,

vorrei utilizzare una slide come questa:

http://sixrevisions.com/demo/slideshow/final.html

di frecce appena apri il link ne vedo solamente una, quella di dx, io vorrei vederle entrambe,

in modo da poter cliccare sia su quella di dx sia su quelle di sx,

ma come vedete nell'esempio una volta fatte girare le 4 immagini le frecce spariscono,

come potrei fare affinchè una volta visualizzata la 4 immagine, la freccia di dx non sparisca,

ma prosegua facendomi caricare la prima immagine senza tornare indietro?

Mi spiego meglio, clicco sulla freccia di dx, vedo la 2,3,4, poi la prima.

Oppure clicco sulla freccia di sx, e vedo, la 3, 2, 1, immagine poi continuo con la 4 e cosi via...

[cavicchiandrea]

Io ho trovato questi due qua su google, ma probabilmente con un po più di tempo si trova altro
http://demo.tutorialzine.com/2010/03...-css/demo.html
http://www.queness.com/resources/htm...sel/index.html

[azcoit]

Grazie Andrea,

avevo già preso in considerazione le slideshow che sono presenti in html.it,

ma volevo sapere se qualche MAGO in javascript/jquery, poteva darmi una mano modificando

lo script del link che ho postato modo tale da raggiungere il mio obiettivo con quel tipo di

slide....

************************************************** *******************

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>

[cavicchiandrea]

Ok ora mi è più chiaro, ma a mio avviso modificando la logica di navigazione di quello script non è una operazione cosi immediata, attendi interventi più mirati nello specifico

[Xinod]

a occhio, cambia
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
in

currentPosition = ($(this).attr('id')=='rightControl') ? 
  ((currentPosition==numberOfSlides-1)?0:currentPosition+1) :
  ((currentPosition==0)?numberOfSlides:currentPosition-1);

poi rimuovi
// Hide / show controls
manageControls(currentPosition);
e
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}

ciao

[azcoit]

Ciao Xinod,

piacere di risentirti,

ho cambiato il codice come mi hai detto, le frecce si vedono entrambi come volevo, ma purtroppo,

la slide non si muove ne a sx ne a dx, ti posto nuovamente il codice, forse ho sbagliato qualcosa!

************************************************** ************************

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var currentPosition = 0;

var slideWidth = 560;

var slides = $('.slide');

var numberOfSlides = slides.length;



// Remove scrollbar in JS

$('#slidesContainer').css('overflow', 'hidden');



// Wrap all .slides with #slideInner div

slides

.wrapAll('<div id="slideInner"></div>')

// Float left to display horizontally, readjust .slides width

.css({

'float' : 'left',

'width' : slideWidth

});



// Set #slideInner width equal to total width of all slides

$('#slideInner').css('width', slideWidth * numberOfSlides);



// Insert controls in the DOM

$('#slideshow')

.prepend('<span class="control" id="leftControl">Clicking moves left</span>')

.append('<span class="control" id="rightControl">Clicking moves right</span>');



// Hide left arrow control on first load

manageControls(currentPosition);



// Create event listeners for .controls clicks

$('.control')

.bind('click', function(){

// xinod soluzione

currentPosition = ($(this).attr('id')=='rightControl') ?
((currentPosition==numberOfSlides-1)?0:currentPosition+1) :
((currentPosition==0)?numberOfSlides:currentPositi on-1);



// Move slideInner using margin-left

$('#slideInner').animate({

'marginLeft' : slideWidth*(-currentPosition)

});

});

});

</script>

[azcoit]

eccovi un link di esempio,

http://chrysalflowerfood.com/blog/

vorrei che la slide del mio primo post funzionasse in questo modo,(non in modo automatico, ma

con click, qualcuno gentilmente ha qualche soluzione?

Grazie.

[lucavizzi]

Ecco qui una working copy:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  //manageControls(currentPosition); //commento la riga che cancella la freccia sinistra al caricamento della pagina 

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	//currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
	
	//rendo lo slider circolare
	if($(this).attr('id')=='rightControl'){//al click sulla freccia destra
		if(currentPosition==numberOfSlides-1){//se siamo sull'ultima slide
			currentPosition=0;
		}else{//altrimenti
			currentPosition=currentPosition+1;//vado alla slide successiva
		}
	}else{//freccia sinistra
		if(currentPosition==0){//se siamo sulla prima slide
			currentPosition=numberOfSlides-1;//vado all'ultima
		}else{//altrimenti
			currentPosition=currentPosition-1;//vado alla slide precedente
		}
	}
    
	// Hide / show controls
    //manageControls(currentPosition); //le frecce saranno sempre visibili 
	
	
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

[azcoit]

Ciao luca,

lo script che hai postato va bene,

ma una volta che ho fatto girare le 4 immagini, anzichè passare alla prima da dx, torna indietro

alla prima...

io vorrei che questa slide, andasse in questo modo:

click dx: 1img-2img-3img-4img....poi con un altro click dx, questa non deve tornare indietro alla

prima immagine bensi, andare avanti alla prima....

Stessa cosa quando clicco col bottone sx..


Puoi darmi una mano?


grazie in anticipo!!!

[lucavizzi]

Originariamente inviato da azcoit
Ciao luca,

lo script che hai postato va bene,

ma una volta che ho fatto girare le 4 immagini, anzichè passare alla prima da dx, torna indietro

alla prima...

io vorrei che questa slide, andasse in questo modo:

click dx: 1img-2img-3img-4img....poi con un altro click dx, questa non deve tornare indietro alla

prima immagine bensi, andare avanti alla prima....

Stessa cosa quando clicco col bottone sx..


Puoi darmi una mano?


grazie in anticipo!!!

Diventa complicatuccio, lo script che hai proposto agisce sul margin-left, bisognerebbe riordinare l'HTML tramite script per fare quello che chiedi.