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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing some properties on load

    I have the following function that is called onLoad (in body tag)

    function linkSet() {

    var thisImg, thisLink;
    thisImg = document.getElementsByTagName('img');
    thisLink = document.getElementsByTagName('a');

    for (i = 0; i < thisLink.length; i++) {
    thisImg[i].src = thisLink[i].href + '_thumb.jpg';
    thisLink[i].target = '_blank';
    }
    }

    basically all that's on the page (since it is an included file), is a bunch of thumbnails that are links to their full sized pics. To make things easier I wanted to have javascript do some tedious work for me. The images' sources are all set to a spacer image, I want the image source to be changed to the href of the link concatenated with '_thumb.jpg'

    (i changed the names of the thumbs to blah.jpg_thumb.jpg ... so if there is a way to take off the first .jpg when setting the src, that would be helpful too; that way i dont have to have it look messy, though I am using a batch file to make thumbnails and wouldnt be hard to include it.)

    I also want the links to open a new window when clicked, and dont want to set each one individually in dreamweaver or otherwise.

    Any help is appreciated.

    ~Stagmo

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Carnio
    I have the following function that is called onLoad (in body tag)

    function linkSet() {

    var thisImg, thisLink;
    thisImg = document.getElementsByTagName('img');
    thisLink = document.getElementsByTagName('a');

    for (i = 0; i < thisLink.length; i++) {
    thisImg[i].src = thisLink[i].href + '_thumb.jpg';
    thisLink[i].target = '_blank';
    }
    }

    basically all that's on the page (since it is an included file), is a bunch of thumbnails that are links to their full sized pics. To make things easier I wanted to have javascript do some tedious work for me. The images' sources are all set to a spacer image, I want the image source to be changed to the href of the link concatenated with '_thumb.jpg'

    (i changed the names of the thumbs to blah.jpg_thumb.jpg ... so if there is a way to take off the first .jpg when setting the src, that would be helpful too; that way i dont have to have it look messy, though I am using a batch file to make thumbnails and wouldnt be hard to include it.)

    I also want the links to open a new window when clicked, and dont want to set each one individually in dreamweaver or otherwise.

    Any help is appreciated.

    ~Stagmo
    This is easily done, when there are no extraneous links, nor images...

    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
    function thumb(){
    	with(document){
    		if(links.length==images.length){
    			for(var i=0;i<links.length;i++){
    				links[i].target='_blank';
    				images[i].src=links[i].href.replace(/\.jpg/i,'_thumb.jpg');
    			}
    		}
    	}
    }
    </script>
    </head>
    <body onload="thumb()">
    <a href="images/foo.jpg"><img src="images/1.gif"></a><br>
    <a href="images/bar.jpg"><img src="images/1.gif"></a>
    </body>
    </html>
    My thumb() function walks through all of the link/image pairs, targeting a new "_blank" window, and reassigning the image's src to the corresponding link's href (but only after replacing its ".jpg" with "_thumb.jpg").

    Does this help?

  • #3
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually for some reason it's still not doing anything...

    are you sure there is an i after /\.jpg/ ?
    also is there anything else, i have the correct body tag and everything is placed in the right spot (in the head tag with the script tag and everything)?

    I also wanted to know... can I put the thumbs in a subfolder and still make it work, should i just use a variable and use the replace thing twice? or is there another way to do it?
    Last edited by Carnio; 11-04-2004 at 08:59 AM. Reason: not working still

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try this:
    PHP Code:
    <script language="JavaScript" type="text/JavaScript">
    function 
    linkSet() {
    var 
    thisImg=document.getElementsByTagName('img');
    var 
    thisLink=document.getElementsByTagName('a');
    var 
    thisName=new Array()
    for (var 
    i=0i<thisLink.lengthi++) {
    thisName[i]=thisLink[i].getAttribute('href').split('.');
    thisName[i]=thisName[i][thisName[i].length-2].split('/');
    thisName[i]=thisName[i][thisName[i].length-1];
    thisImg[i].setAttribute('src',thisName+'_thumb.jpg');
    thisLink[i].setAttribute('target','_blank');
    }
    }
    onload=linkSet
    </script>
     
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hold up, it worked when i changed the if ( images.length == links.length) to if(true).. well it somewhat works, it actually screws up a bunch of images now, but the target works, and some images appear, while it changes others on the page...

    ... so basically i have more images than links or visa versa

    Since the page that I'm doing this on is included using PHP, it probably counts the other images on the encompassing page, anyway around this?
    Last edited by Carnio; 11-04-2004 at 09:10 AM. Reason: different results

  • #6
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    update

    OK so i fiddled with the thumb suggestion a bit to fit my needs, I came up with this:

    Code:
    function thumb(){
    	var j = 0;
    	with(document){
    		for(var i=4;i<links.length;i++){ //4 because there are 4 links before the first thumbnail.
    			while (images[j].src != 'http://www.foobar.com/images/spacer.gif' && j <= images.length) {j++;}
    			
    			images[j].src = links[i].href.replace(/\.jpg/,'_thumb.jpg');
    			
    			links[i].target = '_blank';
    		}
    	
    	}
    }

    this works, but I'd like to see if i can do it with a relative address for the spacer.gif. Also if there is a way to put the thumbs in a subfolder and still reference them in the code that would be helpful.

    *Edit* if there is a way to check for how many links come before that first image that is "spacer.gif", or get around having to hardcode the number of links before hand, that would be helpful too
    Last edited by Carnio; 11-04-2004 at 10:13 AM.


  •  

    Posting Permissions

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