www.webdeveloper.com
Results 1 to 10 of 10

Thread: Image replacement

  1. #1
    Join Date
    Jun 2013
    Posts
    15

    Image replacement

    Hello

    I am wondering how the best way of changing the main image when a thumbnail is clicked via javascript would be.

    At first I was going to give each thumbnail a function which onclick changes the innerhtml of the main image to show the thumbnail but I would like it to perhaps fade in and look a bit more sleek.

    Here's the code

    Code:
     <div class="imagerot">
        <img src="images/home/1.jpg" alt="" width="550" height="352" />
        <div class="imagerotsmaller">
        <img src="images/home/thumbs/1.jpg" alt="" width="150" height="96" />
        <img src="images/home/thumbs/2.jpg" alt="" width="150" height="96" />
        <img src="images/home/thumbs/3.jpg" alt="" width="150" height="96" />
        <img src="images/home/thumbs/4.jpg" alt="" width="150" height="96" />
        <img src="images/home/thumbs/1.jpg" alt="" width="150" height="96" />
        <img src="images/home/thumbs/2.jpg" alt="" width="150" height="96" />
        </div>
        
        </div>
    Any Suggestions?

    Thanks very much!

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // Fade Slide Show (26-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSS={
    
     init:function(o){
      var id=o.ID,img=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,hold=typeof(hold)=='number'?hold:ms*2,srt=o.AutoStart,clone=document.createElement('IMG'),src,z0=0;
      for (;z0<ary.length;z0++){
       src=ary[z0][0];
       ary[z0][0]=new Image();
       ary[z0][0].src=src;
      }
      clone.style.position='absolute';
      clone.style.zIndex='101';
      clone.style.left='-3000px';
      clone.style.top='-3000px';
      clone.style.width=img.width+'px';
      clone.style.height=img.height+'px';
      document.body.appendChild(clone);
      this['zxc'+o.ID]={
       id:id,
       img:img,
       a:img.parentNode,
       clone:clone,
       ary:ary,
       lgth:z0-1,
       ms:ms,
       hold:hold,
       cnt:0,
       ud:1
      };
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,false,o.cnt+ud);
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id];
      if (o&&o.ary[nu]&&nu!=o.cnt){
       o.cnt=nu;
       this.rotate(o,false,nu);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     rotate:function(o,auto,nu){
      var p=this.pos(o.img);
      this.Pause(o.id);
      o.auto=auto===true;
      if (o.auto){
       nu=o.cnt+o.ud;
      }
      o.cnt=nu>o.lgth?0:nu<0?o.lgth:nu
      o.a.removeAttribute('href');
      if (o.ary[o.cnt][1]){
       o.a.href=o.ary[o.cnt][1];
      }
      o.clone.src=o.ary[o.cnt][0].src;
      o.clone.style.width=o.img.width+'px';
      o.clone.style.height=o.img.height+'px';
      o.clone.style.left=p[0]+'px';
      o.clone.style.top=p[1]+'px';
      clearTimeout(o.dly);
      this.animate(o,0,100,new Date(),o.ms);
     },
    
     animate:function(o,f,t,srt,mS){
      var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
      }
      else {
       o.img.src=obj.src
       obj.style.left='-3000px';
       if (o.auto){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Next +ve" onmouseup="zxcFadeSS.Next('slide',1);" />
    <input type="button" name="" value="Next -ve" onmouseup="zxcFadeSS.Next('slide',-1);" />
    <input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSS.GoTo('slide',0);" />
    <input type="button" name="" value="GoTo 2" onmouseup="zxcFadeSS.GoTo('slide',1);" />
    <input type="button" name="" value="GoTo 3" onmouseup="zxcFadeSS.GoTo('slide',2);" />
    <input type="button" name="" value="GoTo 4" onmouseup="zxcFadeSS.GoTo('slide',3);" />
    <br />
    <br />
    <a href="#">
    <img src="http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg" id="slide" border=0 width="630" height="300" scrolling="yes"
    onmouseover="zxcFadeSS.Pause('slide');"
    onmouseout="zxcFadeSS.Auto('slide');"
    ></a>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    zxcFadeSS.init({
     ID:'slide',        // the unique ID name of the image.                             (string)
     ImageArray:[       // an array defining the slide show images SRCs and link HREFs. (array)
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/GivingHeart-3.jpg","http://childrenshospitalsnationalfoundation.org/Giving_Campaign.html"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/StartaClub-1.jpg","http://childrenshospitalsnationalfoundation.org/K.I.D.S.html"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/FoodTrucks-1.jpg","http://childrenshospitalsnationalfoundation.org/Food_Truck_Festival.html"],
      ["http://i1253.photobucket.com/albums/hh590/vzcrdo5/SocialNetwork.jpg","http://childrenshospitalsnationalfoundation.org/Social_Network.html"]
     ],
     FadeDuration:1000, //(optional) the fade duration in milli seconds.                (number, default = 1000)
     HoldDuration:2000,  //(optional) the auto rotation fade duration in milli seconds.  (number, default = FadeDuration)
     AutoStart:2000     //(optional) the delay before starting auto rotation.           (number, default = no auto start)
    })
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2013
    Posts
    16
    Use the jquery library. You can add click functionality to each of the thumb nails and change the source of the main image based on which thumbnail is clicked.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,362
    @mao3 Learn to code in javascript before using JQuery or similar.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Jun 2013
    Posts
    15
    Quote Originally Posted by \\.\ View Post
    @mao3 Learn to code in javascript before using JQuery or similar.
    good comment,

    this time I have used jquery although I could put it together with javascript

    here is my code so far

    Code:
    $('#oneimage').click(function () {
    	$('#mainimage').css("display", "none").attr('src' , 'images/home/2.jpg');
    	$('#mainimage').fadeIn(1000);
    and the html is

    Code:
    <div class="imagerot">
        <img id="mainimage" src="images/home/1.jpg" alt="" width="550" height="352" />
        <div class="imagerotsmaller">
        <img id="oneimage" src="images/home/thumbs/1.jpg" alt="" width="150" height="96" />
        <img id="oneimage" src="images/home/thumbs/2.jpg" alt="" width="150" height="96" />
        <img id="oneimage" src="images/home/thumbs/3.jpg" alt="" width="150" height="96" />
        <img id="oneimage" src="images/home/thumbs/4.jpg" alt="" width="150" height="96" />
        <img id="oneimage" src="images/home/thumbs/1.jpg" alt="" width="150" height="96" />
        <img id="oneimage" src="images/home/thumbs/2.jpg" alt="" width="150" height="96" />
        </div>
        
        </div>
    It works but at the moment I would have to change the id of each thumbnail and create a new function for that particular thumbnail.

    any advice?

  6. #6
    Join Date
    Jul 2013
    Posts
    16
    You could use a class selector instead of an id selector. So all thumbnails would have the same class attribute, and inside the function you can use $(this).attr("src") to distinguish between the thumbnails.
    Code:
    if($(this).attr("src") == "images/home/thumbs/1.jpg")
    {
      var mainImage = someImage;
    }

  7. #7
    Join Date
    Jun 2013
    Posts
    15
    Quote Originally Posted by mao3 View Post
    You could use a class selector instead of an id selector. So all thumbnails would have the same class attribute, and inside the function you can use $(this).attr("src") to distinguish between the thumbnails.
    Code:
    if($(this).attr("src") == "images/home/thumbs/1.jpg")
    {
      var mainImage = someImage;
    }
    Thank you for your reply, how would I incorporate that into my script at the moment?

    Code:
    $('#oneimage').click(function () {
    	$('#mainimage').css("display", "none").attr('src' , 'images/home/2.jpg');
    	$('#mainimage').fadeIn()(1000);
    	});

  8. #8
    Join Date
    Jun 2013
    Posts
    15
    Any Ideas?

  9. #9
    Join Date
    Jul 2013
    Posts
    16
    Code:
    $('.oneimage').click(function () { // make sure oneimage is a class
        var srcString = $(this).attr("src");
        var mainImage;
        if(srcString == "images/home/thumbs/1.jpg")
        {
            mainImage = "images/home/1.jpg";
        }
        else if(srcString == "images/home/thumbs/2.jpg")
        {
            mainImage = "images/home/2.jpg";
        }
        $('#mainimage').css("display", "none").attr('src' , mainImage);
        $('#mainimage').fadeIn()(1000);
    });

  10. #10
    Join Date
    Jun 2008
    Posts
    106
    This should do the trick.

    Code:
    <div class="imagerot">
    <img id="main" src="images/home/1.jpg" alt="" width="550" height="352" />
    <div class="imagerotsmaller">
    <img src="images/home/thumbs/1.jpg" alt="" width="150" height="96" />
    <img src="images/home/thumbs/2.jpg" alt="" width="150" height="96" />
    <img src="images/home/thumbs/3.jpg" alt="" width="150" height="96" />
    <img src="images/home/thumbs/4.jpg" alt="" width="150" height="96" />
    <img src="images/home/thumbs/5.jpg" alt="" width="150" height="96" />
    <img src="images/home/thumbs/6.jpg" alt="" width="150" height="96" />
    </div>
    </div>

    Code:
    $(window).on('ready', function () {
        $('.imagerotsmaller img').each(function (index) {
            $(this).on('click', function (event) {
                $('#main').css('display', 'none').attr('src', event.target.src).fadeIn(1000);
            });
        });
    });

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