Caroufredsel und thumbnails (contao3)

Hallo,
ich schaffe es mit meinen überaus bescheidenen php Kenntnissen einfach nicht , bei der pagination des Sliders Caroufredsel statt der Nummerierung von 1...* die entsprechenden thumbnails anzeigen zu lassen . Weiß jemand eine einfache Lösung ?

Zitat:

---

Zitat von tamague

Hallo,
ich schaffe es mit meinen überaus bescheidenen php Kenntnissen einfach nicht , bei der pagination des Sliders Caroufredsel statt der Nummerierung von 1...* die entsprechenden thumbnails anzeigen zu lassen . Weiß jemand eine einfache Lösung ?

---

Hallo hallo,

hattest du das schon in dem anderen Thread dazu gelesen? Von Haus aus sind keine Thumbnails eingebaut, da es ein Inhalts-Slider und kein reiner Bild-Slider ist. Man kann die Funktionalität allerdings recht einfach selbst einbauen.

Genau das hier muß ins Template:

PHP-Code:

---

    echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {';
?>
            var src = $("img", this).attr( "src" );
            src = src.replace( "/large/", "/small/");
            return '<img src="' + src + '" />';
<?php
        echo '}';

---

und zwar direkt nach diesem Code-Fragment:

PHP-Code:

---

    if ($this->paginationKeys) {
        echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
        $iComma = true;
    } 


---

Es ist so gemacht, daß die großen Bilder in einem Ordner large liegen und die kleinen mit gleichen Namen in small. Ist sozusagen der gleiche Code wie aus seinem Beispiel.

Grüße...
...Dirk

Danke für die schnelle Hilfe,werde ich morgen gleich nochmal versuchen

ich hänge mich hier mal mit dran, das interessiert mich auch,
@Dirch Du sprichst hier von dem "ce_caroufredsel.html5" template, richtig?

Da kann ich aber das angebene Code_Fragment nicht finden?
oder bin ich blind?
Gruß Doro

gefunden es war natürlich das js_caroufredsel.html5 template:o

Zitat:

---

Zitat von Doro

gefunden es war natürlich das js_caroufredsel.html5 template:o

---

Hallo Doro,

hat es denn so geklappt? Die Templates haben sich seit dem ein wenig geändert und die Stelle sieht möglicherweise nicht mehr genau so aus.

Viele Grüße...
...Dirk

ja :) Danke Dirk es hat geklappt,
ich würde ja gerne auf Beispiel 28 hinaus mit vertiakler Thumbnailleiste, die wiederum gescrolled werden kann, dahin komme ich so wohl nicht.
Ich habe soweit meine vertikale thumbleiste schon zum Laufen gebracht, (offline, deshalb kann ich's nicht demonstrieren)
und per overflow:hidden; auf die gewünschte Höhe gebracht, weiter komme ich aber wohl nicht ohne weitere Änderungen am Template
um die Thumbs durchzuscrollen, oder?

herzl. Gruß Doro

Zitat:

---

Zitat von Doro

ja :) Danke Dirk es hat geklappt,
ich würde ja gerne auf Beispiel 28 hinaus mit vertiakler Thumbnailleiste, die wiederum gescrolled werden kann, dahin komme ich so wohl nicht.
Ich habe soweit meine vertikale thumbleiste schon zum Laufen gebracht, (offline, deshalb kann ich's nicht demonstrieren)
und per overflow:hidden; auf die gewünschte Höhe gebracht, weiter komme ich aber wohl nicht ohne weitere Änderungen am Template
um die Thumbs durchzuscrollen, oder?

herzl. Gruß Doro

---

Leider nicht. Dadurch, daß es ein Inhalts-Slider ist, ist so eine Funktion nicht im Slider selbst integriert. Für die Thumbnails bräuchtest du daher einen weiteren Slider, der mit dem ersten über Click-Events verknüpft wird.

Ich habe aber auch eine Lösung für dieses Thema: eine implementierte carouFredsSel-Galerie, die genau das macht. Weil sie noch im Beta-Status ist, ist sie jedoch noch nicht im ER. Die würde dir eine Menge arbeit abnehmen. ;)

Beste Grüße...
...Dirk

Hallo Dirk,

kannst du mir bitte sagen, wie ich im Falle der Thumbnails das Template anpassen muss, damit dort dann statt der üblichen Rahmenklasse .caroufredsel_pagi die Klasse .caroufredsel_pagi_thumb kommt?

Ich setze zwei verschiedene js_caroufredsel ein (einmal das Original, einmal mit den Thumbnails) und möchte, dass nur bei der Variante mit den Thumbnails die alternative Klasse kommt, da ich dann daran unterschiedlich stylen kann. Die fixe #ID für die Paginations bringt mir in dem Fall nichts, da das Caroufredsel auf der Website x-mal eingesetzt wird und ich nicht jedes Mal im Nachhinein die ID rauskramen kann, sobald die Redakteure mal ein neues Caroufredsel eingebaut haben :)

Danke,
Nina

Zitat:

---

Zitat von Nina

kannst du mir bitte sagen, wie ich im Falle der Thumbnails das Template anpassen muss, damit dort dann statt der üblichen Rahmenklasse .caroufredsel_pagi die Klasse .caroufredsel_pagi_thumb kommt?

---

Hallo Nina,

diese Daten kannst du im ce_caroufredsel-Template anpassen. Dort ist die ganze Ausgabe-Struktur hinterlegt und kann nach belieben angepaßt werden.

Ich kann mir zwar gerade nicht so ganz vorstellen wie du das gebastelt hast, aber das ist glaube ich auch unerheblich. :) Vielleicht sollte ich das neue CE, an dem ich arbeite doch zu Geld machen. ;D

Liebe Grüße...
...Dirk

Ich glaube, du hast mich missverstanden.

Ich habe folgenden Aufbau:
Im Templates-Ordner liegen zwei Templates:

js_caroufredsel.html5

Code:

---

