Rocksolid Slider innerhalb eines Akkordeons - Bild erst nach klick angezeigt

[cmike]

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.



Gruß Mike

[RockSolid Themes]

Hallo Mike,

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

<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>

[cmike]

Danke,

probier ich gleich mal aus


Edit: Das war es !!!

[4lmnts]

Hallo Mike,

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

        /* 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:

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

[RockSolid Themes]

$(this) anstatt target

Hallo Nick,

die Anpassung sollte vermutlich folgendermaßen aussehen:

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

[4lmnts]

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.

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;

});

});

[RockSolid Themes]

setTimeout(...)

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

/* 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.

[qf_rigo]

Hab das mal in irgendeine meiner js Dateien geschrieben, ohne die j_accordion anzupacken.

(function($) {
	$( document ).ready(function(){
		$('.ce_accordionStart').click(function(){
			setTimeout(function() {
				$('.ce_accordionStart').find('.mod_rocksolid_slider').each(function() {
						$(this).data('rstSlider').resize();
				});
			}, 100);
		});
	});
})(jQuery);