Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

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

  1. #11
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,269
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    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
    ~ the original bald headed old fart ~

  2. #12
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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


    Click image for larger version. 

Name:	3908.jpg 
Views:	14 
Size:	65.4 KB 
ID:	6513

  3. #13
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,269
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there the remotedr,

    I have now got it working correctly, I hope.

    html
    Code:
    <!-- ****************** modal window ****************** -->
    
    <div id="modal" class="hide">
      <button id="closure">close modal</button>
      <img id="modal-image" src="" alt="">
    </div>
    
    <!-- ************************************************** -->
    Javascript
    Code:
    /****************** 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
    Code:
    /****************** 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
    Last edited by coothead; 06-06-2022 at 12:41 AM.
    ~ the original bald headed old fart ~

  4. #14
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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.

    Click image for larger version. 

Name:	3911.jpg 
Views:	13 
Size:	57.7 KB 
ID:	6514
    Click image for larger version. 

Name:	3912.jpg 
Views:	15 
Size:	85.1 KB 
ID:	6515

    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 ?

    Code:
    #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.

  5. #15
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,269
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

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

    1. Close button
    This...
    Code:
    #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...
    Code:
    #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...
    Code:
       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
    ~ the original bald headed old fart ~

  6. #16
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Please look at my js code in use shown below.

    Code:
       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

  7. #17
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,269
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there the remotedr,

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

    I should have posted this...
    Code:
       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
    ~ the original bald headed old fart ~

  8. #18
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    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

    Click image for larger version. 

Name:	3933.jpg 
Views:	14 
Size:	75.1 KB 
ID:	6516

    Click image for larger version. 

Name:	3934.jpg 
Views:	13 
Size:	91.9 KB 
ID:	6517

  9. #19
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

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

  10. #20
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,269
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Quote Originally Posted by theremotedr
    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
    ~ the original bald headed old fart ~

Similar Threads

  1. Resolved Lightbox image viewer (1 thumb, multiple images to open)
    By Skinnybobb in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-27-2012, 11:14 PM
  2. Thumb Viewer Enlarge Using Different Thumb and Source Image
    By mondealenvers in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-12-2010, 05:51 PM
  3. Replies: 0
    Last Post: 08-02-2006, 03:02 PM
  4. Thumb link to open in template page
    By Gerhard in forum HTML
    Replies: 1
    Last Post: 05-15-2006, 05:22 PM
  5. How to click on Image Map and open New Window
    By logancat in forum JavaScript
    Replies: 2
    Last Post: 01-08-2006, 05:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •