jquery Newsslider
-
- ConPresso-Checker
- Beiträge: 217
- Registriert: 15.12.2005 09:27
- Hat sich bedankt: 1 Mal
- Danksagung erhalten: 2 Mal
jquery Newsslider
ch habe ein tolles Skript gefunden.
Wie packe ich die ganzen Abfragen in das Skript?
<!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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<h3>» Featured Content Slider Using jQuery</h3>
<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"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
</div>
Es soll an irgendeiner Stelle eingebunden werden und die News dynamisch mit Bild aktualisiert werden.
Wie packe ich die ganzen Abfragen in das Skript?
<!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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... -ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<h3>» Featured Content Slider Using jQuery</h3>
<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"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
</div>
Es soll an irgendeiner Stelle eingebunden werden und die News dynamisch mit Bild aktualisiert werden.
- Mr. Magpie
- ConPresso-Profi
- Beiträge: 1004
- Registriert: 01.01.1970 01:00
- Wohnort: Wuppertal
- Hat sich bedankt: 274 Mal
- Danksagung erhalten: 59 Mal
- Mr. Magpie
- ConPresso-Profi
- Beiträge: 1004
- Registriert: 01.01.1970 01:00
- Wohnort: Wuppertal
- Hat sich bedankt: 274 Mal
- Danksagung erhalten: 59 Mal
Mit "News" darfst du bei CPO 3.8 aber eben keine CMS-Artikel meinen. Ist dir das klar? Wenn ja, dann kann man dir nur konkret helfen, wenn du uns einen Link zu deiner Seite zur Verfügung stellst, denn die Gestaltung realisierst du entweder händisch oder über die jQuery UI und wo das Ganze dann sichtbar wird, bestimmst du über deinen individuellen CSS-/HTML-Code.
Günther Ludwig
-
- ConPresso-Checker
- Beiträge: 217
- Registriert: 15.12.2005 09:27
- Hat sich bedankt: 1 Mal
- Danksagung erhalten: 2 Mal
Mmh. Ich meinte aber CPO Artikel, die wechselvoll durch Newsslider inszeniert werden. Der Webauftritt dresdnersc.de
Zuletzt geändert von Dani1978 am 29.06.2011 13:29, insgesamt 1-mal geändert.
- Mr. Magpie
- ConPresso-Profi
- Beiträge: 1004
- Registriert: 01.01.1970 01:00
- Wohnort: Wuppertal
- Hat sich bedankt: 274 Mal
- Danksagung erhalten: 59 Mal
- balu
- ConPresso-Entwickler
- Beiträge: 1748
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 81 Mal
- Danksagung erhalten: 133 Mal
Hi,
Du könntest die News einfach per index_php.php einblenden.
Im Template muss dann jeweils der Teil stehen, der im Beispielcode markiert ist mit
<!-- First Content -->
Text und Grafik in dem Code kannst Du austauschen durch einen Platzhalter.
Und das andere <script> Geraffel muss dann passend in den Header (global oder lokal, je nachdem).
Balu
Du könntest die News einfach per index_php.php einblenden.
Im Template muss dann jeweils der Teil stehen, der im Beispielcode markiert ist mit
<!-- First Content -->
Text und Grafik in dem Code kannst Du austauschen durch einen Platzhalter.
Und das andere <script> Geraffel muss dann passend in den Header (global oder lokal, je nachdem).
Balu
Bartels.Schöne
ConPresso Support & Development
ConPresso Support & Development
- balu
- ConPresso-Entwickler
- Beiträge: 1748
- Registriert: 01.01.1970 01:00
- Hat sich bedankt: 81 Mal
- Danksagung erhalten: 133 Mal
Achso, MagPie hat natürlich Recht. Eure ConPresso-Version ist 8 Jahre alt und nicht registriert.
Ich würde zumindest aus Sicherheitsgründen dringend ein Update empfehlen.
Ausserdem solltet Ihr natürlich unbedingt klären, ob Ihr nicht vielleicht eine kommerzielle Lizenz braucht. Falls nicht, solltet Ihr der Fairness halber wenigstens die Version als nicht-kommerziell registrieren.
Balu
Ich würde zumindest aus Sicherheitsgründen dringend ein Update empfehlen.
Ausserdem solltet Ihr natürlich unbedingt klären, ob Ihr nicht vielleicht eine kommerzielle Lizenz braucht. Falls nicht, solltet Ihr der Fairness halber wenigstens die Version als nicht-kommerziell registrieren.
Balu
Bartels.Schöne
ConPresso Support & Development
ConPresso Support & Development
-
- ConPresso-Checker
- Beiträge: 217
- Registriert: 15.12.2005 09:27
- Hat sich bedankt: 1 Mal
- Danksagung erhalten: 2 Mal
Mmh danke Balu. Wird gemacht. Ich schaue mir das mal am WE an.
Eine Rückfrage: Text und Grafik wird ersetzt durch einen Platzhalter. Bei 3 verschiedenen Artikel bräuchte man doch aber einen Platzhalter1, Platzhalter2 und Platzhalter3?
Eine Rückfrage: Text und Grafik wird ersetzt durch einen Platzhalter. Bei 3 verschiedenen Artikel bräuchte man doch aber einen Platzhalter1, Platzhalter2 und Platzhalter3?
Zuletzt geändert von Dani1978 am 29.06.2011 10:01, insgesamt 1-mal geändert.
- Mr. Magpie
- ConPresso-Profi
- Beiträge: 1004
- Registriert: 01.01.1970 01:00
- Wohnort: Wuppertal
- Hat sich bedankt: 274 Mal
- Danksagung erhalten: 59 Mal
-
- ConPresso-Checker
- Beiträge: 217
- Registriert: 15.12.2005 09:27
- Hat sich bedankt: 1 Mal
- Danksagung erhalten: 2 Mal
Danke Balu,
ich habe das Testweise mal probiert, aber bspw. keine Stelle gefunden, wo den restlichen Code "<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><%cpBildMore%><span><%cpTitle%></span></a></li>
</ul>" hinbekomme.
ich habe das Testweise mal probiert, aber bspw. keine Stelle gefunden, wo den restlichen Code "<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><%cpBildMore%><span><%cpTitle%></span></a></li>
</ul>" hinbekomme.
balu hat geschrieben:Hi,
Du könntest die News einfach per index_php.php einblenden.
Im Template muss dann jeweils der Teil stehen, der im Beispielcode markiert ist mit
<!-- First Content -->
Text und Grafik in dem Code kannst Du austauschen durch einen Platzhalter.
Und das andere <script> Geraffel muss dann passend in den Header (global oder lokal, je nachdem).
Balu