Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts

    onclick image swap

    I'm not happy that I can't do this.

    I can do a lot but not this! And I have searched high and wide online.

    Just want to swap an image (thumb) for a larger one - in the same spot - then click on the large image and go back to the small one.

    Nothing I have tried works but I KNOW it can be done - can't it?

    If anyone can help, I would be grateful.

    Thanks,

    Terry

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there tpeck,

    have a look at this simple example, it may give you some ideas...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://achelous.mysite.wanadoo-members.co.uk/"> <!--this line should be removed when using your own images//-->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    * {
        margin:0;
        padding:0;
     }
    #container {
        text-align:center;
     }
    .thumb {
        width:50px;
        height:50px;
        margin-top:225px
     }
    .bigpic {
        width:300px;
        height:300px;
        margin-top:100px
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload=function() {
       document.getElementById('pic').onclick=function() {
    if(this.className=='bigpic') {
       this.className='thumb';
     }
    else {
       this.className='bigpic';
       }
      }
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <img id="pic" class="thumb" src="ball_shad.jpg" alt=""/>
    </div>
    
    </body>
    </html>
    coothead

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Depending on the actual circumstances…

    You may actually be better toggling the img src, rather than using the larger copy as the thumb, as well.
    By using proper thumbnails (and toggling to a larger copy), you don't inflict lengthier download times on users who may not click on each thumbnail.

    Just a thought.

    e.g.
    Code:
    window.onload = function() {
    
    	document.getElementById('pic').onclick=function() {
    		this.src = (this.src=='ball_shad.jpg') ? 'ball_shad_thumb.jpg' : 'ball_shad.jpg';
    	}
    
    }
    (It's basically the same process as Coothead's. It just uses a different approach (namely a 'ternary conditional') to structuring the if… else phrase.)

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Thanks. I think I understand the idea behind both posts and putting it together I get this (I've omitted nice but extraneous stuff for the post):

    <html>
    <head>
    <style type="text/css">
    <!--
    .thumb {
    width:116px;
    height:125px;
    margin-top:225px
    }
    .bigpic {
    width:559px;
    height:600px;
    margin-top:100px
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    window.onload=function() {
    document.getElementById('pic').onclick=function() {
    this.src = (this.src=='../assets/images/art/art2.gif') ? '../assets/images/art/art2th.gif' : '../assets/images/art/art2.gif';
    if(this.className=='bigpic') {
    this.className='thumb';
    }
    else {
    this.className='bigpic';
    }
    }
    }
    //-->
    </script>
    </head>

    <body>
    <img id="pic" class="thumb" src="../assets/images/art/art2th.gif">
    </body>

    </html>

    **********************************

    On clicking, the thumb becomes the bigpic, but when clicking again it's a mini version of the bigpic instead of the thumb. It looks all squeezed up.

    Also, I have at least 6 pictures per page. Is there an multi-function version?

    Terry

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Bill,

    you caught me out again, being a little bit lazy.
    To rectify this I have made a thumbnail, and amended the script.
    Unfortunately your 'ternary conditional' appears to only works from 'thumbnail' to 'bigger image' but not in reverse, so....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://coothead.mysite.wanadoo-members.co.uk/pop_up_gallery/"/>  <!--this line should be removed when using your own images//-->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    * {
        margin:0;
        padding:0;
     }
    #container {
        text-align:center;
     }
    .thumb {
        margin-top:225px;
     }
    .bigpic {
        margin-top:105px;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload = function() {
      var test=0;
    document.getElementById('pic').onclick=function() {
    if(test==1) {
       this.src= 'ball_shad_thumb.jpg';
       this.className='thumb';
       test=0;
     }
    else {
       this.src='ball_shad.jpg';
       this.className='bigpic';
       test=1;
       } 
      }
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <img id="pic" class="thumb" src="ball_shad_thumb.jpg" alt=""/>
    </div>
    
    </body>
    </html>
    Of course, you may be able to simplify this further, for my edification.
    coothead

  • #6
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Thanks. It works well now.

    Is it easy to make it work for more than 1 pic on a page?

    Stripping it to the bare necessities:

    <html>
    <head>
    <script type="text/javascript">
    <!--
    window.onload = function() {
    var test=0;
    document.getElementById('pic').onclick=function() {
    if(test==1) {
    this.src= 'thumb.gif';
    test=0;
    }
    else {
    this.src='full.gif';
    test=1;
    }
    }
    }
    //-->
    </script>
    </head>

    <body>
    <img id="pic" src="thumb.gif">
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by coothead
    Unfortunately your 'ternary conditional' appears to only works from 'thumbnail' to 'bigger image' but not in reverse, so....
    I forgot that 'reading' returns the full url of the img, not just the filename.

    Soon fixed though…
    Code:
    window.onload = function() {
    
    	document.getElementById('pic').onclick = function() {
    		imgObj.onclick = function() { this.src = (this.src.indexOf('ball_shad.jpg') != -1) ? 'ball_shad_thumb.jpg' : 'ball_shad.jpg' }
    	}
    
    }

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Thanks for that Bill,

    Now the OP wants multiple image clicking, so what do you think of this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://coothead.mysite.wanadoo-members.co.uk/pop_up_gallery/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #container img {
        border:1px solid #000;
        margin:10px 4px;
        float:left;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload = function() {
    
      var pics=new Array();
           pics[0]='ball_shad_thumb.jpg,ball_shad.jpg'; 
           pics[1]='dog_thumb.jpg,dog.jpg'; 
           pics[2]='girl_thumb.jpg,girl.jpg'; 
           pics[3]='aaa_thumb.jpg,aaa.jpg';
    
      var ims=document.getElementById('container').getElementsByTagName('img');
    
    for(c=0;c<ims.length;c++) {
       document.getElementById('pic'+c).onclick=function() {
    
       n=this.id.split('pic')[1];
    
    if(this.className=='bigpic') {
       this.src= pics[n].split(',')[0];
       this.className='thumb';
     }
    else {
       this.src=pics[n].split(',')[1];
       this.className='bigpic';
        } 
       }
      }
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <img id="pic0" class="thumb" src="ball_shad_thumb.jpg" alt=""/>
    <img id="pic1" class="thumb" src="dog_thumb.jpg" alt=""/>
    <img id="pic2" class="thumb" src="girl_thumb.jpg" alt=""/>
    <img id="pic3" class="thumb" src="aaa_thumb.jpg" alt=""/>
    </div>
    
    </body>
    </html>
    coothead

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I'd be inclined to do a simple replace() on portions of the filename.
    The only requirement is that you add either _full or _thumb to the stem of the filename.
    You can then use js to check for the presence of (e.g.) _full in the src and, if found, replace it with _thumb.
    It can be made to toggle.

    e.g.
    Code:
    window.onload = setToggle;
    
    function setToggle() {
    
    	var imgObjs = document.getElementById('pics').getElementsByTagName('img');
    	for (var i = 0, thisImg; thisImg = imgObjs[i]; i++) {
    		thisImg.onclick = function() { this.src = (this.src.indexOf('_thumb.') != -1) ? this.src.replace('_thumb.','_full.') : this.src.replace('_full.','_thumb.') }
    	}
    
    }
    (Note that the search strings include a trailing full-stop/period. This is to ensure that the filename stem is being changed rather than another instance of _thumb or _full which might appear somewhere in the src url.)

    demo

    Just name the thumbs and fullsize images accordingly, place them within the pics div* and the script will take care of the rest. No need for naming arrays or splitting src attributes.
    (* thumbnails img elements could alternatively be targeted according to the use of a specific className or even purely on the presence of _thumb in their src attribute, if for example, you had thumbnails scattered throughout a page, but wanted them all to be clickable/togglable and didn't want to add a class to each image.)

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Thanks Bill,

    That's excellent.

    Five lines of code, instead of my seventeen.
    That certainly helps in the fight against code bloat.

    coot

  • #11
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    806
    Thanks
    42
    Thanked 6 Times in 5 Posts
    Well, thanks peoples - it all works nicely.

    Very grateful for your help. Definitely in my collection of usefulnesses.

    Terry


  •  

    Posting Permissions

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