MaxImage - Full screen bakcground

• Head  etiketleri arasına eklemeniz  gereken bölümler.

<link rel="stylesheet" href="lib/css/jquery.maximage.min.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="lib/css/screen.css" type="text/css" media="screen" charset="utf-8" />

<style type="text/css" media="screen">
#cycle-loader {
 height:32px;
 left:50%;
 margin:-8px 0 0 -8px;
 position:absolute;
 top:50%;
 width:32px;
 z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
 #maximage {
 display:none;
 position:fixed !important;
}
/*I want to style my pager*/
 #cycle-nav {
 position:absolute;
 right:10px;
 top:10px;
}
#cycle-nav ul {
 list-style-type:none;
}
#cycle-nav ul li {
 border:1px solid #ffffcc;
 float:left;
 margin:4px;
}
#cycle-nav ul li a {
 background:#ffffcc;
 float:left;
 height:10px;
 margin:2px;
 width:10px;
}
#cycle-nav ul li.activeSlide {
 border:1px solid #ff6600;
}
/*Set my gradient above all images*/
 #gradient {
 left:0;
 height:100%;
 position:absolute;
 top:0;
 width:100%;
 z-index:999;
}
/*Set my logo in bottom left*/
 #logo {
 bottom:30px;
 height:auto;
 left:30px;
 position:absolute;
 width:34%;
 z-index:1000;
}
#logo img {
 width:100%;
}
#arrow_left, #arrow_right {
 bottom:30px;
 height:67px;
 position:absolute;
 right:30px;
 width:36px;
 z-index:1000;
}
#arrow_left {
 right:86px;
}
#arrow_left:hover, #arrow_right:hover {
 bottom:29px;
}
#arrow_left:active, #arrow_right:active {
 bottom:28px;
}
a {
 color:#666;
 text-decoration:none;
}
a:hover {
 text-decoration:underline;
}
.in-slide-content {
 color:#333;
 float:right;
 font-family:'Helvetica Neue', helvetica;
 font-size:60px;
 font-weight:bold;
 right:0;
 margin:40px;
 padding:20px;
 position:absolute;
 top:0;
 width:700px;
 z-index:9999;
 /* Show above .gradient */
 text-shadow: 0 1px 0 #fff;
}
.youtube-video {
 left:0;
 position:absolute;
 top:0;
}
</style>

•  Body etiketleri arasına eklemeniz gereken bölümler.

<a id="logo"><img src="lib/images/demo/logo.png" alt="MaxImage: Uses jQuery Cycle Plugin to create background slideshows" /></a>
	<a href="" id="arrow_left"><img src="lib/images/demo/arrow_left.png" alt="Slide Left" /></a>
	<a href="" id="arrow_right"><img src="lib/images/demo/arrow_right.png" alt="Slide Right" /></a>

<img id="cycle-loader" src="lib/images/ajax-loader.gif" />
<div id="maximage">
 <div class="first-item">
  <img src="lib/images/demo/wall_portrait.jpg" alt="" />
  <img id="gradient" src="lib/images/demo/gradient.png" alt="" />
  <div class="in-slide-content" style="display:none;">
  <p>Remember, you are not limited to image elements. You can display other HTML too.</p>
  <p><a target="_blank" style="font-weight:bold">More info >></a>
  </p>
  </div>
 </div>
 <img src="lib/images/demo/coalesse.jpg" alt="Coalesse" data-href="https://www.google.com/" />
 <div class="video">
  <img src="lib/images/demo/pattern.jpg" alt="" />
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/KVwSP51KVO8?wmode=opaque" frameborder="0" class="youtube-video" allowfullscreen></iframe>
 </div>
 <img src="lib/images/demo/laughing.jpg" alt="" />
 <img src="lib/images/demo/roof_shooting.jpg" alt="" />
 <img src="lib/images/demo/man.jpg" alt="" />
 <img src="lib/images/demo/coffee_shop.jpg" alt="" />
 <img src="lib/images/demo/gas_station.jpg" alt="" />
</div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
<script type="text/javascript" src="lib/js/jquery.cycle.all.min.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/js/jquery.maximage.min.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(function () {
 $('#maximage').maximage({
  cycleOptions: {
  fx: 'fade',
  speed: 1000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
  timeout: 0,
  prev: '#arrow_left',
  next: '#arrow_right',
  pause: 1,
  before: function (last, current) {
   if (!$.browser.msie) {
    // Start HTML5 video when you arrive
    if ($(current).find('video').length > 0) $(current).find('video')[0].play();
   }
  },
  after: function (last, current) {
   if (!$.browser.msie) {
    // Pauses HTML5 video when you leave it
    if ($(last).find('video').length > 0) $(last).find('video')[0].pause();
   }
  }
  },
  onFirstImageLoaded: function () {
  jQuery('#cycle-loader').hide();
  jQuery('#maximage').fadeIn('fast');
  }
 });

 // Helper function to Fill and Center the HTML5 Video
 jQuery('video,object').maximage('maxcover');

 // To show it is dynamic html text
 jQuery('.in-slide-content').delay(1200).fadeIn();
});
</script>