Anasayfa » Ajax - Jquery » jquery featured content slider

jquery featured content slider

jquery featured content slider Google Buzz Ekle

Jquery featured content slider mnanşet yada önemli haberlerin,yazıların yada içerikerlin gösterilmesinde kullanılabilecek güzel uygulamalardan birisidir.

contentslider jquery featured content slider

sayfanızın head ve /head tagları arasına aşağıdaki kodu ekleyin

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<script type="text/javascript">
	$(function(){
		$("#main-photo-slider").codaSlider();
	});
</script>

Sitenizin Css dosyasına aşağıdakileri ekleyin;

/*
	Featured Content Slider
	by: Chris Coyier
*/
*											{ margin: 0; padding: 0; }
body 										{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
/*
	UTILITY STYLES
*/				  				  
.floatLeft 									{ float: left; margin-right: 10px;}
.floatRight									{ float: right; }
.clear 										{ clear: both; }
a											{ outline: none; }
/*
	PAGE STRUCTURE
*/
#page-wrap 									{ width: 500px; margin: 25px auto; position: relative; min-height: 500px;
											  background: url(images/bg.png) top center; }
/*
	TYPOGRAPHY
*/
ul											{ list-style: square inside; }
a, a:visited								{ color: #729dff; text-decoration: none; }
a:hover, a:active							{ color: white; }
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px;
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
/*
	SLIDER
*/
.slider-wrap								{ width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{ margin: -43px 0 0 62px; }
#movers-row div								{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{ background: url(images/transpBlack.png); padding: 10px; height: 30px;
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; width: 62px; margin-top: -14px;
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 								{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

eklentiyi kullanmak istediğiniz kısmada aşağıdaki html kod bloğunu ekleyin;

<div class="slider-wrap">
	<div id="main-photo-slider" class="csw">
		<div class="panelContainer">
			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<!-- REGULAR IMAGE PANEL -->
					<img src="images/tempphoto-1.jpg" alt="temp" />
					<div class="photo-meta-data">
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
					</div>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
download
demo

Makale için yapılan aramalar

  • html Featured Content Glider
  • jquery featured content slider
  • jquery javascript haber slider
Tarih : 23 December 2009
Kategori : Ajax - Jquery
Etiketler : , ,
rss aboneliği

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Yorum yapın

Copyright Wordpress | jquery | internet | css | photoshop | seo makaleleri | Powered By WordPress | Yazılar (RSS) | Yorumlar (RSS) Design By Htworks | İletişim / Contact