Flexslider

ChechenHD · 30 Oktober 2014

Hallo Leute,

Habe ein Script für einen Flexslider gefunden. Der ist aber viel zu breit. Und ich kenne mich nicht so gut in Javascript aus. Weis jemand wo ich die Pixel breite in diesem Script ändern kann?

SCRIPT:

<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-1-8-3-min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-flexslider-min.js">
</script>

<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
$j(window).load(function(){
$j('.flexslider').flexslider({
pauseOnAction: false
});
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 25px; height: 25px; margin: -20px 0 0; display: block; background: url(http://u.jimdo.com/www52/o/s2ba029d.../bg-direction-nav-v2.png?t=1393927213&v=thumb) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

/*]]>*/
</style>

Vielen Dank im voraus.

Chronos · 30 Oktober 2014

Also ich würde generell nie etwas in einem Plug-In ändern ^^, dass machst du alles separat im CSS.
Was du ganz gut mit dem Flexslider machen kannst, ist ihn zu konfigurieren (in einem extra JS):

Code:

$('#js-carousel-references').flexslider({
    animation       : "slide",
    animationLoop   : true,
    pauseOnAction   : false,
    pauseOnHover    : true,
    itemWidth       : 190,
    controlNav      : false,
    directionNav    : false,
    minItems        : 1,
    maxItems        : 8,
    pauseInvisible  : true
});

Das beantwortet nicht direkt deine Frage aber wie gesagt, nix im Plugin ändern, das macht nur ärger ^^

Edit aber ich seh gerade, hab ja auch itemWidth drinn, vllt bringt das ja was

Sempervivum · 30 Oktober 2014

Lies mal dies, ob es dir weiterhilft:
http://stackoverflow.com/questions/13202867/fixed-size-of-flexslider

ChechenHD · 30 Oktober 2014

Würde mich echt auf eine Sinnvolle Antwort freuen!

Sempervivum · 30 Oktober 2014

??? Meinst Du, unsere Antworten sind nicht sinnvoll?

ChechenHD · 31 Oktober 2014

Ich meine eher nicht hilfreich oder Problem lösend :)

Sempervivum · 31 Oktober 2014

Hast Du die Vorschläge denn ausprobiert?

ChechenHD · 31 Oktober 2014

Hab mir deine Link angeschaut und verstehe nur Bahnhof. Hab den Script nochmal in eine CSS Datei gepackt und versucht was zuändern, aber es tut sich nichts. Falls du oder jemand anders lust hat meinem Hobby anzuschließen freue ich mich auf Mitstreiter :) Es geht um eine Streaming Seite deren Home Index so gut wie fertig ist.

Sempervivum · 31 Oktober 2014

Na, OK, der Vorschlag von Chronos ist aber wirklich ganz einfach umzusetzen:

Code:

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(window).load(function(){
    $j('.flexslider').flexslider({
        pauseOnAction: false,
        itemWidth : 800  // hier deine gewünschte Breite eintragen
    });
});</script>(code]

ChechenHD · 7 November 2014

Wenn ich itemWidth : 800 bei mir an der gleichen stelle einfüge bekomme ich nur eine weisen Waagerechten strich zusehen. itemHeight ändert da auch nichts.

Sempervivum · 7 November 2014

Dann hast Du wahrscheinlich einen Fehler gemacht. Zeig doch mal deinen Aufruf von flexslider im Zusammenhang.

ChechenHD · 7 November 2014

Der steht im Header :

HTML:

<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-1-8-3-min.js">
</script>

<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-flexslider-min.js">
</script>

<script type="text/javascript">
//<![CDATA[
  var $j = jQuery.noConflict();
    $j(window).load(function(){
    $j('.flexslider').flexslider({
        pauseOnAction: false
        itemWidth : 800px  // hier deine gewünschte Breite eintragen
    });
});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 25px; height: 25px; margin: -20px 0 0; display: block; background: url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/bg-direction-nav-v2.png?t=1393927213&v=thumb) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(window).load(function(){
    $j('.flexslider').flexslider({
        pauseOnAction: false,
        itemWidth : 800  // hier deine gewünschte Breite eintragen
    });
});</script>(code]

/*]]>*/
</style>

Und der steht in Body :

HTML:

<div class="flexslider">
                <ul class="slides">
                    <li>
                        <a href="LINK"><img src="http://de.static-watchever.com/2/DE/EDITO/HILIT/439639/439653/artwork/skin/765x265.jpg?ver=201409241546" alt="" /></a>
                    </li>

                    <li>
                        <a href="LINK"><img src="http://de.static-watchever.com/2/DE/EDITO/HILIT/439521/439525/artwork/skin/765x265.jpg?ver=201409241546" alt="" /></a>
                    </li>

                    <li>
                        <a href="LINK"><img src="http://de.static-watchever.com/2/DE/EDITO/HILIT/439521/439530/artwork/skin/765x265.jpg?ver=201409241546" alt="" /></a>
                    </li>

                    <li>
                        <a href="LINK"><img src="http://de.static-watchever.com/2/DE/EDITO/HILIT/439614/439624/artwork/skin/765x265.jpg?ver=201409241546" alt="" /></a>
                    </li>
                </ul>
            </div>

ChechenHD · 7 November 2014

Ich habe einmal mit und einmal ohne px geschrieben.

Sempervivum · 7 November 2014

Nach dem Beispiel musst Du es ohne px schreiben. Der Fehler ist, dass Du ein Komma vergessen hast. So ist es richtig:

Code:

$j(window).load(function(){
   $j('.flexslider').flexslider({
       pauseOnAction: false, // hier gehoert ein Komma hin
       itemWidth : 800
   });
});

ChechenHD · 7 November 2014

Teste es mal selber. Es tut sich einfach nicht. Wie gesagt habe einmal mit und einmal ohne probiert.

Sempervivum · 7 November 2014

Doch, es tut sich was. Nur leider nicht das gewünschte: Die Bilder werden verkleinert und die Höhe entspr. angepasst. Breite ändert sich dagegen nicht.
Da musst Du wohl entsprechend der Anleitung bei stackoverflow verfahren. Du kannst ja die CSS-Datei lassen, wie sie ist und die betr. Eigenschaften außerhalb überschreiben.

ChechenHD · 7 November 2014

Ich verstehe nicht was du meinst. Wo auf Stackoverflow. Könntest du vielleicht ein Flexslider für mich optimieren?

Tronjer · 7 November 2014

Die Darstellung des Flexsliders lässt sich ohne JS, rein per CSS, beliebig anpassen. Habe ich selber schon gemacht. Aber das erfordert unter Umständen Einiges an Arbeit. Also entweder selber Hand anlegen, oder als Auftrag an die Jobbörse.

Sempervivum · 7 November 2014

Wo auf Stackoverflow

Den Link hatte ich früher gepostet:
http://stackoverflow.com/questions/13202867/fixed-size-of-flexslider
Wenn Du willst, dass dir geholfen wird, musst Du die Antworten schon genau durchlesen und den Hinweisen nachgehen.

ChechenHD · 8 November 2014

Ich schaus mir mal an. Trotzdem danke für euren langen Atem ^^ Die Leute im C++ Forum wären schon längst ausgerastet

Flexslider

Mitglied

Aktives Mitglied

Sempervivum

Guest

Mitglied

Sempervivum

Guest

Mitglied

Sempervivum

Guest

Mitglied

Sempervivum

Guest

Mitglied

Sempervivum

Guest

Mitglied

Mitglied

Sempervivum

Guest

Mitglied

Sempervivum

Guest

Mitglied

Senior HTML'ler

Sempervivum

Guest

Mitglied