Thread Verfasser: Patrick
Thread ID: 186
Thread Info
Es gibt 6 Beiträge zu diesem Thema, und es wurde 5136 Mal angesehen.  Ausserdem wurden Dateien angehängt.
 Thema drucken
Flexisel JQUERY Carousel
Patrick
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
Code
              <!-- 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 -->



Code
/* 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 Wink
 
Dat Tunes
CSS Datei richtig verlinkt im Theme ?
Desweiteren kann er die Bilder nicht finden, wenn zb. der Image Ordner im Thema ist, kann er die unter image nicht so finden.

Du musst alle Dateien auf den richtigen Pfad bringen, sonst wird es nichts.
Das Problem ist nicht das Problem, das Problem ist der Nutzer, der das Problem verursacht.
Was lernen wir ?
Wir entfernen einfach den Nutzer und das Problem ist gelöst !

Sollte das Problem nicht gelöst sein, WD40! WD40 hilft immer !
 
Septron
Beispiel:

Zitat: <!--Slider Start-->
<ul id="demo">
<li><img src="da der hauptordnerpfad/images/Release/1.png" /></li>
<li><img src="da der hauptordnerpfad/images/Release/2.png" /></li>
<li><img src="da der hauptordnerpfad/images/Release/3.png" /></li>
<li><img src="da der hauptordnerpfad/images/Release/4.png" /></li>
<li><img src="da der hauptordnerpfad/images/Release/5.png" /></li>
</ul>


lg Septron
 
Patrick
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.
Code
<?php

if (!defined("IN_FUSION")) { die("Access Denied"); }
define("THEME_BULLET", "<img src='".THEME."images/bullet.gif' class='bullet' alt='&raquo;' 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&uuml;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.
Code
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.02.2014 um 13:06
Selfmade Is Not Easy Wink
 
Dat Tunes
Nehm mal in der CSS die ../ bei den Grafiken raus, da der Ordner bestimmt im Themenordner liegt.

Code
background: url(../images/button-previous.png) no-repeat;

Das Problem ist nicht das Problem, das Problem ist der Nutzer, der das Problem verursacht.
Was lernen wir ?
Wir entfernen einfach den Nutzer und das Problem ist gelöst !

Sollte das Problem nicht gelöst sein, WD40! WD40 hilft immer !
 
Patrick
Zitat: Dat Tunes schrieb:

Nehm mal in der CSS die ../ bei den Grafiken raus, da der Ordner bestimmt im Themenordner liegt.

Code
background: url(../images/button-previous.png) no-repeat;


Leider nicht geklappt, wird immer noch nicht angezeigt, oder geslidet
Patrick hat folgende Datei angehängt:
Du hast nicht die Berechtigung die Anhäge dieses Themas zu sehen.

Bearbeitet von Patrick am 30.08.2016 um 14:23
Selfmade Is Not Easy Wink
 
Springe ins Forum: