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

[coothead]

Hi there theremotedr,

I had to amend the code to allow for the videos not being able to display in the modal window.
Images open in the modal and but, at prersent, videos need to open in a new window.

I will try and find a solution to this problem, but it may take some time.

coothead

[theremotedr]

No ruh im happy for the few videos to open in a new window.

Im looking to move the position of the close button shown in the attached screenshot from Below image to ABOVE image.

OR

Add a X on the image to close it as shown in the css here https://www.w3schools.com/howto/tryi..._css_modal_img

[coothead]

Hi there the remotedr,

I have now got it working correctly, I hope.

html

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

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

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

Javascript

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

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

   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' );
      }

   if( document.querySelector('#vid')){
       document.querySelector('#vid').remove();
      }

      document.querySelector('#modal-image').classList.remove('hide');

      event.preventDefault();

      ext = cnt[k].firstElementChild.href;

   if( ext.substring(ext.lastIndexOf(".")+1,ext.length) ==='jpg') {
      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' );
       }

         document.querySelector('#modal').classList.remove('hide');
         document.querySelector('#modal-image').classList.add('hide');

  vid=document.createElement('video');
  sou=document.createElement('source');
  vid.setAttribute('id','vid');
  vid.setAttribute('controls','controls');
  vid.setAttribute('mute','mute');
  vid.setAttribute('autoplay','autoplay');
  sou.setAttribute('src', ext);
  sou.setAttribute('type','video/mp4');
  vid.append(sou);

  document.querySelector('#modal').append(vid);
      }
    }
   }
 
   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%; 
    overflow: auto;
    background: linear-gradient( to bottom, #666, #000 );
    text-align: right;
 }
#modal-image{
    max-width: 64%;
    margin: 1em auto;
    border: 1px solid #fff;
 }
#closure {
    padding: 0.5em 2em;
    margin-top:1em;
    font-size: 1em;
    cursor: pointer;   
 }
.hide{
    display: none;
 }
 video {
    display: block;
    max-width: 64%;
    margin: 2em auto;
    border: 1px solid #fff;
 }

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

coothead

[theremotedr]

Morning,
Looks great many thanks.

A few things ive noticed & also some questions.

Noticed.
1,
I select video from the button options.
The available videos are shown, Deer Fox Peregrine Woodpecker.
I select the video in question.
It plays within its border fine BUT if the user clicks Close whilst playing it can stil be heard playing even though the user has been taken back to the main screen.
Use Woodpecker as an example as its quite easy to hear what i mean.
Pressing the pause / play button THEN close works.

2,
I see a few photos that only show a partial part of the photo & the rest is off the screen.
See attached photo from BIRDS where the same photo is shows as from pc or though this new gallery.
There is only a very small amount that do this.




Question.
1,
How is the Close button styled as an example if i add a border radius to this code below i see no difference ?

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

Really like what youve done so far.
Many thanks for your time.

[coothead]

Hi there theremotedr,

it looks as though we are now, at last, down to fine tuning.

1. Close button
This...

#closure {
    padding: 0.5em 2em;
    margin-top:1em;
    border-radius: 0.75em;
    font-size: 1em;
    cursor: pointer;
 }

...works OK for me.
CSS not working can often be a cache problem - ( Ctrl + F5 ) should help.

2. Photos off the screen
To stop scrolling try this amendment...

#modal-image{
    /*max-width: 64%;  remove this */
    height: 100vh;/*  add this  */
    width: auto;/*  add  this */
    margin: 1em auto;
    border: 1px solid #fff;
 }

User clicks Close whilst playing it can stil be heard
This...

   cls.addEventListener( 'click',
function(){
   document.querySelector('#modal').classList.add('hide');
   document.querySelector('#modal-image').src=''; 
/*********** add this snippet ***********/

   if( vid ){ vid.pause(); }
   
/****************************************/

...will silence the little critters.

coothead

[theremotedr]

Please look at my js code in use shown below.

   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);

You say add if( vid ){ vid.pause(); } but i then get a syntax error.

If i use your code shown in place of mine i also get a syntax error

[coothead]

Hi there the remotedr,

Sorry, when I said add, I did not mean remove any code that followed.

I should have posted this...

   cls.addEventListener( 'click',
function(){
   document.querySelector('#modal').classList.add('hide');
   document.querySelector('#modal-image').src=''; 
/*********** add this snippet ***********/

   if( vid ){ vid.pause(); }
   
/****************************************/
   for ( h = 0; h < cnt.length; h ++ ) {
      col[h].classList.remove('hide');
     }
  },false);

...for clarity.

coothead

[theremotedr]

Update as i need to go out for a couple of hours.

Close button style now sorted.

Video is still an issue or maybe cache but will check once home.
I select a video & half way through watching it i select the CLOSE button, BUT i can still hear the video playing.
If i click pause then video stops fine.
So can we code CLOSE button to PAUSE / STOP video just like the pause button would ?

Image off the screen.
Some images now are showing vertical & horizontal scroll bars.
Because of this the outer border isnt all in view.
See attached screenshots>

Thanks

[theremotedr]

Ah ok now added & perfect.
Just image size now i believe

[coothead]

Just image size now i believe

This link of yours...

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

...does not appear to be an updated modal" version.

This makes it impossible to for me to actually view your problem.

coothead