Huhu liebe Community,
ich versuche gerade den NewsSlider auf meine Startseite zu setzen. Wir benutzen als Startseite ein externes Plugin. Leider gelingt es mir nicht so, wie ich es mir vorstelle.
Hier mal der Code der SlideShow:
Smarty
{if DE_WBB_ELITE_NEWS_SLIDER_ENABLE}
{hascontent}
<header class="boxHeadline boxSubHeadline">
<h2>{lang}wcf.dashboard.box.de.wbb-elite.news.newestNews{/lang}</h2>
</header>
<div class="slideshowContainer newsSlideshowContainer marginTop">
{content}
{include file="newsList" objects=$latestNewsList application="news"}
{/content}
</div>
<script data-relocate="true">
//<![CDATA[
$(function () {
var news = $('.newsSlideshowContainer article.news');
news.removeClass('marginTop');
{if DE_WBB_ELITE_NEWS_SLIDESHOW_SHOW_SMALL}
news.find('.newMessageBadge').remove();
news.find('.messageBody').remove();
{/if}
if(news.first().find('.newsImage').length == 0){
$('.newsSlideshowContainer').wcfSlideshow({
cycleInterval : {DE_WBB_ELITE_NEWS_SLIDER_TIME}
});
}else {
var image = news.first().find('.newsImage');
$(image).imgLoad(function () {
$('.newsSlideshowContainer').wcfSlideshow({
cycleInterval : {DE_WBB_ELITE_NEWS_SLIDER_TIME}
});
});
}
});
//]]>
</script>
{/hascontent}
{else}
<header class="boxHeadline boxSubHeadline">
<h2>{lang}wcf.dashboard.box.de.wbb-elite.news.newestNews{/lang}</h2>
</header>
{include file='newsList' application='news' objects=$latestNewsList}
{/if}
Alles anzeigen
Hier der Code von unserer Startseite:
Code
{include file='documentHeader'}
<head>
<title>{PAGE_TITLE|language}</title>
{include file='headInclude'}
<script data-relocate="true" src="http://www.krankentransportforum.de/wcf/js/3rdParty/jssor.slider.mini.js"></script>
<script data-relocate="true">
//<![CDATA[
$(function() {
var options = {
$ArrowKeyNavigation: true,
$AutoPlay: true,
$AutoPlaySteps: 1,
$AutoPlayInterval: 3000,
$DisplayPieces: 5,
$PauseOnHover: 4,
$SlideEasing: $JssorEasing$.$EaseLinear,
$SlideSpacing: 30,
//$SlideDuration: 3000,
$SlideWidth: 200,
$UISearchMode: 1
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
var browserWindow = $(window);
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth) {
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 800));
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
browserWindow.bind('load', ScaleSlider);
browserWindow.bind('resize', ScaleSlider);
browserWindow.bind('orientationchange', ScaleSlider);
});
//]]>
</script>
<link rel="canonical" href="{link controller='Start'}{/link}" />
</head><body id="tpl{$templateName|ucfirst}">
{include file='header'}
{include file='userNotice'}
<div class="contentNavigation"> {hascontent}
<nav>
<ul>
{content}
{event name='contentNavigationButtonsTop'}
{/content}
</ul>
</nav>
{/hascontent} </div>
<section id="start">
<center class="col-2" id="adsTop">
<div style="max-width: 824px"> {literal}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- KTF Start Respon. Top -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0728116796090884"
data-ad-slot="5131955370"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
{/literal} </div>
</center>
<div class="marginTop col-2">
<div id="centerLogo" class="visible-smartphone"> <img src="{$__wcf->getPath()}images/logo_start.gif" alt=""/>
</div>
<div>
<header class="boxHeadline">
<h1>{lang}wcf.start.heading{/lang}</h1>
</header>
<div class="marginTop jumboText"> {lang}wcf.start.text{/lang} </div>
</div>
<div id="centerLogo" class="hidden-smartphone"> <img src="/wcf/images/logo_start.gif" alt=""/>
</div>
</div>
<div class="marginTop col-2" id="register">
<div>{lang}wcf.start.register{/lang}</div>
<div> <a href="{link controller='Register'}{/link}"><img src="/images/register.png" alt="{lang}wcf.start.register.alt{/lang}" /></a> </div>
</div>
SlideShow
<!-- <div class="marginTop col-2" id="adsBottom"> -->
<div style="display: none" id="slider1_container">
<div u="slides" style="cursor: move; position: absolute; left: 0; top: 0; width: 100%; height: 100px; overflow: hidden;">
<div> <a href="http://www.maas-berlin.de/"> <img u="image" src="/images/logo_frei.png" alt="" /> </a> </div>
<div> <a href="link"> <img u="image" src="/images/logo_frei_2.png" alt="" /> </a> </div>
<div> <a href="link"> <img u="image" src="/images/logo_frei_3.png" alt="" /> </a> </div>
<div> <a href="link"> <img u="image" src="/images/logo_frei_4.png" alt="" /> </a> </div>
<div> <a href="link"> <img u="image" src="/images/logo_frei_5.png" alt="" /> </a> </div>
<div> <a href="link"> <img u="image" src="/images/logo_frei.png" alt="" /> </a> </div>
</div>
</div>
<div style="display: none" class="adLink"> <a href="">Jetzt Kooperationspartner werden</a> </div>
</section>
{include file='footer'}
</body>
</html>
Alles anzeigen
Wie genau setze ich das Script ein? Ich bekomme immer eine Fehlermeldung.