Jump to content

clickHandler span question


rannatr

Recommended Posts

Hello!

 

I'm pretty new into coding and I have following problem:

I have modal gallery which has Close X button on topright and also I have script for browsing back and forward with arrow keys. Also ESC button works for closing my modal window+clicking outside modal.

 

It looks like this:

<div id="myModal" class="modal">
<span class="close">×</span>

 

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

// 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";
}

 

 

However now I want to add Prev and Next buttons with span and I want to onclick = clickHandler;

So if i click on my prev or next span It will go to handler (just as it works for browsing with keyboard arrow keys)

 

So I made CSS and put back and forward spans in place:

<div id="myModal" class="modal">  <span class="close">×</span>  <span class="next">❱</span>  <span class="prev">❰</span>  <img class="modal-content" id="img01">  <div id="caption"></div></div><script>// Get the modalvar modal = document.getElementById('myModal');// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];  // When the user clicks on <span> (x), close the modalspan.onclick = function() {    modal.style.display = "none";}

How I can make clicking on prev or next spans work for browsing my slides (as it works with arrow keys on keyboard). Currenlty only my close button works.

 

Thanks,

Edited by rannatr
Link to comment
Share on other sites

Thanks,

 

I got the general idea but I feel I'm too novice to implement it into my own code. Atleast didnt't work out quite well.

Can you give me some example how I can implement this particularly in my case?

 

kindest regards,

 

Ragner

Link to comment
Share on other sites

var wrapper = document.getElementById("wrapper");

 

wrapper.onclick = function(evt) {

if (evt.target.id == 'id1'){

// id1 was clicked on

}else if (evt.target.id == 'id2'){

// id2 was clicked on

}else{

// something else was clicked on

}

}

Link to comment
Share on other sites

var wrapper = document.getElementById("wrapper");

wrapper.onclick = function(evt) {
   if (evt.target.id == 'id1'){
     // id1 was clicked on
   }else if (evt.target.id == 'id2'){
     // id2 was clicked on
   }else{
     // something else was clicked on
   }
}

 

 

You can see My final result for postage stamps gallery here:

http://www.ragner.ee/en

 

Kindest regards,

Thank You very much Sir,
R.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...