Scalable background image with jQuery

supersized_img

When a customer wants a background image for his/her website, there are always some questions to answer:

  • For which resolution will it be optimized
  • How big shall it be
  • Which background color has to be taken when the browser size is bigger than the background image
  • Does the background color fit to each background image

There is 1 answer for all these questions: Supersized.

Supersized is a fullscreen background and slideshow jQuery plugin that takes the reference image and scales it to the browser size. Supersized generates from a single image a scalable background or from multiple images a background slideshow.

Include first the stylesheet, then the javascript file. If only a scalable image is needed, then you should use the supersized core javascript file (stripped down version). When a slideshow is needed, then the normal javascript file should be included.

Example script for a single scalable image with Supersized:

jQuery(function($){
   $.supersized({
   //Background image
       slides  :  [{ image : 'example.com/image.jpg'}]            
   });
});

Example script for a multi image scalable slideshow with Supersized:

jQuery(function(){
	jQuery.fn.supersized.options = {  
		startwidth: 1920,  
		startheight: 1080,
		vertical_center: 0,
		slideshow: 1,
		navigation: 0,
		thumbnail_navigation: 0,
		transition: 1, 
		pause_hover: 0,
		slide_counter: 1,
		slide_captions: 0,
		slide_interval: 10000,
		slides : [{image : 'example.com/image1.jpg'},
{image : 'example.com/image2.jpg'},
{image : 'example.com/image3.jpg'}]
	};
	jQuery('#supersized').supersized();
});

 

Noch keine Bewertungen.
Bitte warten...

Kommentare

    Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

    (*) Pflichtfeld

    Bewirb dich bei uns!

    LimeSoda.
    Digitalagentur in Wien.

    Bewirb dich jetzt!
    Marcel

    Verpasse nicht den nächsten Blog-Post von Marcel!

    Jetzt zum LimeSoda-Newsletter anmelden