Mudar style Css de imagens com JS

[speedftw]

Boas!

O que eu pretendo é conseguir mudar o style de várias imagens simultaneamente através de um botão.

A ideia é ter um botão para a esquerda e outro para a direita. Clicando em um dos botões o style da imagem irá ser alterado (tamanho, opacidade, posição) num ciclo infinito que dá "a volta".

Com o jQ consegui mudar o style de apenas uma imagem e clicando de novo no botão a imagem volta ao style anterior.

Obrigado!

[HappyHippyHippo]

tens de usar o selector correcto, do género:

$("img"); // seleciona todos os elementos DOM imagens da página
$("img.update"); // selecciona todos os elementos DOM imagens da página com a classe "update"
$("div.changable img"); // selecciona todos os elementos DOM imagens dentro do div com a class "changable"

[speedftw]

Algo que faria sentido para mim era ter por exemplo um array onde cada posição tivesse toda a definição da classe e cada imagem se "ligasse" a uma posição desse array. Depois carregando nos botões uma variável seria incrementada (ou decrementada) atribuindo a classe seguinte à imagem. Neste caso preciso de 4 classes diferentes para as imagens (direita, centro, esquerda, escondida) em que cada classe corresponde a uma imagem, excepto a escondida que pode ter várias imagens.

Como os meus conhecimentos de javascript são ainda reduzidos não sei se isto (pelo menos como sugeri) será possível de implementar.

[HappyHippyHippo]

tenta ser mais explicito no que queres realmente fazer ...

[speedftw]

O aspecto final seria algo do género:

Clicando nos botões as imagens fariam as mudança de estilo (posição, tamanho, transparência).

Como há mais de três imagens haverá imagens escondidas num dado momento.

E as imagens estariam em ciclo, isto é, clicando sempre para a esquerda as imagens que desaparecessem da esquerda iriam reaparecer na direita.

[HappyHippyHippo]

definir as classes:

- gallery

- gallery_prev

- gallery_current

- gallery_next

1º - defines todas as imagens como invisíveis (usa a classe gallery)

2º - defines o css para as 3 classes ditas anteriormente para apresentar as imagens como pretendes

jquery:

function buttonNext() {
  var img = $(".gallery_prev");

  img.removeClass("gallery_prev");
  img.next().removeClass("gallery_current");
  img.next().addClass("gallery_prev");
  img.next().next().removeClass("gallery_next");
  img.next().next().addClass("gallery_current");
  img.next().next().next().addClass("gallery_next");
}

para o outro botao é só usar o prev() de acordo ...

[speedftw]

Pois, isso assim não me está a dar muito bem.

Primeiro porque se definir de início as imagens com a classe gallery as funções não vão funcionar.

Alterei assim.

function buttonPrev() {
            var img = $(".gallery_prev");

            img.removeClass("gallery_prev");
            img.addClass("gallery");
            img.next().removeClass("gallery_current");
            img.next().addClass("gallery_prev");
            img.next().next().removeClass("gallery_next");
            img.next().next().addClass("gallery_current");
            img.next().next().next().removeClass("gallery");
            img.next().next().next().addClass("gallery_next");
        }

Depois esta função que é para a esquerda funciona bem até já não ter mais imagens (usei 4) a partir daí não aparece mais imagens e estraga o layout da página.

O botão para a esquerda, com a outra função, não usa sequer as imagens que estão escondidas, penso que por não "detectar" nenhuma imagem no img.prev().prev().prev().addClass("gallery_prev");.