Modal window jquery per mini galleria immagini.

[elcicoloco]

Salve a tutti.
Sto lavorando su un semplicissimo script jquery, che al click sull'immagine apre in overlay e a schermo intero una modal window.
Il problema è che il codice (di terzi) da cui sono partito è concepito per funzionare solo su di una singola immagine, mentre io vorrei realizzare una minigalleria d'immagini-prodotto estremamente essenziale. Cliccando su ogni immagine, si dovrebbe aprire una diversa modal window a schermo intero, con contenuti dedicati e così schematizzati:

- immagine prodotto cliccata
- contenuti testuali relativi al pordotto
- bottone di chiusura della finestra

Allego il codice, parzialmente modificato, da cui sono partito

<!-- PRIMO PRODOTTO -->
<a class="open_modal" href="#content_1" >
  <img src="thumb_1" alt="Prodotto uno" /> 
  <h2>Scopri di più sul prodotto uno</h2>
</a>

<!-- modal content 1 -->
<div id="content_1" class="modal">
  <div class="modal_container">  
    <img src="img/img1.jpg" alt="Image 1" />
    <h3>TITOLO UNO</h3>
    <p>Contentuto della finestra numero uno.</p>
    <button type="button" class="close_modal btn"> Close</button>                                        
  </div>
</div>
<!-- / PRIMO PRODOTTO -->

<!-- SECONDO PRODOTTO -->
<a class="open_modal" href="#content_2" >
  <img src="thumb_2" alt="Prodotto due" /> 
  <h2>Scopri di più sul prodotto due</h2>
</a>

<!-- modal content 2 -->
<div id="content_2" class="modal">
  <div class="modal_container">  
    <img src="img/img2.jpg" alt="Image 2" />
    <h3>TITOLO DUE</h3>
    <p>Contentuto della finestra numero due.</p>
    <button type="button" class="close_modal btn"> Close</button>                                        
  </div>
</div>
<!-- / SECONDO PRODOTTO -->

Questa invece è la parte jquery

<script>
$(document).ready(function(){
  $(".modal").css("height", $(document).height());
  $(".open_modal").click(function(){
    $('html, body').animate({ scrollTop: 0 }, 0, function() {
      $(".modal").fadeIn();
      return false;
    });
  });
 
  $(".close_modal").click(function(){
    $(".modal").fadeOut();
    return false;
  });
});
  
$(window).bind("resize", function(){
  $(".modal").css("height", $(window).height());
});
</script>

Ovviamente lo script funziona solo sul primo prodotto, per cui se provassi ad aprire le successive immagini, mi verrebbe mostrato sempre il primo contenuto.
Vorrei evitare soluzioni barbare, tipo creare un codice ridondante concepito per aprire specificamente ogni singola finestra. Anche perché in futuro potrei avere bisogno di inserire altre immagini e sarebbe il delirio.
Sto cercando qualcosa che agisca piuttosto come regola generale: dato il click su una qualunque immagine, apri il relativo contenuto nella modal window.

Mi verrebbe in mente un array, ma penso che ci siano soluzioni anche più semplici. Solo che mi sono incartato e non riesco a venirne fuori.

Qualche anima pia avrebbe un suggerimento utile? Grazie mille

[cavicchiandrea]

- Sicuro che ne valga la pena realizzare l'ennesima gallery?
- Possibile che non ci sia nulla in rete che ti va bene?

[elcicoloco]

Ciao Andrea,
beh guarda... ho girato in lungo e in largo, ma di così essenziale non ho trovato nulla.
In altri casi ho utilizzato direttamente bootstrap con le sue pesudoclassi, le finestre modali a schermo intero e tutti quei file css e jquery, indispensabili per il funzionamento del plugin, che però a me non servivano e mi appesantivano inutilmente i siti.
Stesso discorso per le gallerie di immagini tradizionali.

Il motivo per cui ho cercato soluzioni più semplici è che io vorrei realizzare un codice essenziale, estremamente funzionale. Qualcosa che si riduca a:

- una piccola parte di CSS,
- una porzione di codice HTML
- un piccolo script jquery.

Senza classie.js, classie.css. bootstrap.css, bootstrap.js e poi gli awesome font e tutto il resto di file che triplicano i tempi di caricamento delle pagine.

Poi c'è anche il gusto della sfida e il desiderio di imparare.
Per cui se qualcuno potesse indicarmi uno script interessante, da cui trarre ispirazione, oppure mi potesse indirizzare verso la soluzione giusta sarebbe molto apprezzato

Saluti