[GastForen Archiv Adobe GoLive ContentSlider - Quellcode

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

ContentSlider - Quellcode

Feuerländer
Beiträge gesamt: 79

14. Mär 2011, 17:39
Beitrag # 1 von 5
Bewertung:
(3682 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi,
ich habe den Quellcode der Demoversion [http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/] einfach komplett kopiert und in eine neue HTML-Seite kopiert - Bilder+CSS-Code entsprechend verlinkt. Das Ergebnis ist noch mangelhaft. . . .
X

ContentSlider - Quellcode

Dirk Levy
  
Beiträge gesamt: 9442

14. Mär 2011, 18:24
Beitrag # 2 von 5
Beitrag ID: #466976
Bewertung:
(3669 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi,

den musst Du noch an Deine Bedürfnisse
anpassen - sieht ganz schick aus...

Und hattest Du eine Frage dazu?


als Antwort auf: [#466971]

ContentSlider - Quellcode

Feuerländer
Beiträge gesamt: 79

15. Mär 2011, 13:00
Beitrag # 3 von 5
Beitrag ID: #467035
Bewertung:
(3611 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hi,
irgendwie muß der Quelltext angepaßt werden damit das genauso funktioniert bzw. aussieht wie bei der Demoversion. . . vielleicht kann jemand mir diese Ordnung im Quelltext herstellen . . . .


als Antwort auf: [#466976]

ContentSlider - Quellcode

Dirk Levy
  
Beiträge gesamt: 9442

15. Mär 2011, 15:01
Beitrag # 4 von 5
Beitrag ID: #467053
Bewertung:
(3596 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Aber das können wir nur tun, wenn wir den Quellcode
von Dir kennen. Und den sehen wir hier nicht....
Und meine Glaskugel ist gerade kaputt... ;-)


als Antwort auf: [#467035]

ContentSlider - Quellcode

Feuerländer
Beiträge gesamt: 79

17. Mär 2011, 12:05
Beitrag # 5 von 5
Beitrag ID: #467201
Bewertung:
(3527 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Featured Content Slider</title>

<link rel="stylesheet" type="text/css" href="../../style.css" />
<style type="text/css" media="screen"><!--
#page-wrap { background-image: url(css/Images/bg.png); width: 500px; position: relative; height: 100%; visibility: visible; }
--></style>
<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">

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;

}, 3000);
};

$(function(){

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");

$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
</script>
</head>

<body>
<div id="page-wrap">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="css/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">
<img src="css/Images/tempphoto-2.jpg" alt="temp" />
<div class="photo-meta-data">
Chicago Bears at Seattle Seahawks<br />
<span>Fifth field goal, overtime win for the Seahawks</span>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">

<img src="css/Images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>

<h1>How to Cook a Scotch Egg</h1>

<ul>
<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
<li>1/2 cup AP flour</li>
<li>1-2 eggs, beaten</li>
<li>3/4 cup panko-style bread crumbs</li>
<li>Vegetable oil for frying</li>
</ul>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="css/Images/tempphoto-4.jpg" alt="temp" />
<div class="photo-meta-data">
A Poem by Shel Silverstein<br />
<span>Falling Up</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<h1><a name="Anchor-33126" id="Anchor-33126"></a>A Tale of Two Cities</h1>
<p><em>Charles Dickins</em></p>
<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
</div>
</div>

</div>
</div>

<a href="css/Images/tempphoto-1.jpg" class="cross-link active-thumb"><img src="css/Images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="css/Images/tempphoto-2.jpg" class="cross-link"><img src="css/Images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="css/Images/tempphoto-3.jpg" class="cross-link"><img src="css/Images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="css/Images/tempphoto-4.jpg" class="cross-link"><img src="css/Images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="css/Images/tempphoto-5.jpg" class="cross-link"><img src="css/Images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="css/Images/tempphoto-6.jpg" class="cross-link"><img src="css/Images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>

</div>

</div>
<div id="source-code"></div>
</body>

</html>


als Antwort auf: [#467053]
X