Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Rocksolid Slider innerhalb eines Akkordeons - Bild erst nach klick angezeigt

  1. #1
    Contao-Nutzer
    Registriert seit
    30.05.2011.
    Ort
    Köln
    Beiträge
    88

    Standard Rocksolid Slider innerhalb eines Akkordeons - Bild erst nach klick angezeigt

    Hallo,
    ich verwende den rocksolid-slider v. 1.3.2 unter Contao 3.2.12.
    Bei normaler Verwendung funktioniert der Sliden ganz normal, wenn ich diesen in eine Akkordeon legen, werden die Bilder erst nach dem ersten Klick auf die Steuerung richtig angezeigt. Sonst wird beim ersten Aufruf der Seite das Bild in 10 x 10 px gezeigt.
    Gleichfalls geht die Autopayfunktion beim Slider dann nicht. Wenn ich einemal auf ein Bild klicke ist, wird der Slider normal angezeigt, unabhänig wie oft ich das Akkordeon auf oder zuklappe.

    akkordeon.jpg

    Gruß Mike

  2. #2
    Contao-Nutzer Avatar von RockSolid Themes
    Registriert seit
    29.05.2012.
    Beiträge
    205
    Partner-ID
    8945

    Standard

    Hallo Mike,

    du kannst dir ein angepasstes j_accordion.html5 Template anlegen mit folgender Ergänzung:

    Code:
    <script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo $GLOBALS['TL_ASSETS']['JQUERY_UI']; ?>/jquery-ui.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $(document).accordion({
            // Put custom options here
            heightStyle: 'content',
            header: 'div.toggler',
            collapsible: true
          });
          var activate = function(tog) {
            var tgs = $('div.toggler');
            tgs.removeClass('active');
            tog.addClass('active');
            tgs.next('div.accordion').attr('aria-hidden', 'true');
            tog.next('div.accordion').attr('aria-hidden', 'false');
            /* Anpassung Anfang */
            tog.next('div.accordion').find('.mod_rocksolid_slider').each(function() {
              $(this).data('rstSlider').resize();
            });
            /* Anpassung Ende */
          };
          $('div.toggler').focus(function() {
            $('div.toggler').attr('tabindex', 0);
            $(this).attr('tabindex', -1);
          }).blur(function() {
            $(this).attr('tabindex', 0);
          }).click(function() {
            activate($(this));
          }).keypress(function(event) {
            if (event.keyCode == 13) activate($(this));
          });
        });
      })(jQuery);
    </script>

  3. #3
    Contao-Nutzer
    Registriert seit
    30.05.2011.
    Ort
    Köln
    Beiträge
    88

    Daumen hoch

    Danke,

    probier ich gleich mal aus


    Edit: Das war es !!!
    Geändert von cmike (20.11.2014 um 09:55 Uhr)

  4. #4
    Contao-Nutzer
    Registriert seit
    28.01.2011.
    Ort
    Winterthur, Schweiz
    Beiträge
    169

    Standard

    Zitat Zitat von RockSolid Themes Beitrag anzeigen
    Hallo Mike,

    du kannst dir ein angepasstes j_accordion.html5 Template anlegen mit folgender Ergänzung:

    Code:
            /* Anpassung Anfang */
            tog.next('div.accordion').find('.mod_rocksolid_slider').each(function() {
              $(this).data('rstSlider').resize();
            });
            /* Anpassung Ende */
    Hallo

    Wir haben deine Zeilen zur Anpassung des accordion-scripts in unser eigenes jquery-script zum togglen von selbstgebauten Elementen eingefügt und versucht an unsere Variabeln anzupassen:



    Code:
    jQuery(document).ready(function () {
    
    $('.content-drawer').hide();
    
    $('.tab').click(function() {
        var $this = $(this);
        var target = $(this.rel);
    
    
        $this.closest('li').addClass('active focus');
        // Add the classes to the closest li of the clicked anchor
        $('.tab').not($this).closest('li').removeClass('active focus');
        // Remove the classes for the non-clicked items
        $('.content-drawer').not(target).slideUp();
        // Slideup the other contents
        
        target.delay(0).slideToggle();
        // Toggle the current content
            /* Anpassung Anfang */
            target.find('.mod_rocksolid_slider').each(function() {
              target.data('rstSlider').resize();
            });
            /* Anpassung Ende */
        if (target.is(':visible')) {
            // Only if the target is visible remove the active class
            $this.closest('li').removeClass('active');
        } 
        return false;
    
    });
    
    });
    Leider funktioniert die Ansprechung über target.data('rstSlider').resize(); anscheinend nicht.
    Kannst Du einen Fehler in obigem Code entdecken?

    Danke für deine Hilfe.
    Nick

  5. #5
    Contao-Nutzer Avatar von RockSolid Themes
    Registriert seit
    29.05.2012.
    Beiträge
    205
    Partner-ID
    8945

    HTML $(this) anstatt target

    Hallo Nick,

    die Anpassung sollte vermutlich folgendermaßen aussehen:

    Code:
    /* Anpassung Anfang */
    target.find('.mod_rocksolid_slider').each(function() {
      $(this).data('rstSlider').resize();
    });
    /* Anpassung Ende */

  6. #6
    Contao-Nutzer
    Registriert seit
    28.01.2011.
    Ort
    Winterthur, Schweiz
    Beiträge
    169

    Standard

    Hallo RST

    Danke für deinen Tipp. Leider hat es noch nicht ganz so funktioniert. Das resize() greift immer erst sozusagen beim slideUp() beim Click auf das Target-Element:
    Siehe mal hier:
    http://194.126.200.53/~elfstern/megacarrier/
    Klicke dazu auf das erste Bild oben links (Häuser). Darin befindet sich der rocksolidslider.

    Code:
    jQuery(document).ready(function () {
    
    $('.content-drawer').hide();
    
    $('.tab').click(function() {
        var $this = $(this);
        var target = $(this.rel);
    
    
        $this.closest('li').addClass('active focus');
        // Add the classes to the closest li of the clicked anchor
        $('.tab').not($this).closest('li').removeClass('active focus');
        // Remove the classes for the non-clicked items
        $('.content-drawer').not(target).slideUp();
        // Slideup the other contents
        
        target.delay(0).slideToggle();
        // Toggle the current content
    	/* Anpassung Anfang */
    	target.find('.mod_rocksolid_slider').each(function() {
    	  $(this).data('rstSlider').resize();
    	});
    	/* Anpassung Ende */
        if (target.is(':visible')) {
            // Only if the target is visible remove the active class
            $this.closest('li').removeClass('active');
        } 
        return false;
    
    });
    
    });

  7. #7
    Contao-Nutzer Avatar von RockSolid Themes
    Registriert seit
    29.05.2012.
    Beiträge
    205
    Partner-ID
    8945

    HTML setTimeout(...)

    Da durch delay(0) die Funktion slideToggle() verzögert wird, greift resize() vermutlich zu früh. Versuche bitte folgendes:

    Code:
    /* Anpassung Anfang */
    setTimeout(function() {
      target.find('.mod_rocksolid_slider').each(function() {
        $(this).data('rstSlider').resize();
      });
    }, 0);
    /* Anpassung Ende */
    Eventuell muss du dabei 0 mit 10 oder 100 ersetzen.

  8. #8
    Gesperrt
    Registriert seit
    02.11.2012.
    Beiträge
    52

    Standard

    Hab das mal in irgendeine meiner js Dateien geschrieben, ohne die j_accordion anzupacken.
    HTML-Code:
    (function($) {
    	$( document ).ready(function(){
    		$('.ce_accordionStart').click(function(){
    			setTimeout(function() {
    				$('.ce_accordionStart').find('.mod_rocksolid_slider').each(function() {
    						$(this).data('rstSlider').resize();
    				});
    			}, 100);
    		});
    	});
    })(jQuery);
    Geändert von qf_rigo (18.04.2016 um 15:25 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •