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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Toronto, ON
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do you properly pop up a thumnail image on its own?

    I'm extremely new to Javascript and managed to get the coding to do *almost* what I wanted it to do, which is have an image thumbnailed, be able to click on it and have it open as just the image, instead of in a seperate browser window.

    What I seem to have gotten wrong is where it's pointing to for the pop-up image. Instead of popping up a larger version of the small image, it's popping up a smaller version of the website itself.

    URL: www.enchantedcattery.com

    In the head:

    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="index/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>Popup Window Image Preview</title>
    <script language="javascript">
    <!-- hide from old browsers
    function selectWin(source,h1,w1){
    newWin = window.open(source,'','height=' + h1 + ',width=' + w1 + ',top=10,left=0');
    }
    // stop hiding -->
    </script>

    In the body:

    <p><a href="javascript:selectWin('index.html?image=coopers_small.jpg&height=276&width=500',276,500)"><img

    border="0" src="coopers_big.jpg" alt="coopers_small.jpg" " width="100" height="55"></a></p>


    If there's something missing that I should be posting along with the question, please let me know. I've never worked within a forum environment before.

    Thank you for your time,

    -forsaken.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    hmm you may interested in this thread http://www.codingforums.com/showthread.php?t=53902

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It's not pretty, but I'm getting better.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>54187</title>
    		<style type="text/css">
    			#photoBox
    			{
    				position:absolute;
    				top:10em;
    				left:10em;
    
    				padding:1em;
    				border:1px solid #000;
    				background-color:#eee;
    			}
    			#photoBox img
    			{
    				border:1px solid #000;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="thumbnails">
    			<li><a href="/images/1.jpeg"><img src="/images/1.jpg" alt=""></a></li>
    			<li><a href="/images/2.jpeg"><img src="/images/2.jpg" alt=""></a></li>
    			<li><a href="/images/3.jpeg"><img src="/images/3.jpg" alt=""></a></li>
    		</ul>
    
    		<script type="text/javascript">
    			var photoBox = new PhotoBox();
    
    			var images = document.getElementById('thumbnails').getElementsByTagName('img');
    			for(var i = 0, len = images.length; i < len; i++)
    			{
    				images[i].parentNode.onclick = function(){photoBox.open(this.getAttribute('href'));return false};
    			}
    
    			function PhotoBox(url)
    			{
    				var self = this;
    				var image = null;
    				var element = null;
    
    				this.open = function (url)
    				{
    					if(url == null)
    					{
    						return;
    					}
    
    					if(self.element == null)
    					{
    						self.element = createWindow(url);
    					}
    
    					self.setImage(url);
    				}
    
    				this.close = function ()
    				{
    					self.element.parentNode.removeChild(self.element);
    					self.element = null;
    				}
    
    				this.setImage = function (url)
    				{
    					self.image.src = url;
    				}
    
    				function createImageElement(url)
    				{
    					var img = document.createElement('img');
    					img.setAttribute('src',url);
    					return img;
    				}
    
    				function createWindow(url)
    				{
    					self.image = createImageElement(url);
    
    					var div = document.createElement('div');
    					div.setAttribute('id','photoBox');
    					div.onclick = self.close;
    
    					div.appendChild(self.image);
    
    					document.body.appendChild(div);
    
    					return div;
    				}
    			}
    		</script>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Toronto, ON
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now I'm horribly confused. Was my original script not the right script to be using?

    Even with the script you've posted, I know I'm still doing something wrong, because it's still popping up with a smaller version of the website, rather than enlarging the thumnail in it's own window.

    -forsaken

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    not neccessarily wrong just maybe better ones, but if u still wanna use ur script, try this, add the stuff in red
    Code:
    <a href="javascript:selectWin('index.html?image=coopers_small.jpg&height=276&width=500','276','500')">

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Toronto, ON
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I really appreciate your help.

    I still seem to be having the trouble, though. Am I pointing to the site instead of the picture at all?

    -forsaken

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    this is the reason why we referred you to other scripts because linking to an image directly can cause problems because linking directly to an image without resizing anything which is what those other scripts do, you will just get the image and a lot of white space, but this is what i get when i go to the location that i think should be your image http://www.enchantedcattery.com/inde...=276&width=500


  •  

    Posting Permissions

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