find-templates

content slider

zurück zur Übersicht

Content Slider jQuery



• für Bilder in der Größe 400 x 250 Pixel
• der Seiteninhalt muss mindestens 650 Pixel breit sein



Schritt 1: Der CSS Code
- Design CSS ? Einfügen Feld "css ohne style tags"
- anderes Design ? Einfügen "Feld Text über Design" (vor dem --></style>) 


/* Sliderbox */
#featured { 
	width: 397px; 
	padding-right: 250px; 
	position: relative; 
	border: 5px solid #ccc; 
	height: 250px; 
        overflow:hidden; }

/* Feld der Navi rechts */
ul.ui-tabs-nav { 
	position: absolute; 
	top: 0; left: 400px; 
	list-style: none; 
	padding: 0; margin: 0; 
	width: 250px; height: 250px;
	overflow: hidden;}

/* Überschriften im Menu rechts */
li.ui-tabs-nav-item h3 {
        font-size: 14px;
        margin: 3px 0px 3px 0px; }


/* verlinkter Text im Menu rechts */
li.ui-tabs-nav-item a { 
        padding: 3px 5px 3px 10px;
        display: block;
	height: 56px; 
        text-decoration: none;
	color: #333;  
        font-size: 11px;
        outline: none;
        border-bottom: 1px solid #c9c9c9; }

/* Hover Menu rechts */
li.ui-tabs-nav-item a:hover { 
        display: block;
	background: #202020;
        color: #FFFFFF; }

/* Auto-Hover rechts */
li.ui-tabs-selected a { 
	background: #202020; 
        color: #FFFFFF; }


/* Feld für Bilder */
.ui-tabs-panel { 
	width: 400px; 
        height: 250px; 
        border-right: 1px solid #FFFFFF;
	background: #999; 
        position: relative; }

/* das Feld für Text auf Bild */
.ui-tabs-panel .text { 
	position: absolute; 
	bottom:0; left:0; 
	height: 70px; 
	background-color: #202020;
        opacity: 0.7;  }

/* Ueberschrift auf Bild */
.text h2 { 
	font-size: 15px;
        font-family: Georgia, serif; 
	color: #FFFFFF; 
        padding: 5px; 
        margin: 0px; 
        font-weight: normal;
	overflow: hidden; }


/* Text im Bild */
.text p { 
	margin:0 5px; 
	font-size: 11px; 
	line-height: 14px; 
        color: #f0f0f0; }

/* Link im Bild */
.text a { 
	text-decoration: none; 
	color: orange;
        font-size: 12px; }

/* Hoverlink im Bild */
.text a:hover {
        color: blue;
        text-decoration: underline; }

.ui-tabs-hide{display:none; }



Schritt 2 : Javascript jQuery

- auf "Eigene Seiten editieren"
- Seite auswählen, wo der Content-Slider hinein soll
- Seite ist nun zum Bearbeiten offen
- im Editor oben links auf "Quellcode" klicken
- zu Beginn nun diesen Code einfügen : 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

5000 = Zeit (5 Sekunden), kann geändert werden.


Schritt 3: Der HTML-Code für den Seiteninhalt
Diesen Code könnt ihr gleich unter den zweiten platzieren: 

<div id="featured">

<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1"><h3>Thema 1</h3>hier Infotext Menü rechts 1</a></li>
	        
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><h3>Thema 2</h3>hier Infotext Menü rechts 2</a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><h3>Thema 3</h3>hier Infotext Menü rechts 3</a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><h3>Thema 4</h3>hier Infotext Menü rechts 4</a></li>

</ul>

<!-- Grafik 1 -->
<div id="fragment-1" class="ui-tabs-panel">
<img src="Grafikadresse 1" alt="" />
<div class="text">
<h2>Titel 1</h2>
<p>Hier Infotext 1 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 2 -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 2" alt="" />
<div class="text">
<h2>Titel 2</h2>
<p>Hier Infotext 2 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 3 -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 3" alt="" />
<div class="text">
<h2>Titel 3</h2>
<p>Hier Infotext 3 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>

<!-- Grafik 4 -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
<img src="Grafikadresse 4" alt="" />
<div class="text">
<h2>Titel 4</h2>
<p>Hier Infotext 3 im Bild <a href="/Seite.htm">weiter lesen</a></p>
</div>
</div>
	
</div>



Heute: 15 Besucher