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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing images with jquery/javascript

    Hi there I am working on a small test, trying to change images with jquery. I have tried different combination but no joy.
    SO, here's the code:
    html:
    Code:
    <html>
    	<head>
    		<title>test</title>
    		<link rel="stylesheet" type="text/css" href="style.css">
    		<script type="text/javascript" src="script.js"></script>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    	</head>
    	<body>
    		<div>
    			<p>This paragraph is the default</p>
    			<p class="hide_paragraph">This paragraph comes in with image 1</p>
    			<p class="hide_paragraph">This paragraph comes in with image 2</p>
    			<p class="hide_paragraph">This paragraph comes in with image 3</p>
    		</div>
    		<div class = "big_image" id="big_image">
    			<img src="placeholder.jpg" alt="" id="placeholder_image" >
    			<img src="test1.jpg" class="hide_image">
    			<img src="test2.jpg" class="hide_image">
    			<img src="test3.jpg" class="hide_image">
    		</div>
    		<div class="thumb_box">
    			<ul class="thumb_images">
    				<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
    				<li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb2</a></li>
    				<li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb3</a></li>
    			</ul>
    		</div>
    	</body>
    </html>
    CSS (probably with a few unnecessary rules)
    Code:
    .big_image{
    	border:1px solid red;
    	width:700px;
    	height:525px;
    	margin:0 auto;
    }
    
    .thumb_images{
    	list-style:none;	
    }
    
    .thumb_images li{
    	float:left;
    	padding:15px;
    }
    
    .thumb_images li img{
    	display:block;
    }
    
    
    body{
    	background-color:pink;
    }
    
    .thumb_images li a img{
    	border-style:none;
    }
    
    .thumb_images li a{
    	text-decoration:none;
    }
    
    .thumb_images li a:hover{
    	color:red;
    	text-decoration:underline;
    }
    
    .hide_image{
    	display:none;
    }
    
    .show_image{
    	display:block;
    }
    
    .hide_paragraph{
    	display:none;
    }
    
    .show_paragraph{
    	display:block;S
    }
    script:
    Code:
    function changeImage(image){
    	
    	$("big_image img").attr("src",image).removeClass("hide_image").addClass("show_image");
    	
    	
    
    }
    Now, what was I trying to achieve? Well I would like to be able to click on a thimbnail and change the big image accordingly together with the paragraph related to it. YOu can see the site in here: http://antobbo.webspace.virginmedia..../test/test.htm
    Needless to say it doesn't work now. What I have attempted to do in my script was to pass the image as a parameter to the functin and then the jquery is supposed to change the src of the image with the new image path, remove the hidden class and add a show_image class.
    Any suggestion is very welcome of course thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,329
    Thanks
    23
    Thanked 616 Times in 615 Posts
    You don't need to have your images in the html except for speed. But where they're placed is not important as long as they're not visible. I changed the jquery code and used my images. The big thing is where the onclick went and making the selector an ID value.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Jquery</title>
    <meta name="generator" content="TSW WebCoder 2010" />
    <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function changeImage(image){
    	$("#big_image img").attr("src",image);
    }
    </script>
    </head>
    <body>
    
    <div class = "big_image" id="big_image">
    	<img src="images/1.jpg" alt="" id="placeholder_image"  />
    </div>
    <div class="thumb_box">
    	<ul class="thumb_images">
    		<li><a href="#" onclick="changeImage('images/3.jpg')"><img src="images/smaller3.jpg" alt=""  />Thumb1</a></li>
    		<li><a href="#" onclick="changeImage('images/4.jpg')"><img src="images/smaller4.jpg" alt=""  />Thumb2</a></li>
    		<li><a href="#" onclick="changeImage('images/5.jpg')"><img src="images/smaller5.jpg" alt=""  />Thumb3</a></li>
    	</ul>
    </div>
    
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, it makes sense : - )


  •  

    Posting Permissions

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