Google maps coördinaten ophalen met klik op een kaart

Het gebruiken van een Google maps (of iedere andere kaartleverancier) voor het tonen van winkels, gebouwen, locaties enzovoorts is steeds gebruikelijker. Normaliter kun je op basis van een adres of postcode prima bepalen waar iets gelegen is. Heel soms willen mensen echter iets meer precisie hierin. Bijvoorbeeld omdat het formele adres anders is dan wat voor bezoekers logisch is of omdat het een groot pand betreft waarbij de exacte locatie niet altijd de meest gewenste is.

Met het volgende simpele stukje code kun je een Google maps kaart renderen die, als men erop klikt, de latitude en longitude beschikbaar stelt om bijvoorbeeld op te slaan of in een veld van een formulier te wijzigen.

De HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript" src="/javascript_code_zoals_hieronder_getoond.js"></script>
  </head>
  <body>
    <div id="maps" style="width: 400px; height: 400px; border: 1px solid grey"></div>
  </body>
</html>

JavaScript code

<script>
    function initialize() {
        var mapOptions = {
            zoom: 7,
            center: new google.maps.LatLng(51.9568120077237, 4.570355415344238)
        };

        var map = new google.maps.Map(document.getElementById('maps'), mapOptions);

        google.maps.event.addListener(map, 'click', function(e) {
            if (confirm("GEO-locatie (opnieuw) vaststellen?") == true) {
                if(!marker) {
                    var marker = new google.maps.Marker({
                        position: map.getCenter(),
                        map: map
                    });
                }
                map.setCenter(e.latLng);
                marker.setPosition(e.latLng);

                console.log(e.latLng.lat());
                console.log(e.latLng.lng());
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Jquery fadeIn loop (supersimpel)

Wilde net even twee blokken met tekst in elkaar laten overlopen. Leek me overkill hiervoor een cycle plugin te gebruiken dus ging even kijken wat voor leuks ik nog niet had toegepast/ontdekt in Jquery. Nu blijkt dat je met delay() functie in combi met fadeIn/out erg leuke dingen kunt doen.

HTML:


<div id="blockHolder">
    <div id="block1">Tekst 1</div>
    <div id="block2">Tekst 2</div>
</div>

CSS:


#blockHolder {
    width: 100px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}

#block1,
#block2 {
    background-color: white;
    position: absolute;
    left: 0;
    top: 0;
}

Jquery code:


function fadeLoop(){
    $('#block1').fadeIn().delay(3000).fadeOut('slow', fadeLoop).delay(3000);
}

$(document).ready(function() {
    fadeLoop();
});

Op zich redelijk basic maar werkt wel leuk zo. Wat de fadeLoop() nu doet is eigenlijk #block1 transparant maken, 3 seconde wachten, weer zichtbaar maken, 3 seconde wachten en weer zichzelf aanroepen voor een herhaling. Dit werkt prima met blokken die over elkaar gepositioneerd staan via CSS en waarbij de voorste transparant/niet-transparant wordt waardoor de achterste zichtbaar wordt.

BMI calculator met Jquery

Voor een project wat nog in ontwikkeling is moest ik een BMI calculator maken. Ik had er ooit wel eens één gemaakt maar die werkte via een POST en ‘berekende’ alles met PHP. Het leek me leuk dit keer Jquery te gebruiken.

De oude BMI calculator

Zoals je ziet op zich prima maar een beetje statisch. Tevens niet echt superduidelijk. Er zit een 1 px wit lijntje wat je huidige BMI aanduidt maar je moet wel goed opletten om die te zien.

De nieuwe BMI calculator

Zoals je ziet wel wat overeenkomsten (zelfde opdrachtgever dus moest zelfs alles een beetje gelijk houden) maar toch net even wat frisser. Een duidelijkere pointer voor je BMI en in plaats van invulvelden en een submitbutton gewoon twee Jquery UI sliders.

De code

Wat heb je in iedere geval nodig?

  1. Jquery
  2. Jquery UI
  3. Een BMI afbeelding voor de achtergrond
  4. Eventueel een leuke afbeelding voor de pointer

Voor het gemak kun je het hele gebruikte pakketje voor deze implementatie hier downloaden.

De te includen bestanden in de header

  1. reset.css
  2. screen.css
  3. jquery-ui-1.8.16.custom.css
  4. jquery.1.6.1.min.js
  5. jquery-ui-1.8.16.custom.min.js
  6. bmi.js

De HTML

Dit is de kale HTML voor de slider met tabel etc.


<div id="lengthSlider"></div>
<label for="length">Uw lengte is <input type="text" id="length" /> centimeter</label>

<div id="weightSlider"></div>
<label for="weight">Uw gewicht is <input type="text" id="weight" /> kilogram</label>

<div id="bmiScale">
    Uw Body Mass Index is
    <div id="bmiScalePointer"></div>
</div>

<div id="bmiInformation">
  <h4>Wat is een gezonde BMI?</h4>
  <table border="0" cellpadding="0" cellspacing="0" width="500">
    <tbody>
      <tr>
        <td width="10"><img src="</assets/images/bmi-yellow.gif" alt="ondergewicht" height="10" width="10"></td>
        <td width="130">Tussen 16 - 20</td>
        <td width="240">Uw BMI is iets te laag</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-green.gif" alt="gezond gewicht" height="10" width="10"></td>
        <td>Tussen 20 - 25</td>
        <td>gezond gewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-yellow.gif'" alt="normaal - licht overgewicht" height="10" width="10"></td>
        <td>Tussen 25 – 27</td>
        <td>normaal - licht overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-orange.gif" alt="normaal - overgewicht" height="10" width="10"></td>
        <td>Tussen 27 -29</td>
        <td>normaal - overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-red-orange.gif'" alt="overgewicht" height="10" width="10"></td>
        <td>Boven de 30</td>
        <td>overgewicht</td>
      </tr>
      <tr>
        <td><img src="/assets/images/bmi-red.gif" alt="ernstig overgewicht" height="10" width="10"></td>
        <td>Boven de 40</td>
        <td>ernstig overgewicht</td>
      </tr>
    </tbody>
</table>
</div>

De Jquery code

De volgende code berekend de BMI, verplaatst de pointer etc.
Zie ook de opmerkingen ertussen.

// Function to calculate the BMI using lenght in centimeters and weight in kilograms
function calculateBMI(lenght, weight)
{
  // Calculate the BMI and round at 1 decimal
  var result = Math.round(weight / (lenght/100 * lenght/100)*10)/10;

  // Determine the left position of the bmiScalePointer (and subtract 50% of it's width)
  var leftPos = (result*10)-22;

  // If the leftpos is > 450 it would run out of the scale so stop it here
  if(leftPos > 450) {
  leftPos = 450;
  result = Math.round(result);
}

// Update the bmiScalePointer value
$('#bmiScalePointer').html("BMI<br/><br/>" + result);

// Move the bmiScalePointer to it's new position
$('#bmiScalePointer').css('left', leftPos);
}

$(document).ready(function() {
  // Just plain Jquery UI slider functionalitiy
  $("#lengthSlider").slider({
    value: 175,
    min: 130,
    max: 220,
    step: 1,
    slide: function( event, ui ) {
      // Initiate the calculation function on sliding
      calculateBMI(ui.value, $('#weight').val());
      $("#length").val(ui.value);
    }
  });

  $("#length").val($("#lengthSlider").slider("value"));

  $("#weightSlider").slider({
    value: 75,
    min: 24,
    max: 250,
    step: 1,
    slide: function( event, ui ) {
      // Initiate the calculation function on sliding
      calculateBMI($('#length').val(), ui.value);
      $("#weight").val(ui.value);
    }
  });
  $("#weight").val($("#weightSlider").slider("value"));

  // Do a initial calculation
  calculateBMI($('#length').val(), $('#weight').val());
});

Nogmaals voor het gemakt: Het hele gebruikte pakketje voor deze implementatie kun je hier downloaden.

Jquery alle hyperlinks naar afbeeldingen koppelen aan Fancybox

Een tijdje terug heb ik voor een klant als service een microstukje javascript gemaakt met Jquery om alle hyperlinks in de content te hooken aan Fancybox (of welk ander script dan ook voor de weergave van foto’s). Wat hij doet is alle a elementen in de dom (of een selectie daarvan) opzoeken, kijken of ze een href hebben en of die linkt naar een afbeelding en zo ja, Fancybox eraan hangen. Normaal doe je dit gewoon door een class of iets aan de afbeelding te hangen die je gebruikt als selector maar ik wilde dat alle via het CMS ingevoerde links naar afbeeldingen ook meegepakt werden. Om de klant niet te hoeven uitleggen wat hij moest doen om afbeeldingen te linken kwam ik hierop uit.


$(document).ready(function() {
    $("a").filter(function(){
        if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
            $(this).fancybox();
        }
    });
});

ps. Als je sommige afbeeldingen eruit wilt houden kun je altijd nog iets toevoegen als een not()conditie (waarbij je in dit geval dus aan de hyperlink de class .noFancy meegeeft:

$(document).ready(function() {
    $("a:not(.noFancy)").filter(function(){
        if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
            $(this).fancybox();
        }
    });
});

PHP & AJAX met Jquery tutorial

Recent hadden voor een project een creatieve oplossing gemaakt om bepaalde velden in het CMS standaard te “locken” en alleen mensen met een bepaalde user-role mochten de velden unlocken en bewerken. Denk hierbij aan velden als permanames. Omdat dit meer een stukje bescherming van gebruikers dan een echte security kwestie was (in dit geval) leek het ons wel leuk dit met een eenvoudige AJAX call te doen. Met Jquery zijn dit soort opties binnen het handbereik van iedere developer gekomen.

Erover nadenkend hoe lastig dit vroeger was en hoe leuk het nu was realiseerde ik me dat het misschien voor sommige mensen nog niet zo voor de hand liggend was. Daarom deze “super recht toe recht aan” tutorial / voorbeeldcode hoe je een simpele AJAX call naar een PHP script doet vanuit je HTML en het resultaat teruggooit naar de HTML.

De HTML code












Jquery AJAX call example

Klik op een woord hieronder om het resultaat van dat woord op te halen via AJAX en terug te geven als result.

  • Appels
  • Peren
  • Bananen
  • Kersen
  • Pinguins
<< empty >>

De PHP code

$fruits = array('Appels', 'Peren', 'Bananen', 'Kersen');

if(in_array($_POST['ajaxableVar'], $fruits)){
	echo 'Eet veel ' . $_POST['ajaxableVar'] . ' dat is gezond!';
	return;
}

echo $_POST['ajaxableVar'] . ' kun je niet eten!';
return;

Ditzelfde principe kun je ook neerzetten met JSON zodat je bijvoorbeeld een boolean terug kunt geven aan je Jquery code om bepaalde acties wel / niet uit te voeren. Eigenlijk zijn de mogelijkheden redelijk ruim.

* Let op! Het voorbeeld is ZEER basic en vereist wel enige configuratie en mutaties om hem veilig te maken voor je website maar als voorbeeld van het principe dekt het de lading prima.

Download hier de bestanden als .rar

Jquery Nivo Slider

In een recent project heb ik gebruik gemaakt van de Nivo Slider. Een prettige slider die redelijk snel implementeert en vanuit de basis over een goede set functies beschikt.

Nu wilde onze opdrachtgever dat de slideshow alleen één afbeelding naar voren ging als je met je muis over de slideshow ging wat anders was dan we vooraf dachten (anders was de Nivo Slider er waarschijnlijk niet in gekomen). Al snel concludeerde ik dat de Nivo Slider dit niet ondersteunde. Ik heb toen de code iets aangepast. Je kunt nu een extra parameter meegeven aan de Nivo Slider settings;

nextOnHover: true

De volledige implementatie ziet er dan als volgt uit;

public.js

$('#topping_slider').nivoSlider({
	effect:'fade',
	animSpeed:200,
	directionNav:false,
	controlNav:false,
	keyboardNav:false,
	pauseOnHover:false,
	manualAdvance:true,
	captionOpacity:0.8,
	nextOnHover:true
});

jquery.nivo.slider.js

/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * May 2010 - Pick random effect from specified set of effects by toronegro
 * May 2010 - controlNavThumbsFromRel option added by nerd-sh
 * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
 * April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
 * March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
 */

(function($) {

	$.fn.nivoSlider = function(options) {

		//Defaults are below
		var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

		return this.each(function() {
			//Useful variables. Play carefully.
			var vars = {
				currentSlide: 0,
				currentImage: '',
				totalSlides: 0,
				randAnim: '',
				running: false,
				paused: false,
				stop:false
			};

			//Get this slider
			var slider = $(this);
			slider.data('nivo:vars', vars);
			slider.css('position','relative');
			slider.addClass('nivoSlider');

			//Find our slider children
			var kids = slider.children();
			kids.each(function() {
				var child = $(this);
				var link = '';
				if(!child.is('img')){
					if(child.is('a')){
						child.addClass('nivo-imageLink');
						link = child;
					}
					child = child.find('img:first');
				}
				//Get img width & height
                var childWidth = child.width();
                if(childWidth == 0) childWidth = child.attr('width');
                var childHeight = child.height();
                if(childHeight == 0) childHeight = child.attr('height');
                //Resize the slider
                if(childWidth > slider.width()){
                    slider.width(childWidth);
                }
                if(childHeight > slider.height()){
                    slider.height(childHeight);
                }
                if(link != ''){
                    link.css('display','none');
                }
                child.css('display','none');
                vars.totalSlides++;
			});

			//Set startSlide
			if(settings.startSlide > 0){
				if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
				vars.currentSlide = settings.startSlide;
			}

			//Get initial image
			if($(kids[vars.currentSlide]).is('img')){
				vars.currentImage = $(kids[vars.currentSlide]);
			} else {
				vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
			}

			//Show initial link
			if($(kids[vars.currentSlide]).is('a')){
				$(kids[vars.currentSlide]).css('display','block');
			}

			//Set first background
			slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');

			//Add initial slices
			for(var i = 0; i < settings.slices; i++){
				var sliceWidth = Math.round(slider.width()/settings.slices);
				if(i == settings.slices-1){
					slider.append(
						$('
').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px' }) ); } else { slider.append( $('
').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' }) ); } } //Create caption slider.append( $('

').css({ display:'none', opacity:settings.captionOpacity }) ); //Process initial caption if(vars.currentImage.attr('title') != ''){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html(); $('.nivo-caption p', slider).html(title); $('.nivo-caption', slider).fadeIn(settings.animSpeed); } //In the words of Super Mario "let's a go!" var timer = 0; if(!settings.manualAdvance && kids.length > 1){ timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); } //Add Direction nav if(settings.directionNav){ slider.append(''); //Hide Direction nav if(settings.directionNavHide){ $('.nivo-directionNav', slider).hide(); slider.hover(function(){ $('.nivo-directionNav', slider).show(); }, function(){ $('.nivo-directionNav', slider).hide(); }); } $('a.nivo-prevNav', slider).live('click', function(){ if(vars.running) return false; clearInterval(timer); timer = ''; vars.currentSlide-=2; nivoRun(slider, kids, settings, 'prev'); }); $('a.nivo-nextNav', slider).live('click', function(){ if(vars.running) return false; clearInterval(timer); timer = ''; nivoRun(slider, kids, settings, 'next'); }); } if(settings.nextOnHover){ $('#'+slider.attr('id')).live("mouseenter", function() { if(vars.running) return false; clearInterval(timer); timer = ''; nivoRun(slider, kids, settings, 'next'); }); } //Add Control nav if(settings.controlNav){ var nivoControl = $('
'); slider.append(nivoControl); for(var i = 0; i < kids.length; i++){ if(settings.controlNavThumbs){ var child = kids.eq(i); if(!child.is('img')){ child = child.find('img:first'); } if (settings.controlNavThumbsFromRel) { nivoControl.append(''); } else { nivoControl.append(''); } } else { nivoControl.append(''+ (i + 1) +''); } } //Set initial active link $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active'); $('.nivo-controlNav a', slider).live('click', function(){ if(vars.running) return false; if($(this).hasClass('active')) return false; clearInterval(timer); timer = ''; slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat'); vars.currentSlide = $(this).attr('rel') - 1; nivoRun(slider, kids, settings, 'control'); }); } //Keyboard Navigation if(settings.keyboardNav){ $(window).keypress(function(event){ //Left if(event.keyCode == '37'){ if(vars.running) return false; clearInterval(timer); timer = ''; vars.currentSlide-=2; nivoRun(slider, kids, settings, 'prev'); } //Right if(event.keyCode == '39'){ if(vars.running) return false; clearInterval(timer); timer = ''; nivoRun(slider, kids, settings, 'next'); } }); } //For pauseOnHover setting if(settings.pauseOnHover){ slider.hover(function(){ vars.paused = true; clearInterval(timer); timer = ''; }, function(){ vars.paused = false; //Restart the timer if(timer == '' && !settings.manualAdvance){ timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); } }); } //Event when Animation finishes slider.bind('nivo:animFinished', function(){ vars.running = false; //Hide child links $(kids).each(function(){ if($(this).is('a')){ $(this).css('display','none'); } }); //Show current link if($(kids[vars.currentSlide]).is('a')){ $(kids[vars.currentSlide]).css('display','block'); } //Restart the timer if(timer == '' && !vars.paused && !settings.manualAdvance){ timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); } //Trigger the afterChange callback settings.afterChange.call(this); }); }); function nivoRun(slider, kids, settings, nudge){ //Get our vars var vars = slider.data('nivo:vars'); if((!vars || vars.stop) && !nudge) return false; //Trigger the beforeChange callback settings.beforeChange.call(this); //Set current background before change if(!nudge){ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat'); } else { if(nudge == 'prev'){ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat'); } if(nudge == 'next'){ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat'); } } vars.currentSlide++; if(vars.currentSlide == vars.totalSlides){ vars.currentSlide = 0; //Trigger the slideshowEnd callback settings.slideshowEnd.call(this); } if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1); //Set vars.currentImage if($(kids[vars.currentSlide]).is('img')){ vars.currentImage = $(kids[vars.currentSlide]); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); } //Set acitve links if(settings.controlNav){ $('.nivo-controlNav a', slider).removeClass('active'); $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active'); } //Process caption if(vars.currentImage.attr('title') != ''){ var title = vars.currentImage.attr('title'); if(title.substr(0,1) == '#') title = $(title).html(); if($('.nivo-caption', slider).css('display') == 'block'){ $('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){ $(this).html(title); $(this).fadeIn(settings.animSpeed); }); } else { $('.nivo-caption p', slider).html(title); } $('.nivo-caption', slider).fadeIn(settings.animSpeed); } else { $('.nivo-caption', slider).fadeOut(settings.animSpeed); } //Set new slice backgrounds var i = 0; $('.nivo-slice', slider).each(function(){ var sliceWidth = Math.round(slider.width()/settings.slices); $(this).css({ height:'0px', opacity:'0', background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' }); i++; }); if(settings.effect == 'random'){ var anims = new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade"); vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))]; if(vars.randAnim == undefined) vars.randAnim = 'fade'; } //Run random effect from specified set (eg: effect:'fold,fade') if(settings.effect.indexOf(',') != -1){ var anims = settings.effect.split(','); vars.randAnim = $.trim(anims[Math.floor(Math.random()*anims.length)]); } //Run effects vars.running = true; if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){ var timeBuff = 0; var i = 0; var slices = $('.nivo-slice', slider); if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider)._reverse(); slices.each(function(){ var slice = $(this); slice.css('top','0px'); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' || settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){ var timeBuff = 0; var i = 0; var slices = $('.nivo-slice', slider); if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider)._reverse(); slices.each(function(){ var slice = $(this); slice.css('bottom','0px'); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){ var timeBuff = 0; var i = 0; var v = 0; var slices = $('.nivo-slice', slider); if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider)._reverse(); slices.each(function(){ var slice = $(this); if(i == 0){ slice.css('top','0px'); i++; } else { slice.css('bottom','0px'); i = 0; } if(v == settings.slices-1){ setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; v++; }); } else if(settings.effect == 'fold' || vars.randAnim == 'fold'){ var timeBuff = 0; var i = 0; $('.nivo-slice', slider).each(function(){ var slice = $(this); var origWidth = slice.width(); slice.css({ top:'0px', height:'100%', width:'0px' }); if(i == settings.slices-1){ setTimeout(function(){ slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function(){ slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if(settings.effect == 'fade' || vars.randAnim == 'fade'){ var i = 0; $('.nivo-slice', slider).each(function(){ $(this).css('height','100%'); if(i == settings.slices-1){ $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); } else { $(this).animate({ opacity:'1.0' }, (settings.animSpeed*2)); } i++; }); } } }; //Default settings $.fn.nivoSlider.defaults = { effect:'random', slices:15, animSpeed:500, pauseTime:3000, startSlide:0, directionNav:true, directionNavHide:true, controlNav:true, controlNavThumbs:false, controlNavThumbsFromRel:false, controlNavThumbsSearch:'.jpg', controlNavThumbsReplace:'_thumb.jpg', keyboardNav:true, pauseOnHover:true, manualAdvance:false, captionOpacity:0.8, beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, nextOnHover: false }; $.fn._reverse = [].reverse; })(jQuery);

Regel 68 tot 75 zijn toegevoegd

Ga naar de website van de originele Nivo Slider

Orbit Jquery image slide

Image sliders maken websites vaak nog leuker door een stukje interactie. Daarnaast biedt het mogelijkheden om meer beeldmateriaal met een beperkte hoeveelheid ruimte te tonen. Het nadeel is echter dat veel image sliders te groot zijn. Nou ja, te groot niet maar groter dan gewenst. Soms is er wel een stripped-down versie met weinig gewicht maar zeker als je wat leuke effecten erin wilt worden ze snel groter.

Orbit – Jquery image slider plugin
Met een gewicht van 3.2 KB een lekker compact geval. De look en feel zijn echter fantastisch.

Enkele functionaliteiten

  • Automatische slideshow pauzeren en weer activeren (rechtsboven)
  • Naar andere afbeelding gaan dmv. de ronde icoontjes linksboven
  • Weergave hoe lang het nog duurt voor de volgende afbeelding komt (rechtsboven)
  • Ondertitels mogelijk
  • Prima werkend in Chrome, Safari en Firefox 3.5+ (getest in IE7+)

Bezoek de site en bekijk de demo