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.

Html : 

<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="http://www.google.com/" />
    <div class="video">
        <img src="lib/images/demo/pattern.jpg" alt="" />
        <iframe width="100%" height="100%" src="http://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='http://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>