Artikel rund ums Thema Webdesign und Frontendentwicklung

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.

Details http://www.webdesign-ecommerce.de/2012/07/joomla-dj-image-slider-flexibel-und.html

Was steckt hinter eyeonu webdesign Berlin?

eyeonu webdesign berlin habe ich als Freelancer gegründet. Es handelt sich nach wie vor um ein Einmannunternehmen, das sich auf Frontendentwicklung im Bereich E-Commerce Spezialisiert hat.

Neben der Umsetzung von Designs für Online-Shops gibt es aber auch immer wieder Zeitfenster für kleinere Projekte und Websites bspw. auf Basis von Joomla

Blogeinträge

Magento Transactional Email Conditionals

kürzlich wollte ich in einer Invoice E-Mail für Bestellungen die keine Steuer ausweisen müssten eine extra Nachricht anzeigen. Das...

Zufällige Reihenfolge in Magento Kategorie Listen

Manchmal kann es sinnvoll sein, die Produkte in der Magento Kategorie Ansicht bei jedem Seiten Aufruf zufällig anzuordnen. Dies ist standardmäßig...

Check von SSL Seiten

SSL Gerade E-Commerce Seiten sollten zumindestens im Checkout eine sichere Verbindung über SSL aufgebaut werden. Meistens stellt man jedoch nach der Umstellung...

Joomla ID Nummer in Urls verhindern

Ein Frage die im Zusammenhang mit Joomla URLs sehr häufig auftritt ist, warum werden eigentlich, in einigen URLs, IDs dem...

Rechtschreibprüfung für die Website online durchführen

abcEditierenZum Schreiben kleiner Textpassagen, lässt sich gut die Duden Rechtschreibprüfung verwenden. Wenn man aber eine Website auf Rechtschreibfehler überprüfen möchte...

Favicons in verschiedenen Größen

Die Zeiten, in denen es ausgereicht hat, ein favicon in 16x16 pixel hochzuladen, sind vorbei. Heute verlangen die verschiedenen Devices...

Kontakt Info

  office(@)eyeonu.org
  +49 (0)30 25043398
  +49 (0)30 23320770152
  Hermannstr. 56 Berlin

Our Map


zum Kontaktformular
Definicja opieki zdrowotnej http://polskaaptek.com/ najbliższego obrzęd pomocy apteka