<script>
(function($) {
<?php if ($this->triggerMode == 'onWindowLoad'): ?>
        $(document).ready(function() {
                $("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'hidden');
        });
        $(window).load(function() {
                $("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'visible');
        });
        $(window).load(function() {
<?php elseif ($this->triggerMode == 'readyLoad'): ?>
        $.readyLoad(function() {
<?php else: ?>
        $(document).ready(function() {
<?php endif; ?>
            $("#caroufredsel_<?php echo $this->id; ?>").carouFredSel({
<?php
        $oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

        // global options
        if ($this->carouselType) {               
                echo ($oComma == true ? ', ' : '') . $this->carouselType;
                $oComma = true;
        }
        if ($this->responsive) {
                echo ($oComma == true ? ', ' : '') . $this->responsive;
                $oComma = true;
        }
        if ($this->direction) {
                echo ($oComma == true ? ', ' : '') . $this->direction;
                $oComma = true;
        }
        if ($this->width) {
                echo ($oComma == true ? ', ' : '') . $this->width;
                $oComma = true;
        }
        if ($this->height) {
                echo ($oComma == true ? ', ' : '') . $this->height;
                $oComma = true;
        }
        if ($this->align) {
                echo ($oComma == true ? ', ' : '') . $this->align;
                $oComma = true;
        }
        if ($this->padding) {
                echo ($oComma == true ? ', ' : '') . $this->padding;
                $oComma = true;
        }
        if ($this->cookie) {
                echo ($oComma == true ? ', ' : '') . $this->cookie;
                $oComma = true;
        }
        // function called once at creation of carousel
        echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { data.items.addClass("visible");';
        // --> your code here <--
        echo ' }'; // end of 'onCreate'
        $oComma = true;

        // subobject 'items' options
        if ($this->itemsVisible || $this->itemsStart || $this->itemsWidth || $this->itemsHeight) {
                echo ($oComma == true ? ', ' : '') . 'items: { ';
                if ($this->itemsVisible) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsVisible;
                        $iComma = true;
                }
                if ($this->itemsStart) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsStart;
                        $iComma = true;
                }
                if ($this->itemsWidth) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsWidth;
                        $iComma = true;
                }
                if ($this->itemsHeight) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsHeight;
                        $iComma = true;
                }
                echo ' }'; // end of subobject 'items' options
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'scroll' options
        echo ($oComma == true ? ', ' : '') . 'scroll: { ';
        if ($this->scrollItems) {
                echo ($iComma == true ? ', ' : '') . $this->scrollItems;
                $iComma = true;
        }
        if ($this->scrollFx) {
                echo ($iComma == true ? ', ' : '') . $this->scrollFx;
                $iComma = true;
        }
        if ($this->scrollEasing) {
                echo ($iComma == true ? ', ' : '') . $this->scrollEasing;
                $iComma = true;
        }
        if ($this->scrollDuration) {
                echo ($iComma == true ? ', ' : '') . $this->scrollDuration;
                $iComma = true;
        }
        if ($this->scrollPauseOnHover) {
                echo ($iComma == true ? ', ' : '') . $this->scrollPauseOnHover;
                $iComma = true;
        }
//        echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
        // function called every time before scrolling occurs
        echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { data.items.old.removeClass("visible");';
        if (!$this->autoPlay && $this->autoProgress == 'pie') {
                echo ' $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '");';
        }
        // --> your code here <--
        echo ' }'; // end of 'onBefore'
        $iComma = true;
        // function called every time after scrolling occurred
        echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { data.items.visible.addClass("visible");';
        if (!$this->autoPlay && $this->autoProgress == 'pie') {
                echo ' $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' });';
        }
        // --> your code here <--
        echo ' }'; // end of 'onAfter'
        $iComma = true;
        echo ' }'; // end of subobject 'scroll' options
        $iComma = false; // reset inside subobject comma flag
        $oComma = true;

        // subobject 'auto' options
        if (!$this->autoPlay) {
                if ($this->autoButton || $this->autoTimeoutDuration || $this->autoDelay || $this->autoProgress) {
                        echo ($oComma == true ? ', ' : '') . 'auto: { ';
                        if ($this->autoButton) {
                                echo ($iComma == true ? ', ' : '') . 'button: "#caroufredsel_button_' . $this->id . '"';
                                $iComma = true;
                        }
                        if ($this->autoTimeoutDuration) {
                                echo ($iComma == true ? ', ' : '') . $this->autoTimeoutDuration;
                                $iComma = true;
                        }
                        if ($this->autoDelay) {
                                echo ($iComma == true ? ', ' : '') . $this->autoDelay;
                                $iComma = true;
                        }
                        if ($this->autoProgress) {
                                echo ($iComma == true ? ', ' : '') . 'progress: { ';
                                echo 'bar: "#caroufredsel_bar_' . $this->id . '"';
                                if ($this->autoProgress == 'pie') {
                                        echo ', updater: function(percentage) { $().updateProgressBar("caroufredsel_bar_' . $this->id . '", { barColor: progressBarColor_' . $this->id . ' }, percentage); }';
                                }
                                if ($this->autoProgressInterval) {
                                        echo ', ' . $this->autoProgressInterval;
                                }
                                echo ' }';
                                $iComma = true;
                        }
//                        echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { }';
                        if ($this->autoProgress == 'pie') {
                                echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); $().showProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
                        }
//                        echo ($iComma == true ? ', ' : '') . 'onTimeoutEnd: function(percentage, duration) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { }';
                        if ($this->autoProgress == 'pie') {
                                echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
                        }
                        echo ' }'; // end of subobject 'auto' options
                        $iComma = false; // reset inside subobject comma flag
                        $oComma = true;
                }
        } else {
                echo ($oComma == true ? ', ' : '') . $this->autoPlay;
                $oComma = true;
        }

        // subobject 'prev' options
        if ($this->navigation || $this->prevKey) {
                echo ($oComma == true ? ', ' : '') . 'prev: { ';
                if ($this->navigation) {
                        echo 'button: "#caroufredsel_prev_' . $this->id . '"';
                        $iComma = true;
                }
                if ($this->prevKey) {
                        echo ($iComma == true ? ', ' : '') . $this->prevKey;
                        $iComma = true;
                }
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                echo ' }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'next' options
        if ($this->navigation || $this->nextKey) {
                echo ($oComma == true ? ', ' : '') . 'next: { ';
                if ($this->navigation) {
                        echo 'button: "#caroufredsel_next_' . $this->id . '"';
                        $iComma = true;
                }
                if ($this->nextKey) {
                        echo ($iComma == true ? ', ' : '') . $this->nextKey;
                        $iComma = true;
                }
                echo ' }';
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'pagination' options
        if ($this->pagination) {
                echo ($oComma == true ? ', ' : '') . 'pagination: { ';
                echo 'container: "#caroufredsel_pagi_' . $this->id . '"';
                $iComma = true;
                if ($this->paginationKeys) {
                        echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
                        $iComma = true;
                }
//                echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) { }';
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                echo ' }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'swipe' options
        if ($this->swipeOnTouch || $this->swipeOnMouse) {
                echo ($oComma == true ? ', ' : '') . 'swipe: { ';
                if ($this->swipeOnTouch) {
                        echo ($iComma == true ? ', ' : '') . $this->swipeOnTouch;
                        $iComma = true;
                }
                if ($this->swipeOnMouse) {
                        echo ($iComma == true ? ', ' : '') . $this->swipeOnMouse;
                        $iComma = true;
                }
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                echo ' }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'mousewheel' options
        if ($this->mousewheel) {
                echo ($oComma == true ? ', ' : '') . $this->mousewheel;
                $oComma = true;
        }

        echo ' }, { ';
        $oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

        if ($this->debug) {               
                echo ($oComma == true ? ', ' : '') . $this->debug;
                $oComma = true;
        }

        echo ($oComma == true ? ', ' : '') . 'wrapper: { classname: "caroufedsel_wrapper caroufredsel_wrapper_' . $this->id . '" }';
        $oComma = true;

        echo ' }';
?>
                );
        });
})(jQuery);
</script>

---

js_caroufredsel_thumbnail.html5

Code:

---

<script>
(function($) {
<?php if ($this->triggerMode == 'onWindowLoad'): ?>
        $(document).ready(function() {
                $("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'hidden');
        });
        $(window).load(function() {
                $("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'visible');
        });
        $(window).load(function() {
<?php elseif ($this->triggerMode == 'readyLoad'): ?>
        $.readyLoad(function() {
<?php else: ?>
        $(document).ready(function() {
<?php endif; ?>
            $("#caroufredsel_<?php echo $this->id; ?>").carouFredSel({
<?php
        $oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

        // global options
        if ($this->carouselType) {               
                echo ($oComma == true ? ', ' : '') . $this->carouselType;
                $oComma = true;
        }
        if ($this->responsive) {
                echo ($oComma == true ? ', ' : '') . $this->responsive;
                $oComma = true;
        }
        if ($this->direction) {
                echo ($oComma == true ? ', ' : '') . $this->direction;
                $oComma = true;
        }
        if ($this->width) {
                echo ($oComma == true ? ', ' : '') . $this->width;
                $oComma = true;
        }
        if ($this->height) {
                echo ($oComma == true ? ', ' : '') . $this->height;
                $oComma = true;
        }
        if ($this->align) {
                echo ($oComma == true ? ', ' : '') . $this->align;
                $oComma = true;
        }
        if ($this->padding) {
                echo ($oComma == true ? ', ' : '') . $this->padding;
                $oComma = true;
        }
        if ($this->cookie) {
                echo ($oComma == true ? ', ' : '') . $this->cookie;
                $oComma = true;
        }
        // function called once at creation of carousel
        echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { data.items.addClass("visible");';
        // --> your code here <--
        echo ' }'; // end of 'onCreate'
        $oComma = true;

        // subobject 'items' options
        if ($this->itemsVisible || $this->itemsStart || $this->itemsWidth || $this->itemsHeight) {
                echo ($oComma == true ? ', ' : '') . 'items: { ';
                if ($this->itemsVisible) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsVisible;
                        $iComma = true;
                }
                if ($this->itemsStart) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsStart;
                        $iComma = true;
                }
                if ($this->itemsWidth) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsWidth;
                        $iComma = true;
                }
                if ($this->itemsHeight) {
                        echo ($iComma == true ? ', ' : '') . $this->itemsHeight;
                        $iComma = true;
                }
                echo ' }'; // end of subobject 'items' options
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'scroll' options
        echo ($oComma == true ? ', ' : '') . 'scroll: { ';
        if ($this->scrollItems) {
                echo ($iComma == true ? ', ' : '') . $this->scrollItems;
                $iComma = true;
        }
        if ($this->scrollFx) {
                echo ($iComma == true ? ', ' : '') . $this->scrollFx;
                $iComma = true;
        }
        if ($this->scrollEasing) {
                echo ($iComma == true ? ', ' : '') . $this->scrollEasing;
                $iComma = true;
        }
        if ($this->scrollDuration) {
                echo ($iComma == true ? ', ' : '') . $this->scrollDuration;
                $iComma = true;
        }
        if ($this->scrollPauseOnHover) {
                echo ($iComma == true ? ', ' : '') . $this->scrollPauseOnHover;
                $iComma = true;
        }
//        echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
        // function called every time before scrolling occurs
        echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { data.items.old.removeClass("visible");';
        if (!$this->autoPlay && $this->autoProgress == 'pie') {
                echo ' $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '");';
        }
        // --> your code here <--
        echo ' }'; // end of 'onBefore'
        $iComma = true;
        // function called every time after scrolling occurred
        echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { data.items.visible.addClass("visible");';
        if (!$this->autoPlay && $this->autoProgress == 'pie') {
                echo ' $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . '

});';
        }
        // --> your code here <--
        echo ' }'; // end of 'onAfter'
        $iComma = true;
        echo ' }'; // end of subobject 'scroll' options
        $iComma = false; // reset inside subobject comma flag
        $oComma = true;

        // subobject 'auto' options
        if (!$this->autoPlay) {
                if ($this->autoButton || $this->autoTimeoutDuration || $this->autoDelay || $this->autoProgress) {
                        echo ($oComma == true ? ', ' : '') . 'auto: { ';
                        if ($this->autoButton) {
                                echo ($iComma == true ? ', ' : '') . 'button: "#caroufredsel_button_' . $this->id . '"';
                                $iComma = true;
                        }
                        if ($this->autoTimeoutDuration) {
                                echo ($iComma == true ? ', ' : '') . $this->autoTimeoutDuration;
                                $iComma = true;
                        }
                        if ($this->autoDelay) {
                                echo ($iComma == true ? ', ' : '') . $this->autoDelay;
                                $iComma = true;
                        }
                        if ($this->autoProgress) {
                                echo ($iComma == true ? ', ' : '') . 'progress: { ';
                                echo 'bar: "#caroufredsel_bar_' . $this->id . '"';
                                if ($this->autoProgress == 'pie') {
                                        echo ', updater: function(percentage) { $().updateProgressBar("caroufredsel_bar_' . $this->id . '", {

barColor: progressBarColor_' . $this->id . ' }, percentage); }';
                                }
                                if ($this->autoProgressInterval) {
                                        echo ', ' . $this->autoProgressInterval;
                                }
                                echo ' }';
                                $iComma = true;
                        }
//                        echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { }';
                        if ($this->autoProgress == 'pie') {
                                echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { $().initProgressBar

("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); $().showProgressBar

("caroufredsel_bar_wrapper_' . $this->id . '"); }';
                        }
//                        echo ($iComma == true ? ', ' : '') . 'onTimeoutEnd: function(percentage, duration) { }';
//                        echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { }';
                        if ($this->autoProgress == 'pie') {
                                echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { $().hideProgressBar

("caroufredsel_bar_wrapper_' . $this->id . '"); }';
                        }
                        echo ' }'; // end of subobject 'auto' options
                        $iComma = false; // reset inside subobject comma flag
                        $oComma = true;
                }
        } else {
                echo ($oComma == true ? ', ' : '') . $this->autoPlay;
                $oComma = true;
        }

        // subobject 'prev' options
        if ($this->navigation || $this->prevKey) {
                echo ($oComma == true ? ', ' : '') . 'prev: { ';
                if ($this->navigation) {
                        echo 'button: "#caroufredsel_prev_' . $this->id . '"';
                        $iComma = true;
                }
                if ($this->prevKey) {
                        echo ($iComma == true ? ', ' : '') . $this->prevKey;
                        $iComma = true;
                }
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                echo ' }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'next' options
        if ($this->navigation || $this->nextKey) {
                echo ($oComma == true ? ', ' : '') . 'next: { ';
                if ($this->navigation) {
                        echo 'button: "#caroufredsel_next_' . $this->id . '"';
                        $iComma = true;
                }
                if ($this->nextKey) {
                        echo ($iComma == true ? ', ' : '') . $this->nextKey;
                        $iComma = true;
                }
                echo ' }';
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'pagination' options
        if ($this->pagination) {
                echo ($oComma == true ? ', ' : '') . 'pagination: { ';
                echo 'container: "#caroufredsel_pagi_' . $this->id . '"';
                $iComma = true;
                if ($this->paginationKeys) {
                        echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
                        $iComma = true;
                }
                // THUMBNAILS ANZEIGEN - START
    echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {';
?>
            var src = $("img", this).attr( "src" );
            src = src.replace( "/large/", "/small/");
            return '<div class="ce_image grid4 block"><img src="' + src + '" /><div>';
<?php
        echo '}';       
                // THUMBNAILS ANZEIGEN - ENDE       
               
               
//                echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) { }';
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                echo ' }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'swipe' options
        if ($this->swipeOnTouch || $this->swipeOnMouse) {
                echo ($oComma == true ? ', ' : '') . 'swipe: { ';
                if ($this->swipeOnTouch) {
                        echo ($iComma == true ? ', ' : '') . $this->swipeOnTouch;
                        $iComma = true;
                }
                if ($this->swipeOnMouse) {
                        echo ($iComma == true ? ', ' : '') . $this->swipeOnMouse;
                        $iComma = true;
                }
//                echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//                echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//                echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
                echo ' }';
                $iComma = false; // reset inside subobject comma flag
                $oComma = true;
        }

        // subobject 'mousewheel' options
        if ($this->mousewheel) {
                echo ($oComma == true ? ', ' : '') . $this->mousewheel;
                $oComma = true;
        }

        echo ' }, { ';
        $oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

        if ($this->debug) {               
                echo ($oComma == true ? ', ' : '') . $this->debug;
                $oComma = true;
        }

        echo ($oComma == true ? ', ' : '') . 'wrapper: { classname: "caroufedsel_wrapper caroufredsel_wrapper_' . $this->id . '" }';
        $oComma = true;

        echo ' }';
?>
                );
        });
})(jQuery);
</script>

---

Wenn man nun das Start-Inhaltselement für ein Accordion anlegt, hat man die Möglichkeit zur Auswahl zwischen diesen beiden Templates. Bei der ersten Variante kommt die nummerierte Pagination, bei der zweiten Variante kommen stattdessen die Bilder als Thumbnails.

Das Problem: In beiden Varianten hat die Pagination dieselbe CSS-Klasse.

Ich brauche eine Lösung, wie ich den beiden Varianten unterschiedliche Klassen geben kann, je nachdem welches der beiden Templates gewählt wurde.

Zitat:

---

Zitat von Nina

Das Problem: In beiden Varianten hat die Pagination dieselbe CSS-Klasse.

Ich brauche eine Lösung, wie ich den beiden Varianten unterschiedliche Klassen geben kann, je nachdem welches der beiden Templates gewählt wurde.

---

ach so. Das ist ganz einfach:

PHP-Code:

---

// subobject 'pagination' options
    if ($this->pagination) {
        echo ($oComma == true ? ', ' : '') . 'pagination: { ';
        echo 'container: "#caroufredsel_pagi_' . $this->id . '"'; 


---

Siehst du die letzte Zeile? Dort sagt man dem Slider-Script welches der Container für die Pagination sein soll. Du änderst also hier in dem Template das ab und legst für das ce_caroufredsel ebenfalls 2 Templates an. Wobei du in dem Template für die Pagination dann diese Zeile

PHP-Code:

---

<div class="caroufredsel_pagi" id="caroufredsel_pagi_<?php echo $this->id; ?>"></div>

---

identisch anpaßt. Wichtig ist nur, daß man die zueinander gehörigen Templates gemeinsam auswählt.

Darf ich mal schauen was du da fabrizierst? :D

Hoffe es klappt so. Liebe Grüße...
...Dirk

Ah, danke. Wie doof, dass mir das nicht selbst aufgefallen ist ;) :D

Zur Seite: Ist das Schweizer Projekt, das du schon ein paar Mal gesehen hast.

Hallo Dirk

Bei der Suche nach einer Galerie, welche dieselben Funktionen hat, wie diejenige, welche sich Nina wünscht (sliding thumbnails unter der Galerie), bin ich über Deine Antwort bezüglich einer caroufredsel_galerie gestossen. Da ich nun seit mehr als einer Woche vergeblich eine Lösung suche, möchte ich Dich fragen, ob Du bereits ein Datum für die Freigabe der neuen Erweiterung hast.

Patrik

Hallo Patrik,

dauert noch so 1-2 Wochen. Vielleicht auch kürzer. Könnte dir aber die Beta-Version schicken...

Grüße...
...Dirk

Dirk

Das wäre enorm hilfreich, vielen Dank!

Patrik

Zitat:

---

Zitat von laoshu

Dirk

Das wäre enorm hilfreich, vielen Dank!

Patrik

---

...dann solltest du mir deine Mail-Adresse per PM mitteilen... ;)

Hallo Dirk,
wenn ich das richtig erinnere, konnte man bei der ersten caroufredzel-version (Galerieversion) die grossen Bilder auch noch mal als lightbox version in einer weiteren Größe anklicken, das scheint nun nicht mehr der Fall zu sein, das würde ich für einen Kunden aber gerne so haben, deshalb hatte ich die Galerie ursprünglich getestet und nun gibts das nicht mehr. :( Hab ich eine Möglichkeit über das Template das wieder einzusetzen?
Gruß Doro

Zitat:

---

Zitat von Doro

Hallo Dirk,
wenn ich das richtig erinnere, konnte man bei der ersten caroufredzel-version (Galerieversion) die grossen Bilder auch noch mal als lightbox version in einer weiteren Größe anklicken, das scheint nun nicht mehr der Fall zu sein, das würde ich für einen Kunden aber gerne so haben, deshalb hatte ich die Galerie ursprünglich getestet und nun gibts das nicht mehr. :( Hab ich eine Möglichkeit über das Template das wieder einzusetzen?
Gruß Doro

---

Hallo Doro,

ich hatte die "Bild-Einstellungen" ausgeblendet, weil ihr das doch so verwirrend fandet. Ist aber alles noch drin und braucht nur wieder sichtbar gemacht zu werden. Bis wann bräuchtest du das? Sonst sag ich dir welche Stelle du in der Erweiterung anpassen mußt, damit du es zu gesicht bekommst. :)

Viele Grüße...
...Dirk

ja, sag mir einfach die Stelle, ich kann aber auch bis übermorgen warten, Danke Dir.
Doro

Zitat:

---

Zitat von Doro

ja, sag mir einfach die Stelle, ich kann aber auch bis übermorgen warten, Danke Dir.
Doro

---

ersetze in system/modules/dk_caroufredsel/dca/tl_content.php die vorhandene Zeile mit dieser hier:

PHP-Code:

---

$GLOBALS['TL_DCA']['tl_content']['palettes']['caroufredsel_gallery']    = '{type_legend},type,headline;{source_legend},dk_cfsMultiSRC,dk_cfsSortBy;{image_legend}dk_cfsFullsize;{caroufredsel_thumbnails_legend},dk_cfsUseThumbnails;{caroufredsel_legend},dk_cfsCarouFredSel,dk_cfsSynchronise,dk_cfsHtmlTpl,dk_cfsCssTpl,dk_cfsJsTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop'; 


---

Danach siehst du zumindest diesen einen Punkt. Es sollte sofort gehen, wenn nicht zieh ich eine neue Version in den kommenden Tagen vor.

Liebe Grüße...
...Dirk

Danke Dir, ich probiers sobald ich hier dazu komme, lieben Dank Doro

Hallo Dirk,
ich habe das so eingesetzt, wie Du gesagt hast, aber es tut sich nix, auch nicht nachdem ich Daten bereinigt hab, in der systemwartung?
nicht schlimm, ich wart dann einfachmal ab
lieben Gruß Doro

Hallo Dirk,


um die Thumbs vertikal anzordnen müsste es doch reichen diese standard css

.caroufredsel > div,
.caroufredsel > section,
.caroufredsel_thumbnails > div {
float: left;
}

mit float:none; zu überschreiben, oder ist das quatsch?
irgendwie funkioniert das so jedenfalls nicht.
und was passiert mit der Slidefunktion, wenn ich die Thumbs vertikal setze?
das geht so garnciht oder?
gruß Doro

Hallo Doro,

dieses float dort muss IMMER gesetzt sein, sonst funktioniert der Slider nicht richtig. Das float hat auch nichts mit der Laufrichtung zu tun. Vertikale Thumbs hab ich so noch nicht vorgesehen. Du kannst die dir aber auch selbst einstellen. Dazu mußt du das js-Template anpassen. Die Thumbs sind ein 2. Slider (ziemlich weit unten in der Datei) und du mußt dann hier die Parameter händisch setzen. Bei vertikal ist es analog zu horizontal nur, daß du eben höhen- statt breitenbasiert die Einstellungen vornimmst.

Die Parameter findest du hier: http://caroufredsel.dev7studios.com/configuration.php

Leichter ist es sicher, wenn du dir einen vertikalen Slider konfigurierst und dann die Einstellungen aus dem FireBug für den Thumbsnail-Slider übernimmst. Den kannst du dann mit absoluter Positionierung hinschieben wo du magst, denn das ist dann nur noch CSS.

Viele Grüße...
...Dirk

Danke Dir, aber das übersteigt meine Kompetenz, Schuster bleibt bei seinen Leisten:-)

Hallo,

ist es möglich die Funktion für die Vergrößerung der Bilder in der Bildergalerie anzuschalten, die sich dann in einer Lightbox öffnen?

Liebe Grüße,

Jan

Hallo,

ich würde gerne die Vorschaubilder auch durch Navigation scrollen lassen. Wie kann ich es umsetzen?

Danke.

Liebe Grüße,

Jan

Zitat:

---

Zitat von jenda

Hallo,

ist es möglich die Funktion für die Vergrößerung der Bilder in der Bildergalerie anzuschalten, die sich dann in einer Lightbox öffnen?

Liebe Grüße,

Jan

---

Noch nicht, aber ich stelle bald eine neue Versions ins ER wo das dann möglich ist.

Zitat:

---

Zitat von jenda

ich würde gerne die Vorschaubilder auch durch Navigation scrollen lassen. Wie kann ich es umsetzen?

---

Die Frage verstehe ich nicht, denn sobald genügend Thumbnails vorhanden sind, kann doch durch diese gescrollt werden?!

Viele Grüße...
...Dirk

Dann habe ich anscheinend etwas falsch eingestellt.

Siehe http://www.britzka.com/neu/filmdetai...-der-erde.html.

Auf jeden Fall habe ich statt "divs" eine Liste benutzt, um die Vorschaubilder besser platzieren zu können. Kann es sein, dass ich irgendwo noch einstellen muss, dass die Listen statt der divs jetzt gescrollt werden sollte, oder?

ahh macht das einen Unterschied ob es DIVs oder LIs sind?

Hmm wenn ich mir deine Seite anschaue, dann frage ich mich was, wo und wann da bei den Thumbs gescrollt werden soll. Es gibt 5 Thumbnails und selbst bei der mittleren Sprungmarke haben alle 5 Platz. Erst wenn weniger Platz zur Verfügung steht als Bilder vorhanden sind werden die Thumbnails scrollbar. Mach einfach mal ein paar Bilder dazu, dann siehst du den Unterschied. Allerdings wird ein

PHP-Code:

---

.caroufredsel_thumbnails > div {float: left;} 


---

auf die Kinderlein gesetzt. Das mußt du dann bei deiner Struktur nachbilden/setzen.

2 Tipps noch zu den Einstellungen. Nimm statt onWindowLoad lieber das readyLoad und bei den Bildhöhen lieber "variabel" statt "automatisch". Dann rutschen die Thumbs auch bei den kleineren Sprungmarken nach oben. "Automatisch" nimmt man an sich nur, wenn man respsonsive nicht benutzt, da so wie ich das verstanden habe von der Originalgröße ausgehend gerechnet wird und nicht von der respsonsive-Größe...

Danke, für mich ist es ein großer Unterschied, ob ich div oder li nehme - divs kann man nämlich schlecht zentrieren.

Danke auch für den Tipp zu den Einstellungen. Die variable Größe meinst du unter "Größe der Elemente" oder unter "Größe des Karussells"?

Bei dem zweiten Karussell sind schon mehrere Vorschaubilder, die nicht mehr sichtbar sind. Aber scrollen kann ich die nicht.

Zu Lightbox: Wäre es für dich möglich, mir zu schreiben, wie ich es mit der Lightbox hinkriegen kann? Ich muss es leider so schnell wie möglich umsetzen. Oder wann planst du das Veröffentlichen der nächsten Version, die es beinhalten wird? Danke.

Zitat:

---

Zitat von jenda

Danke, für mich ist es ein großer Unterschied, ob ich div oder li nehme - divs kann man nämlich schlecht zentrieren.

Danke auch für den Tipp zu den Einstellungen. Die variable Größe meinst du unter "Größe der Elemente" oder unter "Größe des Karussells"?

Bei dem zweiten Karussell sind schon mehrere Vorschaubilder, die nicht mehr sichtbar sind. Aber scrollen kann ich die nicht.

Zu Lightbox: Wäre es für dich möglich, mir zu schreiben, wie ich es mit der Lightbox hinkriegen kann? Ich muss es leider so schnell wie möglich umsetzen. Oder wann planst du das Veröffentlichen der nächsten Version, die es beinhalten wird? Danke.

---

Da nur ein Bild gleichzeitig sichtbar ist, ist das an der Stelle egal. Stell's bei Höhe des Karussells ein. Hast Du auch den float:left auf deine Elemente gesetzt? Der ist ganz wichtig, da sonst gar nichts geht. Eigentlich sind die Thumbnails zentriert, wenn man die Breite des Thumbnails-Karussells auf die Breite des Sliders setzt.

Mit der Lightbox das würde nur mit Code-Änderung gehen. Davon rate ich ab. Die neue Version spiele ich heute oder morgen ein. Spätestens über das WE.

Vielen lieben Dank. Das ist ein toller Service! Das schätze ich sehr. Noch eine neugierige Frage. Hast du vor, das man auch ein Video sliden könnte, das man nach klicken vergrößert abspielen könnte. Ich würde toll finden, wenn man es auch mit dem Galerie-Modul umsetzen könnte. Danke.

Liebe Grüße,

Jan

Zitat:

---

Zitat von jenda

Vielen lieben Dank. Das ist ein toller Service! Das schätze ich sehr. Noch eine neugierige Frage. Hast du vor, das man auch ein Video sliden könnte, das man nach klicken vergrößert abspielen könnte. Ich würde toll finden, wenn man es auch mit dem Galerie-Modul umsetzen könnte. Danke

---

Das ist ohne sehr viel Aufwand nicht möglich. Die caroufredsel-Galerie basiert auf der Contao-Galerie und ist wie diese nur für Bilder gedacht. Wenn du ein Video darin brauchst mußt du den Umweg mit den Wrapper-Elementen gehen und das Contao-Video-Element benutzen, auch wenn du dann die angenehme Funktionalität mit den Bildern verlierst und diese dort ebenfalls einzeln hinterlegen mußt.

Lieber Dirk, nach dem Update geht es bei mir gar nicht.... Muss ich wieder etwas einstellen?

Liebe Grüße,

Jan

Zitat:

---

Zitat von jenda

Lieber Dirk, nach dem Update geht es bei mir gar nicht.... Muss ich wieder etwas einstellen?

---

Hi Jan,

wie meistens bei größeren Updates ändern sich auch die Templates dabei. Ist auch in den Update-Notizen angegeben. =) Wenn du die neuen Templates mit deinen Änderungen fütterst sollte alles gehen. Für die Lightbox-Funktionalität mußt du noch in den Contao-Einstellungen auf Experten-Modus umschalten, damit dieses Feld sichtbar wird.

Liebe Grüße...
...Dirk

Danke, Dirk. Es funkt wieder. :-) Ich muss nur die Vorschaubilder irgendwie wieder richtig anordnen. Aber das ist eine Kleinigkeit. :-) Danke noch einmal für deine tolle Arbeit.

Zitat:

---

Zitat von jenda

Danke, Dirk. Es funkt wieder. :-) Ich muss nur die Vorschaubilder irgendwie wieder richtig anordnen. Aber das ist eine Kleinigkeit. :-) Danke noch einmal für deine tolle Arbeit.

---

Was mir eben eingefallen ist: so ohne weiteres kannst du die innere Struktur nicht auf ul+li umbauen ohne das dem Slider als konfiguration mitzugeben. Du mußt dann noch das js-Template anpassen dort im Bereich "wrapper" ganz unten.

Aber ich empfehle dir, daß du en fredsel so läßt wie er von hause aus kam. Die Thumbnails sind eigentlich standardmäßig schon zentriert, sonst kannst du das bei deren Ausrichtung einstellen.

Danke. Nach deiner Empfehlung blieb ich bei deiner Version. Allerdings werden sie nicht zentriert. Für mich ist es schleierhaft, wie ich es hinkriegen soll. Ich benutzte deine Einstellungen, aber die lassen die Vorschaubilder immer links stehen. Ich habe es auch in den Einstellung für die Galerie bestimmt, dass die Vorschaubilder zentriert sein sollten. Sind sie aber anscheinend nicht. :rolleyes: Ich wäre dir für jeden Ratschlag sehr dankbar. Danke. Liebe Grüße,

Jan

hmm ich weiß nicht was du da für CSS benutzt oder gebaut hast, aber eigentlich geht das zentrieren recht einfach. Da du den responsive mode benutzt solltest du eine "flüssige" Breite einstellen, z.B. 100% . Die gleiche Breite dann noch für die Thumbnails. Dann die Thumbnails zentriert ausrichten (default) und das war es. Der Slider stellt dann so viele Thumbs dar, wie Platz haben. Sind mehr vorhanden kann man sobald weniger Platz da ist, scrollen. Die Thumbnails selbst werden in ihrem umgebenden Container dann zentriert. Wenn du mir nen Zugang machst, kann ich das dir auch einstellen...

Hallo Dirk und alle anderen,

ich komme mit meinem Caroufredsel leider nicht weiter und bevor ich noch ewig suche einfach mal meine Fragen dazu.
Dirk, was Du unten geschrieben hast, wie man die Thumbs vertikal anordnen kann, habe ich leider nicht verstanden, aber vielleicht kannst Du es bitte nochmal etwas detaillierter erklären.

Mir ist zum Thema vertikale Caroufredsel Thumbs noch was eingefallen und ich wollte wissen ob mein Gedankengang überhaupt Sinn macht, bzw. ob ich nicht schon 10Ecken zu weit gedacht habe und das alles viel einfacher geht.

Also, ich habe einen CFS (ich kürze das jetzt mal ab) angelegt und die Thumbs erscheinen natürlich darunter. Diese sollen aber links und vertikal auftauchen und das möglichst z. B. 3 x 6. Ist das überhaupt möglich? Vertikal soll ja irgendwie gehen. Aber was ist mit Vertikal nebeneinander? Und ich würde das ganze gerne in meinem Seitenlayout nach links verschieben. Dann geht das nur als Modul oder?

Wäre es nicht möglich das ganze einfacher zu machen, in dem ich die entsprechenden Templates des CFS kopiere und einfach dort die Befehle für die Anzeige des großen Bildes rausschmeiße? Aus dem 1. CFS nehme ich dann die Anzeige für die Thumbs raus und dann diese beiden CFS via "carouFredSel-Karussells synchronisieren". Macht das Sinn? Und wenn ja, wie geht das? Ich habe leider fast keine Ahnung von JS und was ich anpassen muß.

Eine grundsätzliche Frage, die sich mit beim Bau in Contao 3 gerade stellt ist, welche Dateien in den Templates muß ich überhaupt "anfassen". In meinem Seitenlayout war unter Ausgabeformat XHTML Strict gewählt. Bedeutet es damit, daß ich für Änderungen in den Templates immer nur die .xhtml Templates nehmen muß/soll? (Änderung auf HTML im Ausgabeformat führen zu einer Fehlermeldung im System. Dann geht gar nichts mehr)

Vielleicht kann mir jemand weiter helfen. Ich habe leider noch einige Wissenlücken. :( Bisher ging viel über "einfach ausprobieren" einzustellen. Aber jetzt gucke ich schon fleißig Little Boxes und lese ganz viel über Contao und Co. um diese Lücken endlich zu füllen. Ach so, wenn sich jemand das "Schlamassel" auf meiner Bauseite angucken möchte: http://www.mangagirl-tv.de/index.php/baby.html (Kann in einigen Browsern sein, das der CFS erst nach hin und herklicken zwischen zwei Menupunkten korrekt angezeigt wird, das Problem habe ich auch noch nicht gelößt.)

Freue mich über Antwort :)

Viele Grüße
Julia

Zitat:

---

Zitat von Dirch

Vertikale Thumbs hab ich so noch nicht vorgesehen. Du kannst die dir aber auch selbst einstellen. Dazu mußt du das js-Template anpassen. Die Thumbs sind ein 2. Slider (ziemlich weit unten in der Datei) und du mußt dann hier die Parameter händisch setzen. Bei vertikal ist es analog zu horizontal nur, daß du eben höhen- statt breitenbasiert die Einstellungen vornimmst.

Die Parameter findest du hier: http://caroufredsel.dev7studios.com/configuration.php

Leichter ist es sicher, wenn du dir einen vertikalen Slider konfigurierst und dann die Einstellungen aus dem FireBug für den Thumbsnail-Slider übernimmst. Den kannst du dann mit absoluter Positionierung hinschieben wo du magst, denn das ist dann nur noch CSS.

Viele Grüße...
...Dirk

---

Guten Abend Julia,

verwendest du noch Version 1.1 der Erweiterung? Denn In der aktuellen Version 1.2 habe ich die Funktion mit den vertikalen Thumbs erst eingebaut. Die Benutzung ist nämlich recht einfach und kann im Bereich der Thumbnails ganz einfach ausgewählt werden. Unter der Größenangabe gibt's jetzt das Feld "Position der Vorschaubilder" und wenn du dort die Position einstellst, dann erscheinen sie an dieser Position. Worauf du bei den vertikalen Thumbs allerdings achten mußt ist, daß du eine Karussel-Höhe angibst. Auf deiner Seite sehe ich aber auch, daß du "responsive" eingeschaltet hast.

Ich weiß nicht, ob das in Kombination mit vertikalen Thumbs funktionieren wird. Ich hatte das versucht bei mir umzusetzen und es fast geschafft, aber bin letztlich daran gescheitert und habe es irgendwann frustriert aufgegeben. Nach meiner Einschätzung geht responsive zusammen mit vertikalen Thumbs nicht. Aber ich bin kein CSS-Profi und es mag da andere geben, die das womöglich hinbekommen. Was aber auf alle Fälle geht, sind vertikale Thumbs mit fester Höhe. Die Schwierigkeit ist beim caroufredsel, daß er eigentlich ein Inhalts-Slider ist und daher keine Thumbs eingebaut hat. Diese Möglichkeit baue ich hinzu, in dem ich einen 2 Slider hinzufüge, der die Thumbs beinhaltet. Da haben es reine Bild-Slider leichter, wobei jeder dieser "responsive"-Slider nur horizontale Thumbs anbietet.

Zitat:

---

Zitat von Juletomate

Also, ich habe einen CFS (ich kürze das jetzt mal ab) angelegt und die Thumbs erscheinen natürlich darunter. Diese sollen aber links und vertikal auftauchen und das möglichst z. B. 3 x 6. Ist das überhaupt möglich? Vertikal soll ja irgendwie gehen. Aber was ist mit Vertikal nebeneinander? Und ich würde das ganze gerne in meinem Seitenlayout nach links verschieben. Dann geht das nur als Modul oder?

---

Technisch möglich ist fast alles, aber es müßte programmiert werden. Der caroufredsel selbst unterstützt keine 2 oder mehrzeiligen Slider. So etwas geht dann nur über mehrere Slider, die man miteinander verknüpft. Man könnte sich das manuell in den Templates zusammenbauen, aber das ist recht aufwendig. Wie meinst du das in deinem Seitenlayout nach links verschieben? Du meinst es in die Linke Spalte zu setzen? Ja das ginge dann auf direktem Weg nur mit dem Modul. Das ist aber nicht weiter schlimm, da das Modul identisch ist mit dem Inhalts-Element.

Zitat:

---

Zitat von Juletomate

Wäre es nicht möglich das ganze einfacher zu machen, in dem ich die entsprechenden Templates des CFS kopiere und einfach dort die Befehle für die Anzeige des großen Bildes rausschmeiße? Aus dem 1. CFS nehme ich dann die Anzeige für die Thumbs raus und dann diese beiden CFS via "carouFredSel-Karussells synchronisieren". Macht das Sinn? Und wenn ja, wie geht das? Ich habe leider fast keine Ahnung von JS und was ich anpassen muß.

---

Jein - wenn man sich damit auskennt kann man in den Templates die Erweiterungen vornehmen. Allerdings geht es so wie du dir überlegt hast nicht, da die Inhalte und Templates dynamisch von Contao erzeugt werden und darauf ausgerichtet sind. Man kann daher nicht bei dem einen Slider Teil A haben und bei dem anderen Slider Teil B. Man muß daher alles in einem Teil machen und dort dann im HTML- und JS-Template. Um eine Programmierung in jQuery kommt man nicht herum.

Zitat:

---

Zitat von Juletomate

Eine grundsätzliche Frage, die sich mit beim Bau in Contao 3 gerade stellt ist, welche Dateien in den Templates muß ich überhaupt "anfassen". In meinem Seitenlayout war unter Ausgabeformat XHTML Strict gewählt. Bedeutet es damit, daß ich für Änderungen in den Templates immer nur die .xhtml Templates nehmen muß/soll? (Änderung auf HTML im Ausgabeformat führen zu einer Fehlermeldung im System. Dann geht gar nichts mehr)

---

Normalerweise faßt man die Templates nur dann an, wenn man etwas darin ändern möchte/muß. Das ist aber nicht generell so der Fall und im speziellem beim caroufredsel nur notwendig wenn man etwas machen will, das von der Erweiterung nicht von hause aus abgedeckt wird. Wenn man ein Template ändern möchte, dann muß man das nehmen was man im Seiten-Layout als Format ausgewählt hat. Contao schaut dort nach und zieht die Templates anhand der Einstellung. Eigentlich sollte kein Fehler auftreten, wenn deine Seite XHTML im Layout hat, aber du HTML-Templates geändert hast.

Zitat:

---

Zitat von Juletomate

Vielleicht kann mir jemand weiter helfen. Ich habe leider noch einige Wissenlücken. :( Bisher ging viel über "einfach ausprobieren" einzustellen. Aber jetzt gucke ich schon fleißig Little Boxes und lese ganz viel über Contao und Co. um diese Lücken endlich zu füllen. Ach so, wenn sich jemand das "Schlamassel" auf meiner Bauseite angucken möchte: http://www.mangagirl-tv.de/index.php/baby.html (Kann in einigen Browsern sein, das der CFS erst nach hin und herklicken zwischen zwei Menupunkten korrekt angezeigt wird, das Problem habe ich auch noch nicht gelößt.)

---

Das mit dem korrekten Anzeigen kannst du ganz leicht korrigieren. (liegt an den Webkit-Browsern und einem Fehler in diesen) Gehe in die Contao-Einstellungen und änder dort bei caroufredsel-Startmethode den Wert auf "readyLoad". Dann ist alles gut (was das betrifft). =)

Viele Grüße...
...Dirk

Vielen Dank Dirk,

Zitat:

---

Zitat von Dirch

Das mit dem korrekten Anzeigen kannst du ganz leicht korrigieren. (liegt an den Webkit-Browsern und einem Fehler in diesen) Gehe in die Contao-Einstellungen und änder dort bei caroufredsel-Startmethode den Wert auf "readyLoad". Dann ist alles gut (was das betrifft). =)

---

das mit dem Webkit-Browser-Fehler hat schonmal toll funktioniert.

Zitat:

---

Zitat von Dirch

verwendest du noch Version 1.1 der Erweiterung? Denn In der aktuellen Version 1.2 habe ich die Funktion mit den vertikalen Thumbs erst eingebaut.

---

Jetzt ist es aktuell. Ich dachte das hätte ich in der Erweiterungsverwaltung aktualisiert, aber das hat leider nur direkt über die Detailanzeige des CFS funktioniert.

Zitat:

---

Zitat von Dirch

Die Benutzung ist nämlich recht einfach und kann im Bereich der Thumbnails ganz einfach ausgewählt werden. Unter der Größenangabe gibt's jetzt das Feld "Position der Vorschaubilder" und wenn du dort die Position einstellst, dann erscheinen sie an dieser Position. Worauf du bei den vertikalen Thumbs allerdings achten mußt ist, daß du eine Karussel-Höhe angibst. Auf deiner Seite sehe ich aber auch, daß du "responsive" eingeschaltet hast.

---

Hab ich gesehen und probiert. Nun hab ich aber ne Fehlermeldung: Parse error: syntax error, unexpected T_ENDIF in /usr/www/users/jkyfot/jk_bau/system/modules/dk_caroufredsel/templates/themes/css_caroufredsel.xhtml on line 40
Hab die Anweisung für Anzeige links dann auch erstmal wieder rausgenommen. Leider ohne Erfolg. Egal was ich jetzt einstelle. Der Fehler bleibt. Was kann ich tun?
Wollte dann ein Update auf Contoa 3.1.1. machen, in der Hoffnung, daß das hilft, aber auch da bekomme ich leider eine Fehlermeldung.
Fatal error: Uncaught exception 'PharException' with message 'phar "/usr/www/users/jkyfot/jk_bau/contao/update.phar.php" SHA1 signature could not be verified: broken signature' in /usr/www/users/jkyfot/jk_bau/contao/update.phar.php:34 Stack trace: #0 /usr/www/users/jkyfot/jk_bau/contao/update.phar.php(34): Phar::webPhar('update.phar.php', 'index.php', '', Array, 'phar_rewrite') #1 {main} thrown in /usr/www/users/jkyfot/jk_bau/contao/update.phar.php on line 34

Oh weh.... Was nun?

ahh fein - ich habe die Version ab 3.1 freigeben müssen, weil ich eine Template-Sache geändert hatte wo das 3.0.x die Templates nicht mehr beim Kopieren gefunden hat und ich dann den Kram nicht mehr zurückbauen wollte. :(

Also der Parse-Error bei dem css-Template sollte so nicht sein. Da hab ich wohl nen Bug drin. Ich benutze schon ewig kein XHTML mehr, daher teste ich die nicht so (ausreichend mehr). Ich schau mal rein und mach dann ein Update bzw. schau wie ich dir die korrigierte Datei zukommen lasse.

Du machst das Update über Live-Update ja?

ok hab den Fehler im Template gefunden. Schreibe mir am besten eine PM wohin ich dir die Datei schicken kann. Werde aber auch im Laufe des Tages morgen eine neue Versions ins ER versuchen einzustellen.

PS: Elfin oder Vulkanierin? :D

Ja, ich mache das über Live-Update.

O.k. Prima, dann warte ich mal bis morgen bzw. schick Dir dann ne PM. Die Elfe fliegt jetzt erstmal ins Bett..... ;)

Danke erstmal soweit und gute Nachtruhe

...nachdem ich nun die aktuelle Version erfolgreich installiert habe,
(Wer Probleme damit hat, lese hier: https://community.contao.org/de/show...ur-Verf%FCgung)

gehts nun aber mit den Thumbs weiter.

Wenn ich die Thumbs auf links einstelle, dann passiert das leider nicht. Die bleiben oben kleben. (Nach unten bekomme ich die auch. Aber nicht nach links.) Eine Höhe für das Karussell hatte ich angegeben, aber auch das hat nicht zum Erfolg geführt. Hab dann alles mögliche ausprobiert, mit den Größen des Karussells usw.

Was mache ich falsch?

VG
Julia

Hallo elfische Juletomate :D

wie hast du die Höhe für das Thumbnail-Karussell eingestellt? Bei den vertikalen Thumbs mußt du bei diesen die Höhe angeben - also wenn dein Bild z.B. 500px dann sollte die Höhe für das Thumbs-Karussell ebenfalls 500px betragen. Evtl. ist auch noch die Angabe der Breite sinnvoll.

Zu einem Update im ER kam ich heute noch nicht. Irgendwas spukt da noch herum und ich versuche es die Tage zu reparieren.

Liebe Grüße...
...Dirk

Hallo Dirk,

oh weh oh weh.....
(Schlimm, das ich mich nicht damit anfreunden kann, denn CFS einfach so zu benutzten wie er toll funktioniert und dann auch seine Größe hübsch anpasst. Es läßt mich einfach nicht los.)

Also, das mit der Vertikalen Navi hab ich hinbekommen.
Dann wird aber das Hauptbild unter die Navi gedrückt. http://www.mangagirl-tv.de/index.php/people.html

Das Problem mit dem Nicht-Schrumpfen der Thumbs hab ich dann natürlich auch. Die Lösung dazu ist erstmal in weite Ferne gerückt, denn ich hab mir nun was ganz Schlaues überlegt, was aber so wohl nicht ganz funktioniert:

Meine Idee, um eine vertikale Navi in die linke Spalte zu bekommen war, einen neuen CFS in einem neuen Artikel in die Linke Spalte zu stellen. Damit das Hauptbild nicht (fast nicht) angezeigt wird hab ich ihm eine Breite von 1px verpasst. Das da unten jetzt so ein Mini-Fleck ist sieht man eh kaum. (Den könnte ich ja per CSS auch noch woanders hin verschieben).

Beim CFS in der Hauptspalte hab ich nun die Ansicht der Thumbs ausgestellt.

http://www.mangagirl-tv.de/index.php/baby.html

Soweit so gut. Jetzt wollte ich die beiden synchronisieren, aber, oh graus, ich sehe das klappt nur, wenn ich zwei Galerien in einem Artikel habe. Die zu trennen führt dann leider dazu das ich sie nicht mehr vereinen kann. :(
Kann ich das irgendwie umgehen. Sicherlich nicht oder?
Das wäre dann DIE Lösung damit mir vertikal im Left-Bereich die korrekten Vorschaubilder für den Hauptbereich gezeigt werden. Dann hab ich zwar immer noch das Problem, daß die Thumbs nicht mitschrumpfen, aber dazu fällt mir evt. noch was ein.

Für Profis, ist das, was ich da gerade mache sicherlich Flickwerk und soll so nicht sein, aber mit meinen ganzen (noch) Wissenslücken komme ich sonst nicht zum Ziel...

Vielleicht fällt Dir noch was ein. Wenn nicht dann baue ich wahrscheinlich auf horizontale Thumbs oben um und mit dem Left-Bereich lasse ich mir dann auch noch irgendwas einfallen.....

Mein Hirn grübelt weiter, während ich mich um die anderen Seiten meiner Page kümmere.

Tomatige Elfengrüße
Julia

Hallo Julia,

ich bin wirklich beeindruckt von deiner Kreativität. Du sprichst von Dir als "Amateurin" kommst aber auf echt tolle Ideen. Da könnten sich ein paar der echten Amateure eine Scheibe abschneiden. ;D

Allerdings - und das tut mir echt leid es so zu sagen - geht es auf diesem Weg leider nicht. Aber es gibt natürlich einen Weg, allerdings ist der für dich mit etwas höherem Aufwand verbunden. Dynamisch skalierende responsive Bilder in Kombination mit Thumbnails der gleichen Art und Weise habe ich wie gesagt noch nicht hinbekommen. Das überfordert dann selbst mich als "Profi". ;)

Was du machen kannst ist folgendes:

Bei deinem Thumbnail-Slider deaktivierst du die Thumbnails und läßt stattdessen die "großen" Bilder kleiner skalieren auf deine Thumbnail-Größe. Du legst für diesen Slider eine eigene Konfiguration an wo du die Laufrichtung auf "runter" änderst und die Größen des Sliders dort festlegst. Dann hast du einen Slider, der viele kleine Bilder darstellt, die vertikal angeordnet sind - genaus so wie der Thumbnail-Slider jetzt ist.

(Der kleine zuschaltbare Thumbnail-Slider ist nichts anderes als das)

Und jetzt kommt der etwas kompliziertere Part. Die beiden Slider müssen verknüpft werden. Das geht in dem Fall nicht über die Synchronisation, denn das große Bild soll ja nicht geändert werden nur weil man in den kleinen Bildern die Scroll-Pfeile benutzt hat. Du mußt also die beiden Slider über jQuery-Klick-Events verbinden. Also genau das machen, was ich intern mache, wenn man die Thumbnails hinzu schaltet.

Richtung kleine Bilder -> große Bilder:

PHP-Code:

---

    $('#caroufredsel_IDkleinerSlider > div').click(function() {
var id = $(this).attr('id');
$('#caroufredsel_IDgroßerSlider').trigger('slideTo', [$('#' + id)]);
}).css('cursor', 'pointer'); 


---

Das fügst du ganz unten im Template vor

PHP-Code:

---

    });
})(jQuery); 


---

ein.

Richtung große Bilder -> kleine Bilder:

da habe ich gerade keine Muse, das ergänze ich dir noch.

Aber leg mir doch mal bitte einen Backend-User auf deiner Seite an, dann kann ich dir dabei helfen. Das Aufschreiben dauert 3 Mal so lange, als das machen... :(

Viele Grüße...
...Dirk

Zitat:

---

Zitat von Dirch

Hallo Julia,

ich bin wirklich beeindruckt von deiner Kreativität. Du sprichst von Dir als "Amateurin" kommst aber auf echt tolle Ideen. Da könnten sich ein paar der echten Amateure eine Scheibe abschneiden. ;D

---

:D DANKE! ...aus der Not heraus hab ich die wildesten Einfälle.

Habe es geschafft das wie beschrieben umzubauen. Den komplizierten Part hab ich noch nicht gestartet.
Ein Problem gibts aber bei dem Abspielverhalten hoch oder runter. Die Galerie wird nur angezeigt, wenn ich das Fenster einmal kurz verkleinere und wieder vergrößere. Hab den Fehler leider nicht gefunden, diverse Einstellungen probiert und nur durch Zufall gesehen, das es so o. ä. geht, weil ich den Firebug mal zu und wieder aufgemacht habe. Komisch....

Würde mich echt freuen, wenn Du das machst. Schonmal Danke dafür vorab. (Schick Dir gleich ne PM mit den Daten)

Die alten Templates kann ich dann aber wie bisher noch verwenden oder? Denn sollte ich mich dann für eine andere Ansicht des CFS entscheiden dann schalte ich einfach wieder auf die zurück, oder?
Ich schwanke gerade noch immer auf Grund der nicht dynamisch skalierenden Thumbs, entweder ein komplett anderes Layout für mobile Seiten einzufügen oder doch auf CFS horizontal umzustellen.
Mein Plan war ja eigentlich mit Umstellung auf 3.0 alles in einem zu schaffen. ....Pläne...zt zt zt....
(Nach vier Tagen hier vor dem Rechner ist mein Hirn leider total übervoll und sagt mir es hat Grenzen. ;) )

Ich esse mal. Vielleicht kann ich dabei ne Entscheidung treffen.
Merci und Gruß
Julia

ja es gibt neue Templates und du kannst das alte dann einfach wieder aktivieren. Ich warte dann aber noch bis ich etwas mache und du vom Essen erkenntnisreicher wurdest. :D Sonst mache ich mir nachher die Arbeit umsonst, weil du dann alles gaaaaanz anders machen willst. Also warte ich auf dein Konzept. =)

http://coolcarousels.frebsite.nl/

Hier kannst du sehen was Fred (der Slider-Entwickler) alles mit dem Slider bastelt. Allerdings sind 90% der Beispiele dort individuell und so leider in der Erweiterung nicht allgemein abbildbar. Da muß man dann je nachdem mehr oder weniger manuell nacharbeiten in den Templates...

Hallo Dirk,

ja, die Fred-Seite kenne ich und finde die Layouts fast alle total super. Aber genau das, was Du sagst ist der Punkt: Die meisten muß man selber umbauen und das verstehe ich nur zu kleinen Teilen.

Essen und mal den PC verlassen hat leider noch keine Entscheidung gebracht. Nur teilweise und dadurch kommen grad leider mehr Fragen als Antworten.

Ich denke es wäre sinnvoll wieder "zurück zu rudern". Mein Wissen reicht einfach nicht aus und auf Dauer mag ich das dann alles trotz Funktionalität auch praktisch.

Trotzdem DANKE für Deine super Hilfe. Ich hab wieder einiges gelernt. :cool:

Zwei Fragen hab ich noch. (Ich weiß die gehört sicherlich woanders hin ins Forum - aber ich hab schon soviel gesucht und nur teilweise Antworten gefunden)

1. Wenn ich ein mobiles Layout einrichte, was passiert dann intern? Also anders beschrieben. Ab wann wird ein Endgerät als mobil eingestuft? I-Pads auch schon oder?
Denn das ist für meine Planung der Layouts wichtig.

2. Wenn ich ein Bild innerhalb eines Artikels (und da innerhalb einer Tabelle) einfüge. Wie hier http://www.mangagirl-tv.de/index.php/about.html,
dann schrumpft das leider nicht mit. Ich hatte das mal irgendwie hinbekommen, mit nem anderen Bild, aber weiß nicht mehr wie. In einigen Browsern z. B. Chrome, wird das Bild eh schon verkleinert angezeigt, was so auch nicht ideal ist. Das soll ja seine volle Größe haben, solange es genug Platz hat.

Herzlichen Dank und Gruß
Julia

Schönen guten Abend Julia,

ja manchmal tut es gut den PC zu verlassen. Ich war bis vorhin noch im Wald. :)

Also mit zurückrollen meinst du dann, daß du dann doch keine kleinen Bilder vertikal links mehr haben möchtest? Ich also nichts mehr machen soll?

zu 1. es gibt da zwei Ansätze. Zum Einen bekommen Mobile-Geräte im body-Tag die Klasse "mobile" zugewiesen. Wenn du in der Seitenstruktur ein spezielles Layout für mobile Seiten einträgst würde dies dann verwendet werden. Da kannst du z.B. eine andere Navi verwenden oder best. Module weglassen. Zum anderen ist es so, daß ein Media-Query bei 768px Breite gesetzt ist wo dann bei kleinerer Größe durch den Holy-Grail die Spalten #main, #left und #right untereinander gesetzt werden.

zu 2. nun wenn nicht genug Platz da ist und die Bilder eine % Größe haben, dann werden sie eigentlich dynamisch angepaßt. Wenn ein Bild nicht unter eine best. Größe kommen soll, kann du noch ne min-width setzen, dann wird es nicht kleiner als diese Größe. Gerade im dynamischen Umfeld sollte/muß man mit min-/max-width Angaben arbeiten.

Grundsätzlich solltest du dir aber ein Layout gestalterisch aufzeichnen und dann anhand dessen das Layout umsetzen. Mein Ding ist das nicht deshalb bin ich auch Entwickler und kein Designer. =)

Hier http://www.contao-fuer-webdesigner.de/ kannst du ein ganz schönes Beispiel sehen - auch mit einem alternativen Menü für den kleinen Viewport bzw. für die mobile Navigation...

Liebe Grüße...
...Dirk

PS: du hast beim Hochspringen deine Schuhe verloren. ;)

Zitat:

---

Zitat von Dirch

Also mit zurückrollen meinst du dann, daß du dann doch keine kleinen Bilder vertikal links mehr haben möchtest? Ich also nichts mehr machen soll?

---

Genau! Ich werde mir nen hübschen CFS mit horizontalen Thumbs bauen. Den Leftbereich schmeiße ich wahrscheinlich eh komplett raus, denn dank HolyGrail wandert mein Logo im Left immer nach unten bei verkleinern. Das HolyGrail bleibt so wie es ist. Davon mal abgesehen wüßte ich gar nicht wie ich das ändern kann und ist auch völlig sinnfrei das überhaupt zu machen. Also komme ich um einen Umbau nicht herum. Aber das schaff ich.... ;)

Zitat:

---

Zitat von Dirch

Zum anderen ist es so, daß ein Media-Query bei 768px Breite gesetzt ist wo dann bei kleinerer Größe durch den Holy-Grail die Spalten #main, #left und #right untereinander gesetzt werden.

---

Das verstehe ich zum Teil alles schon ganz gut und die Wissenlücken versuche ich grad mit Contao Konferenz 2013 - Workshop "Responsive Contao" zu füllen.

Aber eigentlich wollte ich wissen, ob ein i-pad oder anderes Tablet auch immer automatisch als Mobiles Gerät eingestuft wird? Also dann das mobile Layout erscheint?! Ich möchte nämlich eigentlich erreichen, das nur bei wirklich kleinen Ansichten, also Handys dieses angezeigt wird.

Zitat:

---

Zitat von Dirch

zu 2. nun wenn nicht genug Platz da ist und die Bilder eine % Größe haben, dann werden sie eigentlich dynamisch angepaßt. Wenn ein Bild nicht unter eine best. Größe kommen soll, kann du noch ne min-width setzen, dann wird es nicht kleiner als diese Größe. Gerade im dynamischen Umfeld sollte/muß man mit min-/max-width Angaben arbeiten.

---

Danke, das probiere ich mal aus, bzw. guck mir überhaupt erstmal an, was ich da für Einstellungen gewählt habe.

Zitat:

---

Zitat von Dirch

Grundsätzlich solltest du dir aber ein Layout gestalterisch aufzeichnen und dann anhand dessen das Layout umsetzen.

---

Mein Hirn qualmt nicht nur auf Grund der ganzen Programmierung es kann auch parallel noch geistige Layouts erstellen. Die Seite ist also gedanklich schon fast fertig umgebaut.

Zitat:

---

Zitat von Dirch

PS: du hast beim Hochspringen deine Schuhe verloren. ;)

---

...Die fliegen irgendwo ganz rechts. Dazu ist der sichtbare Bildausschnitt zu schmal. Hahaha.....

VG

Hallo Julia,

wenn du gerade den 2013er Workshop studierst: Folie 43 hilft dir bei der Frage nach "Was wird als welches Gerät erkannt".

Du findest die von Contao definierten Zuweisungen in der Datei "system/config/agents.php".

Übrigens: ein seit langem wunderbarer, weil kreativ und konstruktiver Thread - dit macht Laune wa ;)

Zitat:

---

Zitat von Juletomate

Aber eigentlich wollte ich wissen, ob ein i-pad oder anderes Tablet auch immer automatisch als Mobiles Gerät eingestuft wird? Also dann das mobile Layout erscheint?! Ich möchte nämlich eigentlich erreichen, das nur bei wirklich kleinen Ansichten, also Handys dieses angezeigt wird.

---

Für dich frisch aus dem Quellcode von Contao gefischt:

PHP-Code:

---

    'Macintosh'     => array('os'=>'mac',        'mobile'=>false),
    'Windows CE'    => array('os'=>'win-ce',     'mobile'=>true),
    'Windows Phone' => array('os'=>'win-ce',     'mobile'=>true),
    'Windows'       => array('os'=>'win',        'mobile'=>false),
    'iPad'          => array('os'=>'ios',        'mobile'=>false),
    'iPhone'        => array('os'=>'ios',        'mobile'=>true),
    'iPod'          => array('os'=>'ios',        'mobile'=>true),
    'Android'       => array('os'=>'android',    'mobile'=>true),
    'Blackberry'    => array('os'=>'blackberry', 'mobile'=>true),
    'Symbian'       => array('os'=>'symbian',    'mobile'=>true),
    'WebOS'         => array('os'=>'webos',      'mobile'=>true),
    'Linux'         => array('os'=>'unix',       'mobile'=>false),
    'FreeBSD'       => array('os'=>'unix',       'mobile'=>false),
    'OpenBSD'       => array('os'=>'unix',       'mobile'=>false),
    'NetBSD'        => array('os'=>'unix',       'mobile'=>false), 


