|
So nun habe ich ein nach langem suchen endlich ein Slider gefunden, der mir gefällt und ich nutzen möchte, doch leider klappt es nicht ganz so.
Das ist das gute Stück
http://www.jqueryscript.net/slider/Cl...xisel.html
Ich will die variable 3 nutzen mit der Automatischen Slid Funktion.
Habe die Dateien hochgeladen und hinzugefügt, doch scheinbar klappt es nicht ganz.
Die Bilder werden mir nicht angezeigt.
Es Erscheint das Broken Bild im Google Chrome, auch die Button Next und Prvious sind nicht da. Was genau habe ich den nun Falsch gemacht.
Hier mal der eintrag aus meiner Theme.php und der Style.css
<!-- header -->
<div class"header-container">
<img align="center" width="100%" src='http://www.sbeats-studios.com/themes/sbs/images/header.png'/><a href="/community.php"></a> </div>
</div>
<header id="header">
<!--Slider Start-->
<ul id="demo">
<li><img src="images/Release/1.png" /></li>
<li><img src="images/Release/2.png" /></li>
<li><img src="images/Release/3.png" /></li>
<li><img src="images/Release/4.png" /></li>
<li><img src="images/Release/5.png" /></li>
</ul>
<script type="text/javascript">
$(window).load(function() {
$("#demo").flexisel({
visibleItems: 5, // The initial number of visible items in the carousel
animationSpeed: 1000, // Speed of the scrolling animation
autoPlay: true, // Auto scrolling
autoPlaySpeed: 3000, // Speed of auto scrolling
pauseOnHover: true, // Whether or not pause the auto sliding on mouse over
enable<a href="http://www.jqueryscript.net/tags.php?/Responsive/">Responsive</a>Breakpoints: true, // Enable responsive breakpoints
responsiveBreakpoints: { //
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>
<!--Slider Ende-->
</header>
<!-- end of header -->
/* Slider Start */
.nbs-flexisel-container {
position: relative;
max-width: 100%;
}
.nbs-flexisel-ul {
position: relative;
width: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
.nbs-flexisel-inner {
overflow: hidden;
float: left;
width: 100%;
background: #fcfcfc;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc)), color-stop(100%, #eee)); /* Chrome,Safari4+ */
background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nbs-flexisel-item {
float: left;
margin: 0px;
padding: 0px;
cursor: pointer;
position: relative;
line-height: 0px;
}
.nbs-flexisel-item > img {
width: 100%;
cursor: pointer;
positon: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width: 100px;
max-height: 45px;
}
/*** <a href="http://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a> ***/
.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
z-index: 100;
opacity: 0.5;
}
.nbs-flexisel-nav-left {
left: 10px;
background: url(slider/images/button-previous.png) no-repeat;
}
.nbs-flexisel-nav-right {
right: 5px;
background: url(slider/images/button-next.png) no-repeat;
}
/*Slider Ende*/
LG Synced
P.s.S. Wenn jemand einen Slider zu Empfehlen hat, bin ich ganz Ohr. ;)
Selfmade Is Not Easy  |
|
Ok danke, das mit den Bilder habe ich hin bekommen das sie da sind. ;)
Doch die Button Next und Previous werden noch nicht angezeigt.
Slide Funktion geht leider auch noch nicht. Er Ordnet die Bilder unter einander an.
Hier der Code meine Theme.php wie ich es nun gemacht habe. Finde den Fehler einfach nicht, sitze schon zu lange dran, ich übersehe ihn bestimmt.
<?php
if (!defined("IN_FUSION")) { die("Access Denied"); }
define("THEME_BULLET", "<img src='".THEME."images/bullet.gif' class='bullet' alt='»' border='0' />");
define("THEME_WIDTH", "90%");
require_once INCLUDES."theme_functions_include.php";
if (function_exists("add_to_head")) {
add_to_head('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />');
add_to_head('<link rel="stylesheet" href="'.THEME.'css/flexsisel.css" type="text/css" media="all" />');
add_to_head('<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,500,700" rel="stylesheet" type="text/css" />');
add_to_head('<link rel="stylesheet" href="'.THEME.'css/style.css" type="text/css" media="all" />');
#add_to_head('<script src="'.THEME.'js/jquery-1.8.0.min.js" type="text/javascript"></script>');
add_to_head('<!--[if lt IE 9]><script src="'.THEME.'js/modernizr.custom.js"></script><![endif]-->');
add_to_head('<script src="'.THEME.'js/jquery.flexiseljs" type="text/javascript"></script>');
add_to_head('<script src="'.THEME.'js/functions.js" type="text/javascript"></script>');
add_to_head('<meta http-equiv="Content-Type" content="text/html; charset=utf-8">');
echo "<meta name='author' content='.:: SBeats Studios ~ Make Your Selfmade ::.'/>\n";
echo "<meta name='publisher' content='.:: SBeats Studios ~ Make Your Selfmade ::.'/>\n";
echo "<meta name='copyright' content='SBeats Studios'/>\n";
echo "<meta name='description' content='
Community für Songs, Instrumentals
Tracks, Features, Support, Tipps, Trick, Mastering, Mixing, VST Plugins.
Mit Producern wie, CalvinJayFly, Tschabp, Synced'/>\n";
echo "<meta name='keywords' content='Promiton, Songs, SBS, Band-Support, S-Beats Studios, Make Your Selfmade, S-Beats, Beatz, Synced Beats, is not Easy!, Produktion, Mixing, Mastering, Vst Plugins, Recording, Aufnehmen, Programme, Videos, Tracks, Film-Musik, Instrumentale Musik, Exclusive Beats, Exclsuive Instrumental, toysONE, Synced-Beats, Blackout Music, Hip-Hop Beats, Movie Beats, Rap-Beats, Soul, Gitar, Keybord, Strings, Violine, Opera, About-Sbeats, Kostenlose Exclusive Beats, Kostenlose Film Music, Kostenlose Gema und Gvl freie Music,
Kostenlose Gema und Gvl freie Beats, Offizielle S-Beats Studios Website, 100% Original, Free Beats, Kostenlose Beats, Hip-Hp Beats, Rap Beats, Instrumentale Intros, Instrumentale Outros, Film Music, Titel Musik, German Talents, Exclsuive, Producer Beats, Beat Mastering,Free VST Plugins, S-Beats Store, S-Beats Shop, Featuring Artist, Tshabp,CalvinJayFly,'/>\n";
echo "<meta name='page-topic' content='Promotion Community für deine Songs und Musik'/>\n";
echo "<meta name='page-type' content='Musik'/>\n";
echo " <meta name='audience' content='Artisten,Musiker,Künstler,Beatmaker,Singer,Songwritter'/>\n";
echo "<meta name='robots' content='index,follow'/>\n";
echo "<meta name='google-translate-customizatio' content='7529f8a10fa032fc-871db2f205d47b11-g9f7d3bee76e18ea7-16'/>\n";
echo "<script type='text/javascript' src='".INCLUDES."jquery/jquery.js'></script>\n";
echo "<script type='text/javascript' src='".INCLUDES."jscript.js'></script>\n";
echo "<script type='text/javascript' src='".INCLUDES."analyticstracking.php'></script>\n";
}
function render_page($license = false) {
global $main_style;
?>
<!-- wraper -->
<div id="wrapper">
<!-- shell -->
<div class="shell">
<!-- container -->
<div class="container">
<!-- navigation -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<body>
<div class="container" id="main" role="main">
<ul class="menu">
<li><a href="/news.php">News</a>
<ul class="submenu">
<li><a href="/news_cats.php">Archive</a></li>
<li><a href="/news_stats.php">Stats</a></li>
</ul>
</li>
<li class="active"><a href="/downloads.php">Dlaods</a>
<ul class="submenu">
<li><a href="/download-category-40-Ep">Ep</a></li>
<li><a href="/download-category-24-Beats">Beats</a></li>
<li><a href="/download-category-37-Alben">Alben</a></li>
<li><a href="/download-category-25-Tracks">Tracks</a></li>
<li><a href="/download-category-40-Collab-Alben">Collab</a></li>
<li><a href="/download-category-35-Bundles">Bundle</a></li>
<li><a href="/download-category-36-Releases">Release</a></li>
</ul>
</li>
<li><a href="/forum/index.php">Forum</a>
<ul class="submenu">
<li><a href="/forum/forum-33-Suche">Suche</a></li>
<li><a href="/forum/forum-34-Biete">Biete</a></li>
<li><a href="/forum/forum-7-Umfragen">Umfragen</a></li>
<li><a href="/forum/forum-4-Recording">Recording</a></li>
<li><a href="/forum/forum-8-Mastering">Mastering</a></li>
<li><a href="/forum/forum-6-Information">Information</a></li>
<li><a href="/forum/forum-14-Kostenlose-Plugins">Kostenlose VST</a></li>
<li><a href="/forum/forum-17-Archive">Archive</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="/community.php">Community</a></li>
</ul>
</div>
</body>
<!-- end of navigation -->
<!-- search -->
<div class="search">
<?php
echo '<form method="get" action="'.BASEDIR.'search.php">'; ?>
<td align="right" width="100%" class="field"><input class="field" name="stext" type="text" id="searchfield" id="s" value="Suchen..." onblur="if (this.value == '') {this.value = 'Suchen...';}" onfocus="if (this.value == 'Suchen...') {this.value = '';}" /></td>
<input type="submit" class="search-btn" value="" />
</form>
</div>
<!-- end of search -->
<!-- SBS Translate -->
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'de', includedLanguages: 'de,en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, gaTrack: true, gaId: 'UA-42940643-2'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- SBS Translate Ende -->
<!-- header -->
<div class"header-container">
<img align="center" width="100%" src='http://www.sbeats-studios.com/themes/sbs/images/header.png'/><a href="/community.php"></a> </div>
</div>
<header id="header">
<!--Slider Start-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<body>
<h1>Flexisel</h1>
<p>Flexisel will adapt responsively as the screen width gets smaller...</p>
<div class="clearout"></div>
<p>Option not clone.</p>
<ul id="flexiselDemo4">
<li><img src="images/chevrolet.png" /></li>
<li><img src="images/ford.png" /></li>
<li><img src="images/aston-martin.png" /></li>
</ul>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel();
$("#flexiselDemo2").flexisel({
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
$("#flexiselDemo3").flexisel({
visibleItems: 5,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
$("#flexiselDemo4").flexisel({
clone:false
});
});
</script>
</body>
<!--Slider Ende-->
</header>
<!-- end of header -->
Und das hier ist meine flexisel.css , da habe ich es nun so gemacht.
body {
background:#fff;
font-family:Arial, sans-serif;
}
p {
margin-bottom:20px;
}
.clearout {
height:20px;
clear:both;
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
display:none;
}
.nbs-flexisel-container {
position:relative;
max-width:100%;
}
.nbs-flexisel-ul {
position:relative;
width:9999px;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}
.nbs-flexisel-inner {
overflow:hidden;
float:left;
width:100%;
background:#fcfcfc;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */
background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.nbs-flexisel-item {
float:left;
margin:0px;
padding:0px;
cursor:pointer;
position:relative;
line-height:0px;
}
.nbs-flexisel-item img {
width: 100%;
cursor: pointer;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width:100px;
max-height:45px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
z-index: 100;
opacity: 0.5;
}
.nbs-flexisel-nav-left {
left: 10px;
background: url(../images/button-previous.png) no-repeat;
}
.nbs-flexisel-nav-right {
right: 5px;
background: url(../images/button-next.png) no-repeat;
}
Danke für eure Hilfe :)
LG Synced
Bearbeitet von Patrick am 27. Februar 2014 12:06:11
Selfmade Is Not Easy |
PHP-Fusion: IPv9-DE-MOD
