Joomla DJ-Image Slider flexibel und responsive

Im Moment bin ich am schauen, ob ich meine Website demnächst mal auf dem Responsive Framework von Gavick aufsetze.

Da ich dann erst mal meine Inhalte weitestgehend übernehmen möchte, war dass erste dass mir auffiel, dass meine Slideshows im Headerbereich nicht mehr funktionieren würden.

Diese beruhen auf dem DJ-Imageslider was den Vorteil hat, dass hier mootools zum Einsatz kommt und außerdem ist die Backendverwaltung der Bilder recht schön gelöst.

Am Ende war es doch etwas fummeliger als gedacht, und ließ sich auch nicht per überschreiben des Modules lösen, so dass dieser Workaround nicht updatesicher ist.

Tip: Macht vorher ein Update des Modules, das ganze ist nicht Update sicher, das ganze funktioniert nur wenn der Slider Type auf Fade gestellt ist.


modules/mod_djimageslider/assets/slider.js

if (settings.slider_type == 2) { // fade
   slides.setStyle('position', 'absolute');
   slides.setStyle('top', 0);
   slides.setStyle('left', 0);
   $(slider).setStyle('width', settings.slide_size);
   slides.setStyle('opacity',0);
   slides[0].setStyle('opacity',1);
   slides[0].setStyle('z-index','10');
   $('navigation' + settings.id).setStyle('z-index',20);
   slides.set('tween',{property: 'opacity', duration: options.duration});

durch

  if (settings.slider_type == 2) { // fade
   slides.setStyle('position', 'absolute');
   slides.setStyle('top', 0);
   slides.setStyle('left', 0);
                        slides.setStyle('display', 'none');
   $(slider).setStyle('width', settings.slide_size);
   slides.setStyle('opacity',0);
   slides[0].setStyle('opacity',1);
   slides[0].setStyle('z-index','10');
                        slides[0].setStyle('position','relative');
                        slides[0].setStyle('display','block');
   $('navigation' + settings.id).setStyle('z-index',20);
   slides.set('tween',{property: 'opacity', duration: options.duration});

ersetzen und...

   slides[current_slide].get('tween').set(1);
   slides[prev_slide].get('tween').start(0).chain(function(){
    slides[prev_slide].setStyle('z-index',0);
    slides[current_slide].setStyle('z-index',10);
    is_fading = false;
   });

durch

  function makeFade(prev_slide){
   slides[current_slide].get('tween').set(1);
   slides[prev_slide].get('tween').start(0).chain(function(){
                                slides[prev_slide].setStyle('display','none');
    slides[current_slide].setStyle('display','block');
                                slides[prev_slide].setStyle('position','absolute');
    slides[current_slide].setStyle('position','relative');
    slides[prev_slide].setStyle('z-index',0);
    slides[current_slide].setStyle('z-index',10);
    is_fading = false;
   });

ersetzen



In eine CSS Datei eurer Wahl

.djslider-loader,
.djslider,
.slider-container,
.djslider-loader .slider-container ul,
.djslider-loader .slider-container ul li a, 
.djslider-loader .slider-container ul li a img { width: 100%!important;  display: inline-block!important; overflow:  hidden; }

.djslider-loader,
.djslider,
.slider-container { height: 100%!important; position: relative!important;}

#gkToolbar .djslider-loader .slider-container ul { position: relative!important;  } 
#gkToolbar .djslider-loader .slider-container ul { height:100%!important; }
#gkToolbar .djslider-loader .slider-container ul li { height:100%!important; width: 100%!important;  display: none; overflow:  hidden;}
.djslider-loader .navigation-container { position: absolute; top: 0px!important; margin-top: -120px!important;margin-bottom: 120px!important;}

Wobei '#gkToolbar' nur wichtig ist, wenn dass Responsive Template von Gavick verwendet wird.