Q:

How to customize a full screen background image slideshow with Vegas jquery plugin

I need help to customize a jQuery plugin. I don't have much experience with either javascript or jQuery. I'm very much a newbie. 
I downloaded the Vegas 1.3.4 plugin from http://vegas.jaysalvat.com/ because I would like to have a full screen background slideshow on a school project I'm working on. But I don't know how to customize this plugin. 
I guess that the 'jquery.vegas.js' is where all the magic happens. 
I read through the Documentation for the slideshow here: http://vegas.jaysalvat.com/documentation/slideshow/ and found this piece of code:
$.vegas('slideshow', {
backgrounds:[
{ src:'/img/background1.jpg' },
{ src:'/img/background2.jpg' },
{ src:'/img/background3.jpg' }
]
})('overlay');

Where am I to place this piece of code? Is it suppose to go in <head>here?</head> or is it then 'jquery.vegas.js' that I will specify my background images?
It would be of great help if anyone could help me to solve this little puzzle :)  

A:

From looking at the source of the link you provided, the code should go in the <head><!--here--></head> after importing the jquery.vegas.js script. This is W3C compliant.
But for performance, it is recommended to add scripts at the bottom of the page, just before the closing </body> tag. Thus, you code should look something like this:
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="jquery.vegas.js"></script>
  <script>
  $.vegas('slideshow', {
    backgrounds:[
      { src:'/img/bg1.jpg', fade:1000 },
      { src:'/img/bg2.jpg', fade:1000 },
      { src:'/img/bg3.jpg', fade:1000 }
    ]
  })('overlay', {
    src:'/vegas/overlays/11.png'
  });
  </script>
</body>

