MaxImage – Full screen bakcground

Kişisel web siteleri için oldukça kullanışlı ve tek başına site olabilecek nitelikte bir uygulama. Normal web sitelerinin arka plana değişen fotoğraflar eklemesi bence o kadar mantıklı bir durum değildir. MaxImage uygulaması ile arkaplana eklediğiniz resimler esnek olur ve tarayıcı küçüldüğünde resimler de otomatik olarak küçülürler.

Kullanım

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

Css dosya adresleri :

<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" />

Stil kodları :

<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="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>

Js dosya adresleri :

<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>

JavaScript :

<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>

Download

Demo