Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 02. Juli 2020 12:03

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 857

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

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:

[== 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)

Offline

#2 02. Juli 2020 12:43

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.884
Webseite

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

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?


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#3 02. Juli 2020 13:11

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 857

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

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.


[== 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)

Offline

#4 03. Juli 2020 06:43

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.884
Webseite

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

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.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#5 03. Juli 2020 07:43

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 857

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

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)

Offline

#6 03. Juli 2020 09:28

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 857

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

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)

Offline

#7 03. Juli 2020 09:35

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.884
Webseite

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

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

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


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#8 03. Juli 2020 09:44

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 857

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

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)

Offline

#9 03. Juli 2020 10:23

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.884
Webseite

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

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.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#10 03. Juli 2020 11:21

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 857

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

nockenfell schrieb:

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.

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.

Offline

#11 03. Juli 2020 13:58

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.884
Webseite

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

Gerne.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline