Thumb Image to open in same window as per url example supplied

[theremotedr]

Hi,
I have the existing page shown here.

https://www.theremotedoctor.co.uk/gallery.html

Currently the existing thumb image is clicked on, In a new window the full size is shown, You then need to click the back button to return to the main thumb gallery.


I have seen a different way on how the full size image is applied & wondering if my existing page can be used BUT change the way the full size image is displayed / closed can be applied.

https://www.w3schools.com/howto/tryi..._css_modal_img

Many Thanks.

[coothead]

Hi there theremotedt,

this can be done with these additions to you existing code...

HTML

<!-- ****************** modal window ****************** -->

<div id="modal" class="hide">
 <img id="modal-image" src="" alt="">
 <button id="closure">close modal</button>
</div>

<!-- ************************************************** -->

Javascript

/****************** modal window ******************/

var col = document.querySelectorAll('.column'),
    cnt = document.querySelectorAll('.content'),
    cls = document.querySelector('#closure'),
    h,k;

   for (  k = 0; k < cnt.length; k ++ ) {
      cnt[k].firstElementChild.addEventListener( 'click',modal(k),false );
 }

function modal(k){
   cnt[k].firstElementChild.onclick = function( event){
   for ( h = 0; h < cnt.length; h ++ ) {
         col[h].classList.add( 'hide' );
      }

   event.preventDefault();
   document.querySelector('#modal').classList.remove('hide');
   document.querySelector('#modal-image').src =
   cnt[k].firstElementChild.firstElementChild.src;
    }
   }
   cls.addEventListener( 'click',

function(){
   document.querySelector('#modal').classList.add('hide');
   document.querySelector('#modal-image').src=''; 
   for ( h = 0; h < cnt.length; h ++ ) {
      col[h].classList.remove('hide');
     }
  },false);

/**************************************************/

CSS

/****************** modal window ******************/

#modal {
    position: fixed; 
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, #666, #000 );
    text-align: right;
 }
#modal-image{
    width: 64%;
    margin: 2em auto;
    border: 1px solid #fff;
 }
#closure {
    padding: 0.5em 2em;
    margin-right: 1em;
    font-size: 1em;
    cursor: pointer;
 }
.hide{
    display: none;
 }

/***************************************************/

I notice that you have put a border radius on the thumbs.
Was you intention to have black corners?

[theremotedr]

Hi,
Please could you check it for me.
I have copeied the existing files & added a 1 to the filename.
Here is the page https://www.theremotedoctor.co.uk/gallery1.html

I see a close modal message top left.
I also see the image open just like before.
I dont see the thumb expand have a x to close it

Thanks

[theremotedr]

Ok ive got it done now but have a question.

Is the code making the thumb larger ?

I ask as a photo with text on it then becomes out of focus

[coothead]

Is the code making the thumb larger ?

I will check the code.

coothead

[theremotedr]

Now changed but now it doesnt show any image once the thumb has been clicked on

The attached screenshot is what i now see after clicking the thumb.

[coothead]

Hi there theremotedr,

you are right, well spotted.

This line...

   cnt[k].firstElementChild.firstElementChild.src;

...should be

   cnt[k].firstElementChild.href;

coothead

[theremotedr]

Hi,
That worked many thanks.

I assume this code is for the position of the button which closes the image that was just opened ?

#closure {
    padding: 0.5em 2em;
    margin-right: 1em;
    font-size: 1em;
    cursor: pointer;

To be honest i dont understand the em code.
We need to change the position of this button as sometimes if the image is large the close button isnt seen on the screen.
I think it needs to be maybe at the top of the screen in the middle THEN the image BELOW it.
This way it will always be seen by the user no matter what size the image is.

Can you show me please the new code you advise so i can then take a look at it & understand what it does.
Can you also change the em code to something i can also understand please.

Thanks

[coothead]

Hi there theremotedr,

I noticed that you now want to display videos.
Unfortunately, I haven't as yet been able to make them work in the modal.
This means that at present I am having to let them be displayed in a new window.

Here though is the corrected javascript for you to test...

/****************** modal window ******************/

var col = document.querySelectorAll('.column'),
    cnt = document.querySelectorAll('.content'),
    cls = document.querySelector('#closure'),
    h,k,ext;

   for (  k = 0; k < cnt.length; k ++ ) {
      cnt[k].firstElementChild.addEventListener( 'click', modal(k), false );
 }

function modal(k){
   cnt[k].firstElementChild.onclick = function( event){
   for ( h = 0; h < cnt.length; h ++ ) {
         col[h].classList.add( 'hide' );
      }
      
      ext = cnt[k].firstElementChild.href;

   if( ext.substring(ext.lastIndexOf(".")+1,ext.length) ==='jpg') {
      event.preventDefault();
      document.querySelector('#modal').classList.remove('hide');
      document.querySelector('#modal-image').src = ext;
       }
    else{
      for ( h = 0; h < cnt.length; h ++ ) {
         col[h].classList.remove( 'hide' );
      }
    }
   }
 }
   cls.addEventListener( 'click',
function(){
   document.querySelector('#modal').classList.add('hide');
   document.querySelector('#modal-image').src=''; 
   for ( h = 0; h < cnt.length; h ++ ) {
      col[h].classList.remove('hide');
     }
  },false);

/**************************************************/

coothead

[theremotedr]

Hi
What is the lsat code for ?

Is it for the videos or is it for the position of the close modal window ?

I ask as video opens in new window which is ok.

Or if its for the position of the close modal button i see no change