How to load content on a page according to the element you previously clicked on?

Asked

Viewed 572 times

0

I have a simple gallery where each image leads to a new page with your description. It turns out that the page layout for the descriptions is the same, only changing the content. How to make only some fields on this page be changed according to the previously clicked items on the gallery page?

<html>
  <head>
    <title>Galeria</title>
    <link rel ="stylesheet" href= "css/galeria.css">
  </head>
  <body>
  <div class="gallery">
    <a target="_self" href="desc1.html">
      <img src="img/imagem1.jpg" alt="Imagem 1" width="200" height="200">
    </a>
    <div class="desc">Imagem 1</div>
  </div>
  <div class="gallery">
    <a target="_self" href="desc2.html">
      <img src="img/imagem2.jpg" alt="Imagem 2" width="200" height="200">
    </a>
    <div class="desc">Imagem 2</div>
  </div>
  <div class="gallery">
    <a target="_self" href="desc3.html">
      <img src="img/imagem3.jpg" alt="Imagem 3" width="200" height="200">
    </a>
    <div class="desc">Imagem 3</div>
  </div>
  <div class="gallery">
    <a target="_self" href="desc4.html">
      <img src="img/imagem4.jpg" alt="Imagem 4" width="200" height="200">
    </a>
    <div class="desc">Imagem 4</div>
   </div>
  </body>
 </html>
javascript html css

  • I recommend you use a framework for this, will help you a lot. Has Angular 1.x, Knockout.. among others easier to learn. You can do what you want using jQuery, but it’s a little more work.

  • Welcome to the SOPT. It would have as [Edit] your post and add the code you are using to make your gallery, so we can analyze and suggest a change. Thank you.

  • I added the code. I am still very beginner in this subject, the gallery is very simple. The problem is having to do desc1.html, desc2.html, desc 3.html... for each description. For larger galleries, I would like to know how to use the same html and load the information corresponding to what was clicked there.

  • I gave this answer in this How to open a specific div on another page?

2 answers

2

An option would be to pass parameter in the URL, in the example I passed item ID.

$(document).on('click', '.itemGaleria', function() {
    var itemGaleria = $(this).attr('id');
    if (itemGaleria ) {
        window.location = '/outra_pagina?item=' + itemGaleria;
    }
});​

And in "other page" you can take the value of the parameter with the following function:

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Thus:

var itemGaleria = getParameterByName('item'); // "id do item"

0

As I have answered in this link.

There is no way I can put a single functional fiddle here because it involves more than one page, so I will create two htmls + one js and you can simulate making the following files in the same folder. Look at the step-by-step:

First File - index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="selector.js"></script>
  <script>
    $(function() {
      initSectorUI();

      $("#navigator a").click(function() {
        showSectorMini($(this).attr('href'));
      });
    });
  </script>
  <style>
    .block {
      width: 100%;
      height: 33vh;
    }
    
    #first {
      background: red;
    }
    
    #second {
      background: blue;
    }
    
    #third {
      background: green;
    }
    
    #fourth {
      background: yellow;
    }
    
    #fifth {
      background: pink;
    }
  </style>
</head>

<body>
  <div id="navigator">
    <a href="page.html#first">First</a>
    <a href="page.html#second">Second</a>
    <a href="page.html#third">Third</a>
    <a href="page.html#fourth">Fourth</a>
    <a href="page.html#fifth">Fifth</a>
  </div>
</body>

</html>

Second File - page.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="selector.js"></script>
  <script>
    $(function() {
      initSectorUI();

      $("#navigator a").click(function() {
        showSectorMini($(this).attr('href'));
      });
    });
  </script>
  <style>
    .block {
      width: 100%;
      height: 33vh;
    }
    
    #first {
      background: red;
    }
    
    #second {
      background: blue;
    }
    
    #third {
      background: green;
    }
    
    #fourth {
      background: yellow;
    }
    
    #fifth {
      background: pink;
    }
  </style>
</head>

<body>
  <div id="sectors">
    <div id="first" class="block" style="display: none;">A</div>
    <div id="second" class="block" style="display: none;">B</div>
    <div id="third" class="block" style="display: none;">C</div>
    <div id="fourth" class="block" style="display: none;">D</div>
    <div id="fifth" class="block" style="display: none;">E</div>
  </div>
  <br>
  <form><input Type="button" VALUE="Voltar" onClick="history.go(-1);return true;"></form>
</body>

</html>

Third File - selector.js

var initSectorUI = function() {
  if (location.hash) showSectorMini(location.hash);
};

var showSectorMini = function(sector) {
  $('#sectors > div').hide();
  $(sector).show();
};

Join the three files in a folder and tell me if it worked. Here was good! :)

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.