carousel effect using javascript

**Harleyy** · 01-23-2012, 08:58 AM

Hello everyone,
I want to create a carousel effect using javascript whose thumbnails will be like the one in the attached jpg.

Waiting for solutions.

Thanks and Regards
Harleyy

**djr33** · 01-23-2012, 09:01 AM

That's possible, and making the images different sizes is easy (just changing their style properties).

But how do you want the animation to work? Or do you just want to rotate the images by moving them (without intermediate motion / animation)?

**Harleyy** · 01-23-2012, 09:12 AM

Thank you for the quick response.

I want to rotate the thumbnails with animation.

If I click on any image, it should animate and move to the center with the relevant text at the bottom or on the right for that thumbnail.

Like if I click on the extreme right thumbnail, it should move 2 steps and should come at center and moving other thumbnails respectively.

Similarly, if i move the thumbnail next to center, it should move 1 step and should come to center accordingly.

The animation should be circular and it should create a feel of 3d depth when the images move.

It should be static on load and it should move only on click of the thumbnails.

**Harleyy** · 01-23-2012, 12:54 PM

I just found this carousel from http://blog.pixelingene.com/demos/Carousel/ . I need to have the same effect but with the attached jpg.

waiting for solutions.

Thanks and regards
Harleyy

**djr33** · 01-23-2012, 04:15 PM

It looks like the script you found is a solution. Why won't that work for you? Or do you not understand how to use it?

**Harleyy** · 01-24-2012, 04:00 AM

Ya the script is the solution and I even tried to integrate with my thumbnails, but I think I am stuck up with this part of the script where the postion should be like the thumbnails attached.

Code:

function calculateRect(index, count)
    {
        var ratio = (index / count);
        var x = (CAROUSEL_WIDTH * 0.5) * Math.sin(ratio * 2 * Math.PI);
        var z = Math.sin(ratio * Math.PI);

        var scale = 1 / (1 + z);

        var rect = new Object();
        rect.width = ITEM_SIZE * scale;
        rect.height = ITEM_SIZE * scale;

        rect.x = (CAROUSEL_WIDTH - rect.width) * 0.5 + (x * scale);
        rect.z = count - Math.floor(count * z);
        rect.y = scale * (rect.height/2);

        return rect;
    }

I tried to work on this part, but I dont get the effect and the way the thumbnails are arranged in my jpg.

I think if I edit this part, I will get the effect that I want. But I tried a lot of permutations with it, but the thumbnails are not coming the way i have in my Jpg.

Awaiting soltions..

Thanks and Regards
Harleyy..

**vwphillips** · 01-26-2012, 02:08 PM

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>
<style type="text/css">
/*<![CDATA[*/

.sliderH {
  position:absolute;left:20px;top:200px;width:705px;height:200px;border:solid red 1px;
}

.sliderH IMG{
  position:relative;width:100px;left:0px;float:left;margin-left:0px;
}

.slideH {
  left:0px;top:0px;height:200px;
}

.sliderV {
  position:absolute;left:800px;top:20px;width:300px;height:600px;border:solid red 1px;
}

.sliderV IMG{
  position:relative;width:100px;left:0px;float:left;margin-left:0px;
}

