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

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Bunlar da ilgini çekebilir
Yazar AliTarih
Merhaba arkadaşlar çok uzun süredir siteye içerik eklemiyordum, eklemeye fırsat bulamıyordum desem daha doğru olur aslında. Bundan sonra mümkün olduğu kadar yeni ve güncel içerikler...
Daha Fazla
Yazar AliTarih
Websitenizin herhangi bir yerine ekleyebileceğiniz küçük bir galery örneği. Emaj tarafından Bootstrap kütüphanesi kullanılarak hazırlanmış bu minik galeri örneği o kadra küçük ki websitenizin...
Daha Fazla
Yazar AliTarih
Bilmeyenler için biraz garip bir başlık oldu sanırım. Gavurcası sticky header menu diye geçiyor ve bu tarz çalışmalar Facebook sitesinin zaman tünelinde menü olarak...
Daha Fazla
Yazar AliTarih
Google Chrome için hazırlanmış olan eklenti sayfasını bilmeyenler varmıdır bilmiyorum bilmiyorsanız buradan Chrome eklentilerine bakabilirsiniz.Eklentiler sayfasında Chrome tarayıcısına eklemek istediğiniz eklentinin resminin üstüne geldiğiniz...
Daha Fazla
Yazar AliTarih
Web sitenize üye olan kişilerin güvenli şifre belirlemeleri için kullanabileceğiniz bir tane uygulama. Çoğu kişi genelde unutmamak için aynı şifreler veya 123456 gibi basit...
Daha Fazla
Yazar AliTarih
John Polacak‘ın hazırladığı ScrollOrama web sayfasın içerisinde bulunan resim, yazı, video vs. gibi elemanlara scroll kaydırma çubuğu ile çok değişik animasyonlar sağlayan bir...
Daha Fazla
Trend Konular
Yazar AliTarih
Yeni Koronavirüs Hastalığı (COVID-19) Nedir Koronavirusler (CoV), soğuk algınlığından Orta Doğu Solunum Sendromu (MERS-CoV) ve Şiddetli Akut Solunum Sendromu...
Yazar AliTarih
Bildiğiniz gibi son zamanlarda sosyal ortamlarda popüler olmak kimileri için vazgeçilmez bir hobi olmaya başladı. Aslında Twitter ile uzaktan...
Yazar AliTarih
jQuery sitesinde slideshow örnekleri için 110 tane adet yazdığını gördüm ama işin aslı eklemeye başlayınca çoğu uygulamanın bir programdan...
Yazar AliTarih
Omegle yerine chatroulette demem gerekirdi çünkü Chatroulette sitesi omegle sitesinden daha önce piyasaya çıkmış fakat aşırı derecede pislik bir...
Yazar AliTarih
Evet arkadaşlar bugün sizlere herkesin akıllı telefonunda mutlaka gördüğü ama çoğu kişinin ne işe yaradığını bile bilmediği ve hatta...
Yazar AliTarih
Anlık binlerce kişinin girdiği websiteleri dahi bir süreliğine mola verip yeni tasarımı yada scripti faaliyete geçirmek için dinlenme ihtiyacı...
Editör Önerisi
Popüler konular
Yazar AliTarih
Yeni Koronavirüs Hastalığı (COVID-19) Nedir Koronavirusler (CoV), soğuk algınlığından Orta Doğu Solunum Sendromu (MERS-CoV) ve Şiddetli Akut Solunum Sendromu (SARS-CoV) gibi daha ciddi hastalıklara...
Daha Fazla
Yazar AliTarih
Yazar AliTarih