---

Alles wo 'mobile' => true steht wird als mobiles Gerät gewertet. Das iPad demnach nicht. =)

VIELEN DANK! Jetzt bin ich schlauer und auch noch gut gelaunt. (War ich vorher schon, aber es geht noch besser) :D
Von den Geräten / Systemen kenn ich zwar nur die Hälfte aber das ist glaub ich wurscht. Die Lücken lass ich erstmal offen...

Zitat:

---

Zitat von planepix

wenn du gerade den 2013er Workshop studierst: Folie 43 hilft dir bei der Frage nach "Was wird als welches Gerät erkannt".

---

Ich hänge bei Folie 30, weil ich beim Lesen immer wieder auf tolle Sachen stoße die ich sofort ausprobieren will. Ach, hätte ich doch 2 Bildschirme und 2 Köpfe... ;)

...na dann mal los, auf ins fröhliche Doppel-Layouten!

Ein schönes WE Euch beiden!

Dankesehr. Mach nicht zu viel auf einmal - ach das können ja nur männliche Wesen nicht. :P

Schlaf gut dann irgendwann mal und morgen gibt's dann gen Abend die neue korrigierte Version vom Slider. Halte mich mal auf dem Laufenden mit deiner Seite. Bin dann doch gespannt was du daraus basteln wirst. :)

*wink*

Dirk