1

Tenho um slideshow de fotos que quando clica na foto ele abre as fotos maiores.

Na galeria de fotos maiores, preciso apenas passar o valor start:nºda foto, para que ele inicie a partir da foto clicada. nº da foto é o id que é passado pela função galeria(this.id).

Aí eu fiz um str.replace para subistituir o start:0 (que é como inicia), para o start:id, que é o valor passado, o problema que só funciona uma vez, depois que altera o start:0 para o start:id, não sei como fazer ele encontrar o ultimo start:id para o novo start:id

<ul id="galeriamenor">
<li><a href="#galeria" id="1" onclick="galeria(this.id)"><img src="foto1"></a></li>
<li><a href="#galeria" id="2" onclick="galeria(this.id)"><img src="foto2"></a></li>
<li><a href="#galeria" id="3" onclick="galeria(this.id)"><img src="foto3"></a></li>
<li><a href="#galeria" id="4" onclick="galeria(this.id)"><img src="foto4"></a></li>
</ul>

<ul id="galeria" data-uk-slideshow="{start:0}">
<li><img src="maior/foto1"></li>
<li><img src="maior/foto2"></li>
<li><img src="maior/foto3"></li>
<li><img src="maior/foto4"></li>
</ul>

<script>
 function galeria(id) {
  var str = document.getElementById("galeria").innerHTML; 
  var res = str.replace("start:0", "start:"+id);
  document.getElementById("galeria").innerHTML = res;
 }
</script>

2 Respostas 2

1

Pode usar uma regex no seu replace:

function galeria(id) {
   var str = document.getElementById("galeria").innerHTML; 
   var res = str.replace(/\d+/, id);
   document.getElementById("galeria").innerHTML = res;
}
<select onChange="galeria(this.value)">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="10">10</option>
</select>
<br>
<div id="galeria">start:0</div>

A regex \d+ irá pegar apenas o número e substituir, no caso, as ids.

1

Observando seu código, estava tentando fazer um replace na string que seria o innerHTML do elemento com id="galeria".

Porém o innerHTML é o conteúdo interno, e nele não continha a string "start", mas existe no próprio elemento, como conteúdo de um atributo (data-uk-slideshow="{start:0}")

Sugiro apenas alterar o valor do atributo data-uk-slideshow conforme:

<script>
 function galeria(id) {
  var eGaleria = document.getElementById("galeria"); 
  eGaleria.setAttribute("data-uk-slideshow", "{start:"+id+"}");
 }
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .