[GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

antibart · 02. Juli 2020 12:03

Hallo Leute,

ich stehe wieder mal auf dem Schlauch.

Für eine Produktgalerei-Slideshow benutze ich lightslider.js

http://sachinchoolur.github.io/lightsli … mples.html

Dafür habe ich ein eigenes Summary-Template in LISE erstellt. {LISEProd template_summary='slide'}

Es funktioniert fabelhaft: Im Editor eingefügt oder auch im Haupttemplate. Auch im Default-Summarytemplate oberhalb der foreach-Schleife funktioniert es.

Wo der lightslider aber nicht funktioniert, ist im Detailtemplate von LISE. Aber genau dort soll es hin. Die Bilder werden zwar angezeigt, aber nicht als animierte Slidegallery, sondern als normale Liste.

Eigene Stylesheets, die die galerie-CSS überschreiben, dürften es nicht sein, denn dass Detailtemplate hat ansonsten keinen Code. Nur oben genannten LISE-Tag.

Bevor sich jemand fragt, welchen Sinn es macht, das Summary-Template im Detailtemplate aufzurufen: Das ist momentan nur ein Test-Status. Den Weg über das Summary-Template habe ich der Einfachheit halber nur gewählt, um auszuschließen, dass der Fehler im Lightslider-Code/CSS/Settings liegt.

Die eigentliche Frage lautet also: Warum funktioniert der Lightslider überall, außer im Detail-Template? Er funktioniert dort auch nicht, wenn ich ihn wie vorgesehen direkt einbaue.

Der Form halber hier dennoch das Template:

Hier klicken, um den Code zum Kopieren zu markieren

[== html javasvript smarty ==]
{literal}  <script>              $(document).ready(function() {
        $('#responsive').lightSlider({
            item:3,
           auto:true,
pager:false,
loop:true,
            slideMove:1,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed:600,
            responsive : [
                {
                    breakpoint:800,
                    settings: {
                        item:3,
                        slideMove:1,
                        slideMargin:6,
                      }
                },
                {
                    breakpoint:480,
                    settings: {
                        item:2,
                        slideMove:1
                      }
                }
            ]
        });  
      });
</script>
   
{/literal}

<ul id="responsive">
{if $items|@count > 0}
	{foreach from=$items item=item}
	
   
      <li>
          <a href="{$item->url}" title="{$item->title}"><img src="uploads/produkte/{$item->fielddefs.bild.value}" title="{$item->title}" alt="{$item->title}" /></a>
      </li>
     
    

	{/foreach}
	</ul>

{/if}

Beitrag geändert von antibart (02. Juli 2020 12:42)

nockenfell · 02. Juli 2020 12:43

Wie sieht die Ausgabe aus?

Im übrigen: Das </ul> sollte nach dem {/if} kommen. Das wird zwar nicht das Problem sein, könnte aber wenn es keine Bilder hat, zu Problemen führen, da dann das <ul> nicht geschlossen würde.

Hast du allenfalls eine URL auf der man das anschauen kann?

antibart · 02. Juli 2020 13:11

nockenfell schrieb:

Wie sieht die Ausgabe aus?

In der nicht funktionierenden Version im Detailtemplate: Wie eine ganz normale, unformatierte Liste mit Bildern. Also ohne jegliches CSS oder JS. Es ist, als würde hier jquery, lightslider.js und lightslider.css ignoriert.

Bild 1
Bild 2
Bild 3

In allen anderen Templates, wo es funktioniert: Halt eine Slide-Karussell-Galerie. Paar bilder nebeneinander, die automatisch loopen, aber mit Kontrollbuttons oder Wischen auch gesteuert werden können.

nockenfell schrieb:

Im übrigen: Das </ul> sollte nach dem {/if} kommen. Das wird zwar nicht das Problem sein, könnte aber wenn es keine Bilder hat, zu Problemen führen, da dann das <ul> nicht geschlossen würde.

Danke. Ist mir eben beim Einfügen hier auch aufgefallen und im Original schon korrigiert.

nockenfell schrieb:

Hast du allenfalls eine URL auf der man das anschauen kann?

Im Moment herrscht dort Test-Chaos. Ich kann dir den Quelltext der Detailansicht zeigen.

Hier klicken, um den Code zum Kopieren zu markieren

[== html ==]
<!doctype html>
<html lang="de"><head>

        <title>Produkte </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<base href="http://dev.domain.com/" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


        <link rel="stylesheet" type="text/css" href="http://dev.domain.com/tmp/cache/stylesheet_combined_6aa0ca0772d52a4c4a998a3298a88.css" />

<script src="js/jquery-2.2.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="js/lightslider.js"></script>
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
<script src="js/lightgallery.js"></script>

</head><body><script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $(".sub a, .parallax a, .oben").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
<div id="top" class="anker"></div>
        <header id="header">
                <div id="headcenter"><div id="logo" role="banner"><a href="https://www.domain.com"><img src="uploads/images/logo.jpg" title="Startseite" alt="Startseite" /></a></div>
<nav id="menu">





<ul><li><a href="http://dev.domain.com/">Home Page</a></li><li class="currentpage"><a class="currentpage" href="http://dev.domain.com/produkte.html">Produkte</a></li><li><a href="http://dev.domain.com/distributoren.html">Distributoren</a></li><li><a href="http://dev.domain.com/referenzen.html">Referenzen</a></li><li><a href="http://dev.domain.com/downloads.html">Downloads</a></li></ul>
        </nav><img src="uploads/images/lang.gif" class="lang">
<nav id="menu-mob">
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>





<ul><li><a href="http://dev.domain.com/">Home Page</a></li><li class="currentpage"><a class="currentpage" href="http://dev.domain.com/produkte.html">Produkte</a></li><li><a href="http://dev.domain.com/distributoren.html">Distributoren</a></li><li><a href="http://dev.domain.com/referenzen.html">Referenzen</a></li><li><a href="http://dev.domain.com/downloads.html">Downloads</a></li></ul>
</div>
<span style="cursor:pointer" onclick="openNav()"><img src="uploads/images/hamburger.png" alt="open" title="open" /></span>
<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>
</nav>
</div>

        </header>


                          <script>              $(document).ready(function() {
        $('#responsive').lightSlider({
            item:3,
           auto:true,
pager:false,
loop:true,
            slideMove:1,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed:600,
            responsive : [
                {
                    breakpoint:800,
                    settings: {
                        item:3,
                        slideMove:1,
                        slideMargin:6,
                      }
                },
                {
                    breakpoint:480,
                    settings: {
                        item:2,
                        slideMove:1
                      }
                }
            ]
        });
      });
</script>

<ul id="responsive">



      <li>
         <img src="uploads/produkte/viper.jpg" />
      </li>

      <li>
         <img src="uploads/produkte/viper2.jpg" />
      </li>
  <li>
         <img src="uploads/produkte/viper3.jpg" />
      </li>
  <li>
         <img src="uploads/produkte/viper4.jpg" />
      </li>
  <li>
         <img src="uploads/produkte/viper-26.jpg" />
      </li>
  <li>
         <img src="uploads/produkte/viper-26.jpg" />
      </li>
  <li>
         <img src="uploads/produkte/viper-26.jpg" />
      </li>


        </ul>







<footer>
<div class="center foo">
<div class="foot"></div><div style="clear:both;"></div>
</div>
</footer><div class="oben"><a href="#top"><img src="uploads/images/top.gif" alt="Nach oben" title="nach oben"></a></div>

    <script src="js/viewportchecker.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.title, .li-text, .re-text, .headl2, .gal-img, .adress, .li-top').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeInUp',
        offset: 100
       });
});
</script>
</body>
</html>
html

Beitrag geändert von antibart (02. Juli 2020 13:29)

nockenfell · 03. Juli 2020 06:43

Auf den ersten Blick sehe ich keinen offensichtlichen Fehler. Ich habe das ganze bei mir eingerichtet. Da funktioniert der Slider wie gewünscht out of the box.

Gibt es irgend einen Javascriptfehler in der Konsole? Mach doch mal eine statische HTML Seite und reduziere diese bis es funktioniert. Dann kannst du schauen wo es klemmt.

antibart · 03. Juli 2020 07:43

nockenfell schrieb:

Mach doch mal eine statische HTML Seite und reduziere diese bis es funktioniert. Dann kannst du schauen wo es klemmt.

Ich fall vom Glauben ab. Als statische Seite - also 1:1 der Code, der im Frontend ausgegeben wird, in ein HTML-Doc kopiert - funktioniert es.

Wenn ich dagegen das Basistemplate mal testweise auf das allernötigste reduziere, also im Head nur die CSS und die lightslider-JS und im Body nur den Content-Tag: Keine Chance.

Das ist rätselhaft.

nockenfell schrieb:

Javascriptfehler

Wie gesagt: Der Lighslider funktioniert ja überall. Nur nicht an genau dieser Stelle. Und die Konsole meldet auch nichts Relevantes.

ALs letzte Chance versuch ich mal, LISE neu zu installieren. EDIT: Nichts. Ich kapier's nicht.

Beitrag geändert von antibart (03. Juli 2020 08:44)

antibart · 03. Juli 2020 09:28

Schritt weiter.

antibart schrieb:

Und die Konsole meldet auch nichts Relevantes.

Sorry, Irrtum. Sie meldet etwas höchst INteressantes. Die Quelle von jQuery stimmt nicht. JQuery liegt in /js/, nicht produkte/produkt_25/js/...

Laden fehlgeschlagen für das <script> mit der Quelle "http: // dev. domain.com/produkte/produkt_25/js/jquery-2.2.0.min.js".

Uncaught ReferenceError: jQuery is not defined
<anonymous> http:// dev. domain. com/js/lightslider.js:1140

Wenn ich den Pfad zu jQuery absolut eingebe, funktioniert es.

Beitrag geändert von antibart (03. Juli 2020 09:34)

nockenfell · 03. Juli 2020 09:35

smile Du rufst Javascript auch über einen relativen Pfad auf:

Hier klicken, um den Code zum Kopieren zu markieren

<script src="js/jquery-2.2.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="js/lightslider.js"></script>
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
<script src="js/lightgallery.js"></script>

Wenn du das auf /js/.. etc. änderst, dürfte es gehen. Darum funktioniert es wohl auch auf der Übersichtsseite, da du hier wahrscheinlich www.domain.com/seite.html aufrufst und diese relativ im Root liegt und somit der Link stimmt.

antibart · 03. Juli 2020 09:44

nockenfell schrieb:

Wenn du das auf /js/.. etc. änderst, dürfte es gehen.

Siehe edit oben. Den Pfad zu jQuery absolut angeben:

domain . de /js/

...hat das Problem gelöst. Oder eben wie bei dir.

Ich habe echt lange gebraucht, weil ich die Galerie sehr häufig verwende und mir das Problem nicht vorher schon mal begegnet ist.

Beitrag geändert von antibart (03. Juli 2020 10:02)

nockenfell · 03. Juli 2020 10:23

smile Stimmt, das habe ich überlesen. Neben dem jquery müssten auch die anderen Aufrufe eigentlich ein Problem verursachen. Wenn es nun ja klappt, ist alles in Butter.

antibart · 03. Juli 2020 11:21

nockenfell schrieb:

Stimmt, das habe ich überlesen. Neben dem jquery müssten auch die anderen Aufrufe eigentlich ein Problem verursachen. Wenn es nun ja klappt, ist alles in Butter.

Es war auf jeden Fall absehbar, dass es irgendeine lächerlilche Kleinigkeit sein musste, bei der man den Wald vor lauter Bäumen nicht sieht. Aber Danke nochmal für den Konsolentipp. Ist beim ersten Check durch die Lappen gegangen, die Meldung.

nockenfell · 03. Juli 2020 13:58

Gerne.

Forum für CMS/made simple

#1 02. Juli 2020 12:03

[GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#2 02. Juli 2020 12:43

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#3 02. Juli 2020 13:11

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#4 03. Juli 2020 06:43

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#5 03. Juli 2020 07:43

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#6 03. Juli 2020 09:28

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#7 03. Juli 2020 09:35

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#8 03. Juli 2020 09:44

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#9 03. Juli 2020 10:23

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#10 03. Juli 2020 11:21

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

#11 03. Juli 2020 13:58

Re: [GELÖST] LISE: lightslider.js funktioniert nicht in detail-template

Fußzeile des Forums