Imageslider - bildnummer als link

Einklappen
Das ist ein wichtiges Thema.
X
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • 2nuts
    Contao-Nutzer
    • 11.07.2009
    • 106

    #1

    Imageslider - bildnummer als link

    hi.

    ist es möglich statt den "next" und "prev" buttons die nummern der bilder als link unter dem slider darzustellen damit man zu den bildern gezielt springen kann?
  • Schlauchbeutelmaschine
    Contao-Fan
    • 16.06.2009
    • 668

    #2
    Hallo,

    das ist so mit dem Imageslider nicht möglich, außer du baust in ein wenig um.
    Siehe Beispiel 5.
    Du könntest es aber mal mit einem Contentslider probieren z.B. mit dem Noobslider.

    Kommentar

    • wingover
      Contao-Nutzer
      • 07.07.2009
      • 50

      #3
      Hallo,

      der Eintrag ist zwar schon ein paar Tage alt aber ich hab's jetzt erst gesehen.
      Ich habe den Imageslider vor einiger Zeit mal umgebaut, so daß er Javascript-Code ausgibt um die Bildnummern anzuzeigen und klickbar zu machen. Allerdings in einer älteren Version.
      Hier zwei Beispiele:



      Im Prinzip nur ein paar Änderungen in der ContentImageslider.php und ModuleImageslider.php.

      So ca. mitten im Script einfügen:

      PHP-Code:
      $walk['init_1'] = "var myImgCount = document.getElementById('elements" . $objSettings->id . "').getElementsByTagName('img').length;";
            $walk['init_2'] = "var myImgNavi = 'Bild: ';";
            $walk['init_3'] = "for(var i = 1; i <= myImgCount; i++) myImgNavi = myImgNavi + '<a>' + i + '<\/a>';";
            $walk['init_4'] = "document.getElementById('handles').setAttribute('id','handles" . $objSettings->id . "');";
            $walk['init_5'] = "document.getElementById('handles" . $objSettings->id . "').innerHTML = myImgNavi;";
      
            $walk[1] = "onWalk: function(current_index){
                handles" . $objSettings->id . ".removeClass('active');
                handles" . $objSettings->id . "[current_index].addClass('active');
            }";
            $walk[2] = "var handles" . $objSettings->id . " = $$('#handles" . $objSettings->id . " a');";
            $walk[3] = "handles" . $objSettings->id . ".each(function(el,i){el.addEvent('click',V" . $objSettings->id . ".walk.bind(V" . $objSettings->id . ",[i,true]));});";
            $walk[4] = "handles" . $objSettings->id . "[0].addClass('active');"; 
      
      und ein Stück weiter unten erweitern:

      PHP-Code:
      $GLOBALS['TL_HEAD'][] = "<script type=\"text/javascript\">
      <!--//--><![CDATA[//><!--
      window.addEvent('domready',function()
      {
      //is-js-start
          var V" . $objSettings->id . " = new viewer( $$('#elements" . $objSettings->id . " img)' ),
          {
              sizes: {w:" . $arrImageslider[0] . ",h:" . $arrImageslider[1] . "},
              mode: 'rand',
              modes: [" . $EffectType . "],
              fxOptions:{ duration: " . $objSettings->effect_duration . " " . $EffectsExtended . " },
              interval: " . $objSettings->rotation_interval . ",
              " . $walk[1] . "
          });
          $play
          $walk[init_1]
          $walk[init_2]
          $walk[init_3]
          $walk[init_4]
          $walk[init_5]
          $walk[2]
          $walk[3]
          $walk[4]
      //is-js-end
      });
      //--><!]]>
      </script>"; 
      

      Grüzli - Andi
      Zuletzt geändert von wingover; 20.07.2010, 08:43.
      Meine Contao-Erweiterungen

      Kommentar

      • Schlauchbeutelmaschine
        Contao-Fan
        • 16.06.2009
        • 668

        #4
        Hallo Andi,

        danke für das Beispiel!
        Ich werde es mal nach oben stellen.

        Grüße Sabri

        Kommentar

        • mcxico
          Contao-Nutzer
          • 14.05.2010
          • 16

          #5
          Im Prinzip nur ein paar Änderungen in der ContentImageslider.php und ModuleImageslider.php. So ca. mitten im Script einfügen:
          Vielen Dank für diese Lösung, die ich gerade haargenau so für ein Projekt benötige

          Ist es möglich die Anweisung etwas zu konkretisieren? Ich stehe etwas hilflos da wenn ich lese: "so ca. mitten im Script einfügen". Außerdem geht auch nicht draus hervor welche Codezeilen in die ContentImageslider.php und welche in die ModuleImageslider.php gehören.

          Herzlichen Dank!

          Gruß, David

          Kommentar

          • Schlauchbeutelmaschine
            Contao-Fan
            • 16.06.2009
            • 668

            #6
            Hallo David,

            ich habe die mal die Zeilen rausgesucht wo du es einfügst, für das Contentelement.
            Für das Modul ist es ähnlich nur die Zeilenummern können varieren.

            1. Block oberhalb von Zeile 292
            2. Block innerhalb der beiden Klammern der Abfrage

            PHP-Code:
                /* Add CSS to Head */
                if ($JSAdded) 
                {
                    
            $GLOBALS['TL_HEAD'][$JSArrayPos] =    str_replace('/*is-js-end*/', '/*is-js-end*/
            /*is-js-start*/
            ' . $strTplJS . '
            /*is-js-end*/',
            $GLOBALS['TL_HEAD'][$JSArrayPos]);    
            
                } 
                else 
                {
            
                $GLOBALS['TL_HEAD'][] = "<script type=\"text/javascript\">
            <!--//--><![CDATA[//><!--
            window.addEvent('domready',function()
            {
            /*is-js-start*/
            " . $strTplJS . "
            /*is-js-end*/
            });
            //--><!]]>
            </script>";        
                    
                } 
            

            Kommentar

            • mcxico
              Contao-Nutzer
              • 14.05.2010
              • 16

              #7
              Zitat von Schlauchbeutelmaschine Beitrag anzeigen
              ich habe die mal die Zeilen rausgesucht wo du es einfügst, für das Contentelement.
              Wunderbar! Herzlichen Dank!

              Kommentar

              • Kahmoon
                Contao-Urgestein
                • 22.06.2009
                • 5301

                #8
                Servus,

                jetzt steh ich etwas am Schlauch. Welcher Code muss jetzt wo eingefügt werden? Der von wingover oder Schlauchbeutelmaschine?

                Letzteres hab ich in die ModuleImageslider.php an 292 gesetzt...ändert aber nix . Brauche aktuell für ein Projekt ebenfalls eine Nummerierung statt "prev, next". Wäre das nicht über das Template mod_imageslider.tpl möglich? Hier kommt doch sicher auch die Anzahl der Bilder an oder? Das wäre dann quasi auch updatesicher!

                Gruß
                Zuletzt geändert von Kahmoon; 21.01.2011, 12:43.
                VG Frank

                mediastuff.de - Webdesign, SEO und SEA

                Kommentar

                • Schlauchbeutelmaschine
                  Contao-Fan
                  • 16.06.2009
                  • 668

                  #9
                  Hallo!

                  ich werde mir das bei Gelegenheit nochmal anschauen
                  und dir Feedback geben.

                  Grüße Sabri

                  Kommentar

                  • Kahmoon
                    Contao-Urgestein
                    • 22.06.2009
                    • 5301

                    #10
                    Danke. Ich habe inzwischen den Noobslider verwendet. Der bietet genau diese Option. Trotzdem könnte/sollte der Imageslider diese Funktion auch haben
                    VG Frank

                    mediastuff.de - Webdesign, SEO und SEA

                    Kommentar

                    Lädt...