Basic Verbs

We are very sorry for the inconvenience and the design. We have problems with the hosting and we hope that we’ll straight them out soon. Thank you for the understanding

After long time of struggling with bugs and procrastination, I finally finished the best carousel of all time! There are some custom and proprietary non open source plugins like this, but with limited functionality and custom implementation. Mine is easy to implement, highly customizable and works with images and DOM too.

Anyway i will start with an example of the plugin:

Here is how you implement it:

    $('#carouselthreed').carousel3D({
        speed: 900,
        perspectiveZoom: 70,
        sideOffset: 80,
        topOffset:0,
        secondaryOpacity: .35,
        emClass:'tdc-element'
    })

HTML:
<div id="carouselthreed">
        <img class="tdc-element" src="img/fly.jpg" alt="">
        <img class="tdc-element" src="img/gates.jpg" alt="">
        <img class="tdc-element" src="img/penguins.jpg" alt="">
 </div>

The settings object attributes are:

speed - Speed of animation in milliseconds (default 350)
perspectiveZoom - Percentage of secondary element's sizes relative to primary element (default 80)
sideOffset - Offset of secondary elements (default 70)
topOffset - Offset from top of secondary elements (default 0)
secondaryOpacity - Opacity of secondary elements (default 0.8)
emClass - CSS class of elements that will rotate (images/dom) (default "tdc-element")


Any of those attributes can be omitted and default values will be used. For reference, the second element in the container is taken, it is the central element and all other elements are resized relative to it. It works with unlimited number of elements.

You can download the plugin here and you only need the jquery library.

Enjoy!

In one project of ours, we needed a simple and light DOM carousel that will fallback on list when javascript is turned off. By the term “DOM carousel” i mean a carousel that will show/hide/slide DOM elements, complete container (div, p, h) not just images or special types of content. This domCarousel takes the containers one by one and slides them one after another.

Works in a simple manner. Just attach it on the parent container of the elements that will slide, fill in the options object (or use the default values) and you are good to go.

$.fn.domCarousel = function(options){
        // keeping a reference to the carousel object
	var container = this;

        //setting the class of the items that will rotate or default
	var itemClass = (options.itemClass)?(options.itemClass):("dc-item");

        //interval length of transition
	var ti = (options.transitionInterval)?(options.transitionInterval):(10000);

        //label for the start button or default
	var startLabel = (options.startLabel)?(options.startLabel):("Start");

        //label for the stop button or default
	var stopLabel = (options.stopLabel)?(options.stopLabel):("Stop");

        //label for the back button or default
	var backLabel = (options.backLabel)?(options.backLabel):("Back");

        //label for the forward button or default
	var forwardLabel = (options.forwardLabel)?(options.forwardLabel):("forward");

        //display buttons true or false
	var displayButtons = (options.displayButtons)?(options.displayButtons):(true);

       //attach a class to the buttons
	var buttonClass = (options.buttonClass)?(options.buttonClass):('button');

	//initializing and help vars.
	var intervalID = ""; //id of the interval object so we can control it
	var mutex = false; //mutex so the transitions wont overlap
	var min_height = 0; 

        //hide all the elements
	$(container).find("."+itemClass+":gt(0)").hide();
	//make them position relative and add some style to them
        //(you can change this so it suits you better)
	$(container).css("position","relative");
	$(container).css("margin-top","20px");
	$(container).find("."+itemClass).css("margin","0px");

	var currentIndex = 0; //this is the currently active em

       //This is where the magic happens. Using current item reference
 	//and the mutex, we animate blocks one by one. See why mutex
       // is important
	container.changeItem = function(){
		if(!mutex){
			mutex=true;
			$(container).find("."+itemClass+":eq("+currentIndex+")")
                                .hide("slide",{direction: 'left'},300,function(){

			nextToShow = (currentIndex == $(container)
                                       .find("."+itemClass).length-1)
                               ? (0):(currentIndex+1);				

				$(container).find("."+itemClass+":eq("+nextToShow+")")
                                .show("slide",{direction: 'right'},300,function(){
					currentIndex = nextToShow;
					mutex=false;
				});
			});
		}
	}

	// same function from above but for back
	container.changeBack = function(){
		if (!mutex) {
			mutex = true;
			$(container).find("." + itemClass +
                                  ":eq(" + currentIndex + ")").hide("slide", {
				direction: 'right'
			}, 300, function(){
			nextToShow = (currentIndex == 0) ?
                        ($(container).find("." + itemClass).length - 1) : (currentIndex - 1);

			$(container).find("." + itemClass + ":eq(" + nextToShow + ")")
                        .show("slide", {
					direction: 'left'
				}, 300, function(){
					currentIndex = nextToShow;
					mutex = false;
				});
			});
		}
	}

	//Initialize the interval and animate
	container.play = function(){

		if(!intervalID){
			$(container).find("input.dc_button_ss").val(stopLabel);
			$(container).find("input.dc_button_ss").click(function(){
				container.stop();
			});
			intervalID = setInterval(function(){
				container.changeItem();
			},ti);
		}
	}

	//find the interval and remove it
	container.stop = function(){
		if(intervalID){
			$(container).find("input.dc_button_ss").val(startLabel);
			$(container).find("input.dc_button_ss").click(function(){
				container.play();
			});
			clearInterval(intervalID);
			intervalID = null;
		}
	}

	//Should we display buttons or not.
	if(displayButtons){
		$(container).append('<span style="position: absolute; right: 5px; top: -28px;">
               <input class="dc_button_back '+buttonClass+'" type="button" value="'+backLabel+'" /> 
               <input class="dc_button_ss '+buttonClass+'" type="button" value="'+stopLabel+'" /> 
               <input class="dc_button_forward '+buttonClass+'" type="button" value="'+forwardLabel+'" />');

	        //init button click events
		$(container).find("input.dc_button_back").click(function(){
			container.stop();
			container.changeBack();
		});

		$(container).find("input.dc_button_forward").click(function(){
			container.stop();
		        container.changeItem();
		});
	}
        //start the carousel
	container.play();
}

The plugin is used same as all other jquery plugins : $(selector).domCarousel(options). Options is an object that has these attributes:
itemClass : css class of the transition items,
transitionInterval : time in milliseconds of transition,
startLabel : start button label,
stopLabel : stop button label,
backtLabel : back button label,
forwardLabel : forward button label,
displayButtons : will we display buttons or not,
buttonClass : css class of the buttons

To use this plugin, you will need the jQuery library, the jQuery-UI library and the plugin itself. Live example of the plugin, you can see here the fourth box from top.

Enjoy!

Ton of random snippets of code I frequently whip out during design. Particularly the fixed footer. The single-level dropdown is pretty custom/sleek too.

Anyway, they are all pretty bare-bones, so you should be able to figure out how to implement them from source.

http://basicverbs.com/objects

Feel free to check back as I add something new almost every week.

Few days ago i was bored to death and decided to do something to pass time – write a jquery plugin. Didn’t have any idea what to do, so Cory said “Lets do something that will give life and movement to the designs without using flash”. I started on LiveScape – the live landscape.

The idea behind this plugin is to have somekind of landscape container that will contain objects moving inside of it e.g. sky with the clouds moving. The plugin is built simple, has simple implementation, it is very easy to use, yet very flexible. You only need the landscape image, the object images and one container.

Lets get technical: You have a div #livescape. This is how the plugin in used.

$('#livescape').livescape({

    height : '360px',  //height of the landscape (can be omitted)
    width : '1000px', //width of the landscape (can be omitted)
    background_image : 'img/bg.jpg', //background image (can be omitted)

    // Next define the objects that are moving:
    objects : [
        {
            //the positions are relative to the landscape
            //if omitted, random assumed - same for duration
            start_x : "1700px", //x of start position
            start_y : "190px", //y of start position
            end_x : "-4000px", //x of end position
            end_y : "190px", //y of end position
            image : 'img/car.png', //image of the object (url)
            duration : 18000, // duration of the animation
            loop : true, // the animation loops
            href : "ThisisBatCountry.png", //the object is anchor
            pause: 1000, //pause in between loops in ms
            fade : true //the objects fade in on start and out on end
        },
        //another object
        {
            start_x : "-250px",
            start_y : "5px",
            end_x : "1250px",
            end_y : "5px",
            duration : 49000,
            image : 'img/cloud1.png',
            loop : true,
            fade : true
        }
    ]
})

This is setup is for 2 objects. The implementation is pretty intuitive and i think you will get a hold of it very fast.

The plugin is still beta. Needs refactoring. Time of development was around 30 min. Nevertheless you will have access to an early access version.

Anyway [DOWNLOAD] the plugin and enjoy the “Fear and Loathing in Las Vegas” example:

Portfolio Press by Blog Oh! Blog