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
    Location
    istanbul
    Posts
    315
    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 12:43 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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
    Location
    istanbul
    Posts
    315
    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 02:35 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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