Page 1 of 3 123 LastLast
Results 1 to 10 of 24

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

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

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

    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.

  2. #2
    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 theremotedt,

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

    HTML
    Code:
    <!-- ****************** modal window ****************** -->
    
    <div id="modal" class="hide">
     <img id="modal-image" src="" alt="">
     <button id="closure">close modal</button>
    </div>
    
    <!-- ************************************************** -->
    Javascript
    Code:
    /****************** 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
    Code:
    /****************** 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?
    ~ the original bald headed old fart ~

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

    Default

    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

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

    Default

    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

  5. #5
    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
    Is the code making the thumb larger ?

    I will check the code.

    coothead
    Last edited by coothead; 06-05-2022 at 07:19 PM.
    ~ the original bald headed old fart ~

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

    Default

    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.

    Click image for larger version. 

Name:	3904.jpg 
Views:	12 
Size:	19.6 KB 
ID:	6512
    Last edited by theremotedr; 06-05-2022 at 07:20 PM.

  7. #7
    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,

    you are right, well spotted.

    This line...
    Code:
       cnt[k].firstElementChild.firstElementChild.src;
    ...should be
    Code:
       cnt[k].firstElementChild.href;

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Hi,
    That worked many thanks.

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

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

  9. #9
    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 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...
    Code:
    /****************** 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
    ~ the original bald headed old fart ~

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

    Default

    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

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
  •