Image replacement

@Luke_FisherJul 18.2013

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> [/code]

Any Suggestions?

Thanks very much!

to post a comment

JavaScript

9 Comments(s) _↴

@vwphillipsJul 19.2013 — #

[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>[/CODE]

@mao3Jul 19.2013 — #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.

@rootJul 19.2013 — #@mao3 Learn to code in javascript before using JQuery or similar.

@Luke_FisherauthorJul 19.2013 — #@mao3 Learn to code in javascript before using JQuery or similar.[/QUOTE]

good comment,

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

here is my code so far

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

and the html is

<i>
 </i>&lt;div class="imagerot"&gt;
 &lt;img id="mainimage" src="images/home/1.jpg" alt="" width="550" height="352" /&gt;
 &lt;div class="imagerotsmaller"&gt;
 &lt;img id="oneimage" src="images/home/thumbs/1.jpg" alt="" width="150" height="96" /&gt;
 &lt;img id="oneimage" src="images/home/thumbs/2.jpg" alt="" width="150" height="96" /&gt;
 &lt;img id="oneimage" src="images/home/thumbs/3.jpg" alt="" width="150" height="96" /&gt;
 &lt;img id="oneimage" src="images/home/thumbs/4.jpg" alt="" width="150" height="96" /&gt;
 &lt;img id="oneimage" src="images/home/thumbs/1.jpg" alt="" width="150" height="96" /&gt;
 &lt;img id="oneimage" src="images/home/thumbs/2.jpg" alt="" width="150" height="96" /&gt;
 &lt;/div&gt;
 
 <i>    </i>&lt;/div&gt;

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?

@mao3Jul 19.2013 — #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;
 }
 [/CODE]

@Luke_FisherauthorJul 22.2013 — #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;
 }
 [/CODE]

[/QUOTE]

Thank you for your reply, how would I incorporate that into my script at the moment?

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

@Luke_FisherauthorJul 25.2013 — #Any Ideas?

@mao3Jul 27.2013 — #

[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);
 });
 [/CODE]

@tenfoldJul 28.2013 — #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]

[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);
 });
 });
 });[/CODE]

Also in #JavaScript _↴

Scroll Bar Properties of a div object error Calling a function from one file to another file

Success!

Help @Luke_Fisher spread the word by sharing this article on Twitter...

Tweet This

Image replacement

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