Carousel using Dojo


For a project i had to make a carousel and i was using Dojo throughout my project. After about two weeks, i hav made one.

UPDATE:
Sorry folks! The site is down for maintenance so i cant post the url here.

The URL that I gave below in one of my comments is now broken. It seems dojo has updated their dojo 1.4.0 to 1.4.3.

Go to this link : http://download.dojotoolkit.org

Choose the the latest release

Then go to  dojox/widget/ and find pager widget.

Final Output :

carousel using dojo

Here is da code :

html code :

<div id="carouselwrap">
<div id="carouselprev" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the previous arrow-->
<div id="carousel"><!--start of the carousel-->
<div id="carouselscroll" ><!--start of the carouselscroll-->
   <em>
<div class="carouselscrollbox"><!--start of the carouselscrollbox block-->
<div class="carouselscrollerimg">
           <img src="Your image here" /><!--this div contains the image path --></div>
<div class="soundsettitle bmrm_text">
            Lorem Ipsum</div>
<div class="artisttitle bmrm_text">
            Lorem Ipsum</div>
<div class="soundsetdesc bmrm_text">
           - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
</em><em><em><!--end of the carouselscrollbox block--></em></em></div>
<div id="carouselnext" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the next arrow--></div>
<!--repeat the div block wid class 'carouselscrollbox'(in a for loop) as many times to get as many records in da carousel.-->

Javascript code: First step : dojo.require("dojo.fx");

var animationMethod = "chain";
var animG, offsetW, offsetH = null;
var newLeft = 0;
var boxMixin = {duration: 1000};
var carouselscroller ;

//attach events on load
dojo.addOnLoad(function() {
       var prev = dojo.byId('carouselprev');
       var next = dojo.byId('carouselnext');
       carouselscroller = dojo.byId('carouselscroll');
       dojo.connect(prev,"onclick",null,"slideLeft");
       dojo.connect(next,"onclick",null,"slideRight");
});

//sliding to the right
function slideRight() {
       var difference = dojo.byId('carousel').offsetWidth-dojo.byId('carouselscroll').offsetWidth;
       if(newLeft>difference){
           newLeft = newLeft - 200;
           var style = carouselscroller.style;
	   var anim1 = dojo.animateProperty({
	   node: carouselscroller,
	   duration: boxMixin.duration/2,
	   properties: {
		left: { end: newLeft, unit:"px" }
		}
	});

	animG = dojo.fx[animationMethod]([anim1]).play();
         }

}

//sliding to the left
function slideLeft() {
        if(newLeft<0)
        {
   	    newLeft = newLeft + 200;
	    var style = carouselscroller.style;
	    var anim1 = dojo.animateProperty({
	    node: carouselscroller,
	    duration: boxMixin.duration/2,
	    properties: {
		//width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
		left: { end: newLeft, unit:"px" }
	     }
	});

   animG = dojo.fx[animationMethod]([anim1]).play();
   }
}
<pre>

CSS Code:


/*soundsets traversal [carousel]*/
#carouselwrap{width:700px;margin:35px 0px}
#carousel{
width: 600px;
height: 230px;
overflow: hidden;
float:left;
position:relative;
}
#carouselscroll{
float:left;
width:2000px !important;
position:absolute;
left:0px;
}
#carouselprev{background:url('/*image left arrow*/') no-repeat;}
#carouselnext{background:url('/*image right arrow*/') no-repeat;}
.traversecontrol{float:left;width:40px;height:45px;margin:70px 0px}
#carouselprev:hover,#carouselnext:hover{cursor:pointer}
.carouselscrollbox{
	float:left;
	border:1px solid #eee;
	margin:9px;
        background:#f6f5f5;
	width:180px;
        text-align:left;
        padding-bottom:10px;
	}

.carouselscrollerimg img{width:140px;height:80px;margin:3px 1px }
<pre>
<pre>

U can change the css accordingly.This is just my way of doing it.

Advertisements

12 thoughts on “Carousel using Dojo

  1. The project is now in alpha.So i cant giv the URL. But I can assure you it’s working 🙂

  2. Hello !

    i’m a student in france in lyon.
    Can you post a complete source code of your work.
    thanks

    mamadi

  3. @mamadi

    thnx for stopping by

    As far as the carousel is concerned…the code posted works fine.And that is what i hav used too.
    U just hav to put the div with class =”CAROUSELSCROLLBOX” in a for loop.
    Tell me where u r stuck.

  4. This code (after adding is var carouselscroller = dojo.byId(‘carouselscroll’); to both slide function ) will work like a charm.

    Thanks, so much Anoop.

  5. @Jason d

    Thnx for the feedback.
    One can also declare var carouselscroller above with all other initializations which i missed out i guess.Thnx for pointing out.

  6. I assume the above code has no license right ?

    I need to create a carousel (constrain: has to be in dojo). Since I am two days fresh to dojo, I find this a good starting point to meet my requirements.

    p.s Your tutorial is almost the only one that google returns when searching for “carousel + dojo”

  7. Hi Anoop.. great Code… but i have a problem with this code. I m just puuting the entire carousel in a Maindiv that can just silde in or out (using dojo) on a button click. In IE when i silde out MainDiv ( disappears) and then slide in the MainDiv the Carousel is not seen.. Can u please explain the cause of this problem… Its working fine in FF and Chrome.

  8. Hi Vinay, Thanks for stopping by.

    I guess the problem is with the css. Can you give me a url to check?

    Or check whether the carousel exists using IE DOM inspector?

    And could you pass the url for dojo sample for slide in /slide out?

  9. oops!! Sorry the application is still under development…. So still testing it in localhost… and for the dojo slide in and slide out effect… use the below code

    function toggleDiv(elId) // elId is the div you want to give the effect
    {
    dojo.require(“dojo.fx”);
    var mdivSearch = dojo.byId(elId);

    if (mdivSearch.style.display == ‘none’)
    {
    dojo.fx.wipeIn({node:elId,duration:300}).play();
    }
    else
    {

    dojo.fx.wipeOut({node:elId,duration:300}).play();

    }
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s