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="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>
Js dosya adresleri :
<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>
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>