Full size background image/slider to website flexible using Supersized.js


We can add full size image/slide show of image using supersized.js. For implement we have to follow following steps:

1 . include jquery and supersized js files

<script type=”text/javascript” src=”jquery.js”></script
<script type=”text/javascript” src=”supersized.js”></script>

2. Now add supersized script

<script type=”text/javascript”>


jQuery(function($){
$.supersized({


//Functionality
slideshow               :   1,        //Slideshow on/off
autoplay                :    1,        //Slideshow starts playing automatically
start_slide             :   1,        //Start slide (0 is random)
random                    :     0,        //Randomize slide order (Ignores start slide)
slide_interval          :   3000,    //Length between transitions
transition              :   1,         //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed        :    500,    //Speed of transition
new_window                :    1,        //Image links open in new window/tab
pause_hover             :   0,        //Pause slideshow on hover
keyboard_nav            :   1,        //Keyboard navigation on/off
performance                :    1,        //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect            :    1,        //Disables image dragging and right click with Javascript
image_path                :    ‘img/’, //Default image path


//Size & Position
min_width                :   0,        //Min width allowed (in pixels)
min_height                :   0,        //Min height allowed (in pixels)
vertical_center         :   1,        //Vertically center background
horizontal_center       :   1,        //Horizontally center background
fit_portrait             :   1,        //Portrait img will not exceed browser height
fit_landscape            :   0,        //Landscape img will not exceed browser width

//Components
navigation              :   1,        //Slideshow controls on/off
thumbnail_navigation    :   1,        //Thumbnail navigation
slide_counter           :   1,        //Display slide numbers
slide_captions          :   1,        //Slide caption (Pull from “title” in slides array)
slides                     :      [        //Slideshow img
{image : ‘/static/css/i/bg1.jpg’, title : ‘img’, url : ‘http://www.myviewtours.wiltit.com/&#8217;},

]


});
});

</script>

3. Add supersized css now

<link rel=”stylesheet” href=”/css/supersized.css” type=”text/css” media=”screen”>

All above code must be comes within head tags.

Advertisements

2 responses to “Full size background image/slider to website flexible using Supersized.js

  1. Fantastic publish, very informative. I wonder why the opposite specialists of this sector don’t understand this. You should continue your writing. I am sure, you’ve a great readers’ base already!|What’s Taking place i’m new to this, I stumbled upon this I’ve discovered It absolutely useful and it has helped me out loads. I hope to contribute & help other customers like its aided me. Great job.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s