Autore Topic: class 'modal' in T3 framework  (Letto 529 volte)

Offline zioleo87@libero.it

  • Nuovo arrivato
  • *
  • Post: 4
    • Mostra profilo
class 'modal' in T3 framework
« il: 17 Apr 2018, 12:15:43 »
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

Offline marlev

  • Nuovo arrivato
  • *
  • Post: 12
    • Mostra profilo
    • Estensioni e Template Joomla
Re:class 'modal' in T3 framework
« Risposta #1 il: 21 Apr 2018, 18:33:33 »
Ciao, hai provato a chiudere i blocchi <div> con </div> e non con <>
Template Joomla ed Estensioni - https://marlev.it/it

Offline marlev

  • Nuovo arrivato
  • *
  • Post: 12
    • Mostra profilo
    • Estensioni e Template Joomla
Re:class 'modal' in T3 framework
« Risposta #2 il: 21 Apr 2018, 18:40:13 »
Rimosso la risposta, era sbagliata
« Ultima modifica: 21 Apr 2018, 19:03:31 da marlev »
Template Joomla ed Estensioni - https://marlev.it/it

Offline Alex21

  • Appassionato
  • ***
  • Post: 605
    • Mostra profilo
    • servizi web
Re:class 'modal' in T3 framework
« Risposta #3 il: 21 Apr 2018, 19:35:10 »

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.

Offline zioleo87@libero.it

  • Nuovo arrivato
  • *
  • Post: 4
    • Mostra profilo
Re:class 'modal' in T3 framework
« Risposta #4 il: 24 Apr 2018, 13:01:04 »
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

Offline zioleo87@libero.it

  • Nuovo arrivato
  • *
  • Post: 4
    • Mostra profilo
Re:class 'modal' in T3 framework
« Risposta #5 il: 24 Apr 2018, 13:02:25 »
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

Offline Alex21

  • Appassionato
  • ***
  • Post: 605
    • Mostra profilo
    • servizi web
Re:class 'modal' in T3 framework
« Risposta #6 il: 24 Apr 2018, 14:19:23 »

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.


Offline zioleo87@libero.it

  • Nuovo arrivato
  • *
  • Post: 4
    • Mostra profilo
Re:class 'modal' in T3 framework
« Risposta #7 il: 24 Apr 2018, 14:40:08 »
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.


 

Torna su