.slideV {
  position:relative;left:100px;top:0px;width:100px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Expand Carousel (26-January-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// Functional Code Size 3.14K


function zxcExpandCarousel(o){
 var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['left','offsetWidth','width','height','top','offsetHeight']:['top','offsetHeight','height','width','left','offsetWidth'],obj=document.getElementById(o.ID),max=o.MaxWidth,nu=o.Display,ms=o.SlideDuration,ud=o.Direction,auto=o.AutoStart,slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),lgth=imgs.length,nu=typeof(nu)=='number'&&nu>0?Math.ceil(nu):lgth,min=o.MinWidth,min=typeof(min)=='number'?min:100,max=typeof(max)=='number'&&max<min?max:min*2,z0=0,z1=0;
 obj.style.overflow='hidden';
 slide.style.position='absolute';
 slide.style[mde[3]]='3000px';
 for (;z0<nu*2;z0++){
  slide.appendChild(imgs[z0%nu].cloneNode(false));
 }
 lgth=imgs.length;
 if (o.GoTo!=false){
  for (;z1<imgs.length;z1++){
   imgs[z1].style.position='absolute';
   oop.addevt(imgs[z1],'mouseup','goto',z1);
  }
 }
 oop.obj=obj;
 oop.slide=slide;
 oop.imgs=imgs;
 oop.mde=mde;
 lgth=lgth-nu;
 oop.c=(100*nu)/2
 oop.smax=-100*lgth;
 oop.ex=max-min;
 oop.min=min;
 oop.wh=slide[mde[1]];
 oop.ms=typeof(ms)=='number'?ms:1000;
 oop.sms=oop.ms*lgth;
 oop.now=-oop.c-50;
 oop.os=oop.c-50;
 oop.ud=!(typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C');
 slide.style[mde[4]]=(obj[mde[5]]-oop.size(oop.now))/2+'px';
 if (o.MouseOverMouseOut!=false){
  oop.addevt(slide,'mouseover','Pause');
  oop.addevt(slide,'mouseout','Auto');
 }
 if (typeof(auto)=='number'&&auto>=0){
  oop.Auto(auto);
 }
}

zxcExpandCarousel.prototype={

 Auto:function(ms){
  var oop=this;
  oop.Pause();
  oop.dly=setTimeout(function(){ oop.auto(); },ms||500);
 },

 Pause:function(){
  clearTimeout(this.dly);
 },

 goto:function(nu){
  var oop=this,c=oop.c,imgs=oop.imgs,to=-nu*100+oop.os,ms=Math.abs(oop.ms*(to-oop.now)/100);
  clearTimeout(this.dly);
  oop.ud=oop.now==to?oop.ud:oop.now>to;
  oop.animate(oop.now,Math.max(Math.min(to,0),oop.smax),new Date(),ms,false);
 },

 auto:function(){
  var oop=this,ms=Math.abs(oop.sms*(oop.smax-oop.now)/oop.smax);
  oop.Pause();
  oop.animate(oop.now,oop.ud?oop.smax:0,new Date(),ms,true);
 },

 animate:function(f,t,srt,mS,run){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,ud=oop.ud;
  if (isFinite(now)){
   oop.size(now);
   oop.now=now;
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.animate(f,t,srt,mS,run); },10);
  }
  else if (run){
   oop.animate(ud?0:oop.smax,ud?oop.smax:0,new Date(),oop.sms,true);
  }
 },

 size:function(now){
  var oop=this,c=oop.c,imgs=oop.imgs,z0=0,z0a,img,lft,w,ssz=0,mde=oop.mde;
  for (;z0<imgs.length;z0++){
   lft=now+100*z0;
   w=(lft+100)/(c+100/2);
   w=Math.max((lft+100/2<c?w:-(w-1)+1),0);
   w=w*oop.min+w*oop.ex;
   imgs[z0].style.width=w+'px';
   imgs[z0].style[mde[0]]=(oop.wh-imgs[z0][mde[2]])/2+'px';
   imgs[z0].style[mde[4]]=ssz+'px';
   ssz+=imgs[z0][mde[3]];
  }
  return ssz;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
 }

}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new zxcExpandCarousel({
 ID:'example1',             // the unique ID name of the parent DIV.                          (string)
 Mode:'horizontal',         //(optional) the mode of execution, 'horizontal' or 'vertical'.   (string, default = 'horizontal')
 Display:5,                 //(optional) the number of images to display.                     (number, default = the number of images in the slide DIV)
 MinWidth:100,              //(optional) for guidence only - the minimum width of the images. (number, default = 100)
 MaxWidth:150,              //(optional) the maximum width of the images.                     (number, default = MinWidth*2)
 SlideDuration:1000,        //(optional) the slide duration for one image in milli seconds.   (number, default = 1000)
 Direction:'anticlockwise', //(optional) the slide direction, 'clockwise' or 'anticlockwise'. (number, default = 'anticlockwise')
 AutoStart:2000,            //(optional) auto start delay in milli seconds.                   (number, default = no auto start)
 MouseOverMouseOut:true,    //(optional) false = mouseover and mouseout events are not added. (boolean, default = true or inline event calls)
 GoTo:true                  //(optional) false = 'goto' events are not added to the images.   (boolean, default = true)
});

new zxcExpandCarousel({
 ID:'example2',
 Mode:'vertical',
 AutoStart:0
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>

 <div id="example1" class="sliderH" >
  <div class="slideH" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
  </div>
 </div>

 <div id="example2" class="sliderV" >
  <div class="slideV" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" />
  </div>
 </div>

</body>

</html>

**Harleyy** · 01-27-2012, 07:27 AM

Thanks a lot sir for your time and script.

I need the effect which is similar to this one http://blog.pixelingene.com/demos/Carousel/

The only thing i want is the 3d circular effect, the attached image display for the thumbnails and the onclick effect similar to the one in http://blog.pixelingene.com/demos/Carousel/

Awaiting for solutions.

Thanks and Regards
Harleyy.

**vwphillips** · 01-27-2012, 11:38 AM

so why not use that script?

**Harleyy** · 01-27-2012, 11:42 AM

I tried to work on its script and I even tried to integrate with my thumbnails, but I think I am stuck up with this part of the script where the postion should be like the thumbnails attached. But am not getting the result as desired.

[code]function calculateRect(index, count)
{
var ratio = (index / count);
var x = (CAROUSEL_WIDTH * 0.5) * Math.sin(ratio * 2 * Math.PI);
var z = Math.sin(ratio * Math.PI);

var scale = 1 / (1 + z);

var rect = new Object();
rect.width = ITEM_SIZE * scale;
rect.height = ITEM_SIZE * scale;

rect.x = (CAROUSEL_WIDTH - rect.width) * 0.5 + (x * scale);
rect.z = count - Math.floor(count * z);
rect.y = scale * (rect.height/2);

return rect;
}[code]

I tried to work on this part, but I dont get the effect and the way the thumbnails are arranged in my jpg.

Awaiting solutions.

Awaiting soltions..

Thanks and Regards
Harleyy..

Thread: carousel effect using javascript

Thread Tools

Search Thread

carousel effect using javascript

Bookmarks

Bookmarks

Posting Permissions