www.webdeveloper.com
Results 1 to 5 of 5

Thread: changing images with jquery

  1. #1
    Join Date
    Feb 2011
    Location
    London
    Posts
    62

    changing images with jquery

    Hi I wonder if you can give me a hand with this please.
    I have an html page:

    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">
    <img src="placeholder.jpg" alt="" class="show_image">
    <img src="test1.jpg" alt="" class="hide_image">
    <img src="test2.jpg" alt="" class="hide_image">
    <img src="test3.jpg" alt="" class="hide_image">
    </div>
    <div class="thumb_box">
    <ul class="thumb_images">
    <li><a href="#"><img src="test1_thumb.jpg" alt="">Thumb1</a></li>
    <li><a href="#"><img src="test2_thumb.jpg" alt="">Thumb2</a></li>
    <li><a href="#"><img src="test3_thumb.jpg" alt="">Thumb3</a></li>
    </ul>
    </div>
    </body>
    </html>
    CSS:
    HTML 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
    }
    and part of the script I am trying to develop:
    Code:
    var pic1 = new Image();
    pic1.src = "test1.jpg";
    
    var pic2 = new Image();
    pic2.src = "test2.jpg";
    
    var.pic3 = new Image();
    pic3.src = "test3.jpg";
    
    $(document).ready(function(){
    
    	$("thumb_images li a").click(function(){
    	
    		$("big_image.show_image").fadeOut(1000, function(){
    		
    			($this).removeClass("show_image").addClass("hide_image");
    			
    		
    		});
    		
    	});
    	
    });
    I am not entirely sure how to proceed though. I have preloaded the images and what I need to do is when I click on a thumbnail the image in the big div will change to reflect the thumb I clicked on. The same should happen to the paragraphs that are at the moment hidden. SO, to summarize: when I land on the page there is a default paragraph and a default image: when I click on the thumbnail both the big image and the paragraph will be removed and replaced by the big image and the paragraph that goes with it.
    I was thinking to first remove the class of hidden and replace it with the visible one, as per css. Sorry not quite sure how to proceed: http://antobbo.webspace.virginmedia....mages/test.htm
    So any suggestion please?
    thanks

  2. #2
    Join Date
    Sep 2007
    Posts
    317
    I am new to Jquery.
    I tried this:
    Code:
       
    <html>
    	<head>
    		<title>test</title>
    		<link rel="stylesheet" type="text/css" href="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/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>
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?t=262590
    
    // http://www.w3schools.com/jquery/jquery_ref_selectors.asp
    $(document).ready(function(){
    
    	$('.thumb_images li a').click(function(){ 
    
    //alert($(this).parent('li').index());
    var n = $(this).parent('li').index();
    
    
    $('.big_image img.show_image').removeClass('show_image').addClass('hide_image');
    $($('.big_image img')[n+1]).addClass('show_image');
    
    
    $('#pano p.show_paragraph').removeClass('show_paragraph').addClass('hide_paragraph');
    $($('#pano p')[n+1]).addClass('show_paragraph');
    
    	
    });
    });
    
    
    </script>
    
    
    	</head>
    	<body>
    
    		<div id="pano">
    			<p class="show_paragraph">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">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg" alt="" class="show_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1.jpg" alt="" class="hide_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2.jpg" alt="" class="hide_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3.jpg" alt="" class="hide_image">
    		</div>
    		<div class="thumb_box">
    			<ul class="thumb_images">
    				<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1_thumb.jpg" alt="">Thumb1</a></li>
    				<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2_thumb.jpg" alt="">Thumb2</a></li>
    				<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3_thumb.jpg" alt="">Thumb3</a></li>
    			</ul>
    		</div>
    
    	</body>
    </html>
    Last edited by Ayşe; 07-14-2012 at 01:43 PM.

  3. #3
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    hi thanks for posting your code, really kind of you.
    A couple of questions please:
    when you say
    Code:
    var n = $(this).parent('li').index();
    it is returning the index of thumb_images li a's parent which is the <li> tag of the element we clicked on, correct? SO what's the value of that?
    then $('.big_image img.show_image').removeClass('show_image').addClass('hide_image');
    here we are selecting the image with a class of show_image inside the big_image container, removing the class of show_image and assigning it the class of hide_image

    $($('.big_image img')[n+1]).addClass('show_image'); what does that n+1 do? I mean we are selecting an image within the big_image container, so that n+1 is somehow identifying a specific image?
    This $('#pano p.show_paragraph').removeClass('show_paragraph').addClass('hide_paragraph'); is clear
    and finally this $($('#pano p')[n+1]).addClass('show_paragraph');
    again what doe n+1 do here?
    thanks a lot

  4. #4
    Join Date
    Sep 2007
    Posts
    317
    Code:
      
       
    <html>
    	<head>
    		<title>test</title>
    		<link rel="stylesheet" type="text/css" href="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/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>
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?t=262590
    
    // http://api.jquery.com/
    
    $(document).ready(function(){
    
    	$('.thumb_images li a').click(function(){ 
    
    //http://api.jquery.com/parent/
    // http://api.jquery.com/parent-selector/
    alert($(this).parent().get(0).tagName); // Lİ
    // http://api.jquery.com/get/
    //alert($(this).parent().get());
    //alert($('li').get());
    
    
    $(this).parent().css('border','2px solid blue');
    
    // http://api.jquery.com/index/
    
    var ind = $(this).parent().index();
    alert('$(this).parent().index() = ' + ind );
    
    
    // http://www.w3schools.com/jquery/jquery_ref_selectors.asp
    $('.big_image img:not(.hide_image)').addClass('hide_image');
    
    
    // http://www.w3schools.com/jquery/sel_eq.asp
    // http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_eq
    // http://api.jquery.com/eq/
    // http://api.jquery.com/eq-selector/
    
    /*
    alert( $($('.big_image img')[0]).attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1.jpg
    alert( $('.big_image img:eq(0)').attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1.jpg
    
    alert( $($('.big_image img')[1]).attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2.jpg
    alert( $('.big_image img:eq(1)').attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2.jpg
    
    alert( $($('.big_image img')[2]).attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3.jpg
    alert( $('.big_image img:eq(2)').attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3.jpg
    
    alert( $($('.big_image img')[3]).attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg
    alert( $('.big_image img:eq(3)').attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg
    
    alert( $($('.big_image img')[ind]).attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg
    alert( $('.big_image img:eq('+ind+')').attr('src')); // http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg
    
    */
    
    
    $('.big_image img:eq('+ind+')').removeClass('hide_image');
    
    $('#pano p:not(.hide_paragraph)').addClass('hide_paragraph');
    
    $('#pano p:eq('+ind+')').removeClass('hide_paragraph');
    	
    });
    });
    
    
    </script>
    
    
    	</head>
    	<body>
    
    		<div id="pano">
    			<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>
    			<p>This paragraph is the default</p>
    		</div>
    		<div class = "big_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1.jpg" alt="" class="hide_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2.jpg" alt="" class="hide_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3.jpg" alt="" class="hide_image">
    			<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg" alt="" >
    		</div>
    		<div class="thumb_box">
    			<ul class="thumb_images">
    				<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1_thumb.jpg" alt="">Thumb1</a></li>
    				<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2_thumb.jpg" alt="">Thumb2</a></li>
    				<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3_thumb.jpg" alt="">Thumb3</a></li>
    			</ul>
    		</div>
    
    	</body>
    </html>
    As far As I know,
    $('.big_image img:eq('+ind+')')
    is same
    $($('.big_image img')[ind])



    Code:
    <ul class="thumb_images">
          <li><a>........</li>
          <li><a>........</li>
          <li><a>........</li>
    </ul>
    The parent of <a> element is <li> element.
    <li> element is in <ul> element.
    The index of first <li> element is 0.
    The index of second <li> element is 1.
    The index of third <li> element is 2.

    alert( $(this).parent().index() ) give me the index of <li> element that contained <a> element we clicked on
    Last edited by Ayşe; 07-17-2012 at 03:35 PM.

  5. #5
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    fantastic thanks for your help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles