jCarrotCell Demo: Customize

Changing Default Mark Up

A wide range of mark up can be used to customize the carrotCell, as long as the hierarchy of elements and the class names are preserved.

prev

next

For example, using all DIVs (for whatever reason) instead of lists.

<div id="markKitten" class="carrotCell">	
	
	<div class="prev">prev</div>
	<div class="next">next</div>
	<div class="carrotCellView">
		<div>
			<div><img src="images/cat01.png" /></div>
			<div><img src="images/cat02.png" /></div>
			<div><img src="images/cat03.png" /></div>
			<div><img src="images/cat04.png" /></div>
			<div><img src="images/cat05.png" /></div>
			<div><img src="images/cat06.png" /></div>
			<div><img src="images/cat07.png" /></div>
			<div><img src="images/cat08.png" /></div>
			<div><img src="images/cat09.png" /></div>
        </div>       
	</div>	
	<div class="navi"></div>		
				
</div>

Create CSS to style these elements as the .carrotCell CSS only targets the default markup.

#markKitten .carrotCellView div:first-child {
	background: #efefef;
}

#markKitten  .carrotCellView div div {
	width: 100px;
	height: 100px;
	border: solid 5px #666;
	margin: 10px;
	float: left;
	overflow: hidden;
	position: relative;
}

#markKitten .carrotCellView div.cloned {
	border-color: #ffcc00;
}

#markKitten .carrotCellView div span {
	...
}

#markKitten .carrotCellView div img {
	...
}

Set sliderSelect looks for the DIV inside .carrotCellView and returns the first result since this is assumed to the parent pane which holds all the slides. This selector can be changed to be more specific, or select by class name as long as the mark up is correct. sliderChildSelect is the selector for the children of sliderSelect and looks for the DIVs inside of it.

$('#markKitten').carrotCell({
	sliderSelect: "div",
	sliderChildSelect: "div",
	...
});

Moving Controls Elsewhere

Sometimes layouts require the carrotCell control buttons to be elsewhere on the page, the key to accomplish this is through setting the controlScope to where the controls have been moved to. The example for previous & next covers this same topic.

In this example, all possible controls reside inside .testControls outside of the .carrotCell block

<div id="movingKitten" class="carrotCell">			
	<div class="carrotCellView">
		<ol>...</ol>       
	</div>				
</div>

<div class="testControls"> 
	<button class="myPrev">Previously in Kittens</button>
	<button class="myNext">Next in Kittens</button>
	<button class="pause">Pause Kittens</button>
	<button class="play">Play Kittens</button>
	<button class="stop">Stop Kittens</button>
	<ul class="myNavi"> </ul>
</div>

Set the containsControl to boolean false to indicate that the controls .carrotCell, then set the controlScope to the appropriate selector, if controlScope is not set, body is assumed to be the scope where the controls can be found. If the default class names of the controls have been changed, pass in the appropriate selectors. Check the documentation for more detail.

		
$('#movingKitten').carrotCell({
	containsControl: false,
	controlScope: ".testControls",
	prevSelect: ".myPrev",
	nextSelect: ".myNext",
	naviContainer: ".myNavi",
	navi: true,
	makeNavi: true,
	...
});

Custom Classes

Outside of .carrotCell and .carrotCellView, any of the class names from the default mark up can be changed by passing in the appropriate selector or class name through the carrotCell settings object. In the previous examples it has been shown how to change the class names in markup and pass in the relevant selector, this section will demonstrate some class configurations not used by selectors but by the CSS.

These class names are generated in the code and not taken from the existing markup, thus they must be passed through the setting object.

	
$("#classKitten").carrotCell({
	auto: true,
	navi: true,
	makeNavi: true,
	disabledClass: "herp",
	naviClass: "derp",
	currentClass: "really",
	cloneClass: "legion"
});

The mark up generated from the above example is shown below. Note that .really is used for the navi selected state, .derp is the navi individual node class, .legion is the class that indicate a slide element is a clone, and .herp is the control button inactive state

	
<div class="carrotCell kitten" id="classKitten">	
	<ul class="navi">
		<li class="derp really">1</li>
		<li class="derp">2</li>
		<li class="derp">3</li>
	</ul>		
	<div class="carrotCellView" style="overflow: hidden;">
		<ol style="width: 2210px;">
			<li class="legion"><img src="images/cat06.png"></li>
			...
			<li class="legion"><img src="images/cat09.png"></li>
			<li><img src="images/cat01.png"></li>
			...
			<li><img src="images/cat09.png"></li>
			<li class="legion"><img src="images/cat01.png"></li>
			...
			<li class="legion"><img src="images/cat04.png"></li>
        </ol>       
	</div>	
	<div class="stop">stop</div>			
	<div class="pause">pause</div>
	<div class="play herp">play</div>
</div>

Custom Events

If the default event names of the carrotCell creates conflict with existing code, it is possible to rename the existing events used. Refer to the documentation for the complete event list. In this example, click previous and next to see what events are happening.

In this example, every event is using the same event name of "carrotHappened" letting one event handler parse all relevant events. The event listener is passed in the name of the carrotCell object, then the constant event name string and the rest of the event information. See the documentation for more on event information.

$("#eventKitten").carrotCell({
	scrollStart : "carrotHappened",
	scrollEnd : "carrotHappened",
	atStart : "carrotHappened",
	atEnd : "carrotHappened"
});

var eventResult = $("#eventKittenResult");

$(document).bind("carrotHappened", function(e, carrotName, eventName, pageNum){
	var pageNumReport = "";
	if (pageNum) {
			pageNumReport = "Page number is " + pageNum;
	}
	eventResult.append("
" + carrotName + " event " + eventName + " happened. " + pageNumReport + "
");
});

Initialized CallBack

To chain carrotCell into the load order of some over all application, the optional callback function carrotDone can be passed in, this function will be called once the carrotCell has finished its initialization and setup. The carrotDone function will have access to the carrotCell API and be able to interact with it through that. See the documentation for more detail or see the API demo.

This example shows how a click event can trigger the carrotCell creation, then when carrotCell is created, trigger the callback function.

// after the callKittenAction button is clicked carrotCell is created
// after carrotCell is created, specialCallKittenFunction is called
$("#callKittenAction").bind("click", function(){		
	$("#callKitten").carrotCell({
		carrotDone: specialCallKittenFunction
	});				
});

// this callback function is passed the carrotCell API
var specialCallKittenFunction = function(api){
	api.advance();
	$("#callKittenResult").html("kitten has loaded and advanced forward 1 page");
};