class 'modal' in T3 framework

[zioleo87@libero.it]

Buongiorno a tutti,
non riesco ad integrare la classe 'modal' all'interno del framework T3.
Le modifiche che ho fatto sono:


JS all'interno del file javascript.js

Codice: [Seleziona]


// Get the modal
var modal = document.getElementById('myModal');


// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];


// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}


CSS ho creato il file custom.css

Codice: [Seleziona]

 
  /* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}


#myImg:hover {opacity: 0.7;}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}


/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}


/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}


@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}


/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}


.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

infine ho modificato il modulo T3 Gallery aggiugendo il codice:

Codice: [Seleziona]

.........
<div class="col-xs-6 col-sm-3">
<img id="myImg" class="img-responsive" src="images/joomlart/thumbnails/thumb-1.png" alt="JA Obelisk template" width="350" height="210" />
<>
..............

<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img id="img01" class="modal-content" />
<!-- Modal Caption (Image Text) -->
<div id="caption">
<>
<>

grazie mille

[marlev]

Ciao, hai provato a chiudere i blocchi <div> con </div> e non con <>

[marlev]

Rimosso la risposta, era sbagliata

[Alex21]

JS all'interno del file javascript.js
grazie mille

Ciao,
una domanda un po' banale:
il file javascript.js  in che punto della pagina viene caricato?
Un saluto.

[zioleo87@libero.it]

Ciao, hai provato a chiudere i blocchi <div> con <> e non con <>

Si è <div>. sono i tag CODE che non mostrano la scritta div nel post

[zioleo87@libero.it]

Ciao,
una domanda un po' banale:
il file javascript.js  in che punto della pagina viene caricato?
Un saluto.

A questo ci pensa joomla, non ricordo di preciso dove vengono importate tutti i file del progetto

[Alex21]

A questo ci pensa joomla, non ricordo di preciso dove vengono importate tutti i file del progetto

Però hai aggiunto del javascript tuo e bisogna che ci pensi anche tu. La posizione in cui è il file javascript e il modo come è fatto influiscono sulla capacità del browser di eseguire il tuo codice oppure no.
Dico questo perché, siccome mi sembra che il javascript non abbia nulla che non va, la spiegazione più semplice è quella di pensare che non venga eseguito.
Puoi sfrugugliarti ancora su img.onclick = oppure provare un metodo diverso.
Dopo <div id="caption"><> inserisci javascript in questo modo:

Codice: [Seleziona]

<div id="caption"> </dv>
<script>
    document.getElementById("myImg").addEventListener('click', function(){
// tuo codice di gestione evento onclick.
// tuo codice ...
});
</script>Il codice javascript da inserire dovrebbe essere lo stesso che hai nella funzione img.onclick() o qualcosa di molto simile.
Il vantaggio di questo metodo consiste nel fatto che viene eseguito sicuramente indipendentemente da come è fatto il file principale javascript.js e dove viene caricato. Lo svantaggio, estetico, è che il javascript è  sparpagliato nella pagina.
C'è anche un altro sistema un pochino più antiquato, quello di mettere nell'html onclick="funzione()". Anche questo viene eseguito di sicuro ma ti rimane una funzione che non sai se ha un nome già usato da altri. A volte non si può fare altro, però.
Ciao.

[zioleo87@libero.it]

Però hai aggiunto del javascript tuo e bisogna che ci pensi anche tu. La posizione in cui è il file javascript e il modo come è fatto influiscono sulla capacità del browser di eseguire il tuo codice oppure no.
Dico questo perché, siccome mi sembra che il javascript non abbia nulla che non va, la spiegazione più semplice è quella di pensare che non venga eseguito.
Puoi sfrugugliarti ancora su img.onclick = oppure provare un metodo diverso.
Dopo <div id="caption"><> inserisci javascript in questo modo:

Codice: [Seleziona]

<div id="caption"> </dv>
<script>
    document.getElementById("myImg").addEventListener('click', function(){
// tuo codice di gestione evento onclick.
// tuo codice ...
});
</script>Il codice javascript da inserire dovrebbe essere lo stesso che hai nella funzione img.onclick() o qualcosa di molto simile.
Il vantaggio di questo metodo consiste nel fatto che viene eseguito sicuramente indipendentemente da come è fatto il file principale javascript.js e dove viene caricato. Lo svantaggio, estetico, è che il javascript è  sparpagliato nella pagina.
C'è anche un altro sistema un pochino più antiquato, quello di mettere nell'html onclick="funzione()". Anche questo viene eseguito di sicuro ma ti rimane una funzione che non sai se ha un nome già usato da altri. A volte non si può fare altro, però.
Ciao.

Leggendo la documentazione di T3, ho letto che ogni file inserito all'interno della cartella JS è visibile su tutto il progetto. Infatti il file CSS funziona corretamente.
Proverò ad inserire il codice js all'interno dell'html, grazie mille.