Ir para o conteúdo
InJ3cTiOn

Problema em fazer um programa em jQuery

Mensagens Recomendadas

InJ3cTiOn    0
InJ3cTiOn

Boa noite antes de mais, estou a iniciar-me em JavaScript/jQuery e estou a tentar fazer um slideshow com tbumnails, ao fazer refresh tenho que fazer aparecer uma imagem ao centro random, por ex: Tenho 10 imagens e ao fazer refresh aparece a 1ª, depois a 5ª ou a 6ª.

E nos tbumnails quando clicar neles é para mostrar a imagem no centro (nada com janelas e algo parecido)

Já tentei fazer de várias maneiras/processos e não estou a conseguir obter resultados e gostava de saber se alguém me pode dar umas dicas, no entanto vou deixar o código que já desenvolvi.

<html>
<title>slideshow</title>

  <head>
  
  <style>
  
  	#slider {
 width:600px;
 padding: 40px;
 margin: 0 auto;
  }
  
  
  #thumbnails {
  width: 1300;
  margin: 0 auto;
  margin-top:150px;
  }


  
  </style>
  
    <script type="text/javascript" src="jQuery/jquery-1.7.1.min.js">

	$(document).ready(function() {

	 var rndNumber = 1;
   		 var displayPictures = new Array();

	displayPictures[0] = 'wall1.jpeg'
	displayPictures[1] = 'wall2.jpeg'
	displayPictures[2] = 'wall3.jpeg'
	displayPictures[3] = 'wall4.jpeg'
	displayPictures[4] = 'wall5.jpeg'
	displayPictures[5] = 'wall6.jpeg'
	displayPictures[6] = 'wall7.jpeg'
	displayPictures[7] = 'wall8.jpeg'
	displayPictures[8] = 'wall9.jpeg'
	displayPictures[9] = 'wall10.jpeg'


    rndNumber = (Math.floor(Math.random()*displayPictures.length));

    $('#slider myimg').attr('src', 'imagens/'+displayPictures[rndNumber]);

});

    </script>
    
  </head>

<body>



<div id="slider">

<img id="myimg" src="" width="500" height="313">

</div>

<div id="thumbnails">
<img src="thumbnails/thumb1.jpg" width="124" height="112">
<img src="thumbnails/thumb2.jpg" width="124" height="112">
<img src="thumbnails/thumb3.jpg" width="124" height="112">
<img src="thumbnails/thumb4.jpg" width="124" height="112">
<img src="thumbnails/thumb5.jpg" width="124" height="112">
<img src="thumbnails/thumb6.jpg" width="124" height="112">
<img src="thumbnails/thumb7.jpg" width="124" height="112">
<img src="thumbnails/thumb8.jpg" width="124" height="112">
<img src="thumbnails/thumb9.jpg" width="124" height="112">
<img src="thumbnails/thumb10.jpg" width="124" height="112">


</div>

</body>
</html>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
InJ3cTiOn    0
InJ3cTiOn

Esses tutoriais são feitos com plugins e eu quero desenvolver algo sem isso, não há outra forma?

A minha ideia é algo tipo isto: hxxp://www.nitinh.com/static/SlideShow/jquery.html (mudar x para t, não sei se é permitidos links directos), nem é necessário mudar de imagem é só quando se clica aparece a imagem e quando faço refresh aparece uma imagem escolhida aleatoriamente pelo sistema.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
fmsf    0
fmsf

Dentro da estrutura que tens podes ou usar só uma imagem e substituir a src ou esconder todas e mostrar a seguir.

(mantendo a estrutura do html que tens)

Cada elemento operação está separada para facilitar a leitura, há maneiras mais avançadas de fazer isto. Mas mantendo-o simples, isto funciona.

$(document).ready(function(){
$("#thumbnails img").hide(); // esconde todas as imagens (tb podes fazer isto por css com "display: none;"

$("#thumbnails img").first().show();  // mostra a primeira imagem; tb podes fazer isto por css nao pondo "display: none" na primeira imagem

var totalDeImagens = $("#thumbnails img").length;

$("#thumbnails img").click(function(){ // adiciona um evento de click às imagens
	$(this).hide(); // esconde a imagem Clickada

	var rndNumber = (Math.floor(Math.random()*totalDeImagens));

	var elementoAMostrar = $("#thumbnails img")[rndNumber]; // $("#thumbnails img") devolve um array logo podemos ir buscar directamente um elemento a ele.

	$(elementoAMostrar).show();	    

});


});

// so agora é que reparei que nao era bem isto que querias mas eu agora n tenho + tempo. logo edito

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
InJ3cTiOn    0
InJ3cTiOn

Dentro da estrutura que tens podes ou usar só uma imagem e substituir a src ou esconder todas e mostrar a seguir.

(mantendo a estrutura do html que tens)

Cada elemento operação está separada para facilitar a leitura, há maneiras mais avançadas de fazer isto. Mas mantendo-o simples, isto funciona.

$(document).ready(function(){
$("#thumbnails img").hide(); // esconde todas as imagens (tb podes fazer isto por css com "display: none;"

$("#thumbnails img").first().show();  // mostra a primeira imagem; tb podes fazer isto por css nao pondo "display: none" na primeira imagem

var totalDeImagens = $("#thumbnails img").length;

$("#thumbnails img").click(function(){ // adiciona um evento de click às imagens
	$(this).hide(); // esconde a imagem Clickada

	var rndNumber = (Math.floor(Math.random()*totalDeImagens));

	var elementoAMostrar = $("#thumbnails img")[rndNumber]; // $("#thumbnails img") devolve um array logo podemos ir buscar directamente um elemento a ele.

	$(elementoAMostrar).show();	    

});


});

// so agora é que reparei que nao era bem isto que querias mas eu agora n tenho + tempo. logo edito

Agradeço a tua ajuda, quando puderes actualizar apita ;)

PS: Já consigo mostrar a imagem randómicamente, agora só me faltava uma função click para abrir a respectiva imagem mas isso penso que consigo

<script>

	$(document).ready(function() {

		$(window).load(function(){
			var displayPictures = new Array();
			displayPictures[0] = 'wall1.jpg'
			displayPictures[1] = 'wall2.jpg'
			displayPictures[2] = 'wall3.jpg'
			displayPictures[3] = 'wall4.jpg'
			displayPictures[4] = 'wall5.jpg'
			displayPictures[5] = 'wall6.jpg'
			displayPictures[6] = 'wall7.jpg'
			displayPictures[7] = 'wall8.jpg'
			displayPictures[8] = 'wall9.jpg'
			displayPictures[9] = 'wall10.jpg'
		var rndNumber = (Math.floor(Math.random()*displayPictures.length));
	   $('#slider img').attr('src', 'imagens/'+displayPictures[rndNumber]);
	   alert(rndNumber);
	   })

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade