jQuery + CSS3 Ima-Tech gallery

by etiennenoel

HTML

<ul class="slider" >
		<li>
            <div id="PresentationBanner">
                <img class="elementToAnimate" id="logo" src="/img/Logo (blanc).png" />
                <img class="elementToAnimate" id="OmegaSoccerCoaching" src="/img/Omega Soccer Coaching (blanc).png" />
                <img class="elementToAnimate" id="ApprendreDevelopperMaitriser" src="/img/Apprendre DĂ©velopper Maitriser (blanc).png" />
                <img class="elementToAnimate" id="wwwOmegaSoccerCoachingcom" src="/img/www.OmegaSoccerCoaching.com (blanc).png" />
            </div>
		</li>
        <li>
            <div id="PrivateCourses" onclick="document.location.href='{{ path('osc_privateCourses_homepage') }}'">
                    <img class="elementToAnimate" id="logo2" src="/img/publicites/cours_prives/Logo.png" />
                    <img class="elementToAnimate" id="coursPrivesOfferts" src="/img/publicites/cours_prives/cours_prives_offerts.png" />
                    <img class="elementToAnimate" id="profiterDeNotreExperience" src="/img/publicites/cours_prives/profiter_de_notre_experience.png" />
                    <img class="elementToAnimate" id="occasionUnique" src="/img/publicites/cours_prives/occasion_unique.png" />
                    <img class="elementToAnimate" id="pourEnSavoirPlus" src="/img/publicites/cours_prives/pour_en_savoir_plus.png" />
            </div>
		</li>

	
	<!--<div>
		<a href="camps.php">
		<img src="images/slideshow/image3.png" style="height:270px;" />
		</a>	
	</div>-->
	
	</ul>

CSS

.centerBanner {
	height:325px;
    padding:9px;
	position: relative;
	width:100%;
    background-image: url('/img/soccerFieldBackground.png');
    background-position: 50% 75%;
    max-width: 1800px;
    margin:auto;

	ul {
		height:325px;
		margin:auto;
		padding:0px;
		position:relative;
		
		li {
			display:block;
			height:100%;
			position:absolute;
			top:22px;
			width:100%;
			a {
				display:block;
				margin:auto;
				width:1200px;
				img {
					border:4px solid black;
					border-radius:15px;
					height:100%;
					width:100%;
				}
			}
		}
	}
	
	
}

JavaScript

(function($){



    $.fn.slider = function(options){

        var $element = this;

        var slider = {};

        slider.slides = $element.find('li');

        slider.activeSlideNumber = 0;
        slider.activeSlideElement;

        slider.autoPlayTimeout;

        slider.settings = {
            //GENERAL
            firstSlide : 0,
            sliderContainerId: 'sliderContainer',



            background: {
                animation : {
                    direction : 'horizontal',
                    increment : 15 //can be any number
                }
            },

            autoPlay : {
                activated: true,
                duration : 3000
            },





            elementsToAnimate: {
                className : 'elementToAnimate',
                animations: [
                    {
                        type : 'sliding', // Can be sliding, fading,
                        startLocation : 'left', // can be left, right, top, bottom. Used only if the type is sliding
                        duration: [ 1000, 400  ], // in milliseconds. if there's more than one, we will choose randomly one duration for each element
                        easingType : 'none'
                    }
                ] //If there's more than one, we will choose randomly one animation for each element
            },
            controls : {
                show: true,
                nextElementId: 'nextSlide',
                previousElementId: 'previousSlide'
            }

        }

        /************
         *
         *
         * UTILITY FUNCTIONS
         *
         */



        /***************
         * @param from
         * @param to
         * @returns {number}
         */

        slider.getRandomNumber = function(from, to) {
            return Math.floor(Math.random()*(to-from+1)+from);
        }

        slider.getRandomAnimation = function() {
            var animations = slider.settings.elementsToAnimate.animations;


           ...