Ankündigung

Einklappen
Keine Ankündigung bisher.

Alle li oder img tags verlinken

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Alle li oder img tags verlinken

    Guten Tag Leute,

    ich habe eine Website in der eine Gallery per Iframe eingebettet wird.
    In der Gallery selber (also im Iframe) gibt es im unteren Bereich eine Leiste mit Thumbnails mit dem Man das Hauptbild der Gallery wechseln kann.

    Mein Vorhaben ist das wenn man auf ein Thumbnail klickt dass man zum oberen Rand der Gallery gescrollt wird.

    So sieht der Balken aus mit den Thumbnails die vom Galleryscript generiert wird. (Quelltext)
    PHP-Code:
    <ul id="thumb-list" style="width: 2397px; left: 0px;">

    <
    li class="thumb0 current-thumb"><img src="img/th/0.jpg"></li>
    <
    li class="thumb1"><img src="img/th/1.jpg"></li>
    <
    li class="thumb2"><img src="img/th/2.jpg"></li>
    <
    li class="thumb3"><img src="img/th/3.jpg"></li>
    </
    ul
    Den oberen Rand der Gallery habe ich mit der ID #gallerytop verankert. (außerhalb des Iframes)

    Mein Gedanke wäre dann dementsprechend:

    PHP-Code:
    <ul id="thumb-list" style="width: 2397px; left: 0px;">

    <
    li class="thumb0 current-thumb"><a href="#gallerytop"><img src="img/th/0.jpg"></a></li>
    <
    li class="thumb1"><a href="#gallerytop"><img src="img/th/1.jpg"></a></li>
    <
    li class="thumb1"><a href="#gallerytop"><img src="img/th/2.jpg"></a></li>
    ...
    </
    ul
    #


    Kann mir da jemand weiterhelfen... hab mich schon totgooglet, ehrlich... :/

  • #2
    Einfacher gehts ohne iframe => DIV + overflow
    Der Inhalt Deines iframe hat keinen direkten Bezug zum Parent-Dokument, daher müsstest Du diesen bspw. per JS erst ansprechen.
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Leider müssen die Iframes sein.
      Aber das wäre das 2. problem sozusagen. Zuerst müssen die ganzen thumbnails mit dem anker verlinkt werden. Dann muss es wie du schon erwähnt hast auf das Parent-Dokument zugreifen und dort wirdd ann zum anker gescrollt.

      hab es vorerst mit js replace probiert aber das funktionierte nut mit Text und nicht HTML tags...

      PHP-Code:
        <script type="text/javascript"
      (function($) {
        var 
      site = $("#thumb-list");
        
      site.html(site.html()
           .
      replace(/<img /g'<img href="#gallerytop"')
       
        ); 
        return;
      })(
      jQuery)
       
      </script> 
      oder per wrap

      PHP-Code:
            <script type="text/javascript">
            
          var 
      = $("<a>").attr("href""#gallerytop");
      $(
      "img").wrap(a);


       
      </script> 
      hat nichts geholfen :/

      Kommentar


      • #4
        Zitat von viperzer
        Leider müssen die Iframes sein.
        Die Begründung würde mich interessieren...

        Ansonsten verstehe ich nicht, warum die Links mit JS neu gesetzt werden müssen?!
        Klick-Event und window.parent nutzen, oder gleich jQuery o.ä. nutzen...
        Competence-Center -> Enjoy the Informatrix
        PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

        Kommentar


        • #5
          Müssen nicht wenn es anders geht... nur die Begriffe habe ich schon in einigen Foren finden können doch anfangen konnte ich damit nichts. Bin eher HTML CSS veranlagt... Bei Javascript besitzt ich nur Grundkenntnisse die für das anpassen und ändern des Codes fürs erste reicht.#

          Kommentar


          • #6
            Zitat von viperzer
            Bei Javascript besitzt ich nur Grundkenntnisse die für das anpassen und ändern des Codes fürs erste reicht.
            Kein Weltuntergang, kann man lernen. Unabhängig davon ist das ein weiterer Grund iframe nicht zu nutzen, denn dann gehts auch ohne JS.
            Solltest Du wissen, wenn Du HTML und CSS Veranlagung hast?!
            Competence-Center -> Enjoy the Informatrix
            PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

            Kommentar


            • #7
              Weiß ich auch. Aber dannach frag ich ja auch nicht...
              Die Iframes müssen bleiben da es eine onepage Seite ist in der dieses Gallerysystem 3mal vorkommt. Würde ich das ohne Iframe lösen wollen müsste ich die komplette Website umschreiben und das ist auch nicht erwünscht...

              Kommentar


              • #8
                Jau... Dann viel Spaß:
                https://www.google.de/search?q=javas...sm=90&ie=UTF-8
                Competence-Center -> Enjoy the Informatrix
                PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                Kommentar


                • #9
                  Mit PHP gehts jedenfalls nicht.
                  php.de > Webentwicklung > PHP Einsteiger

                  Bitte Forenstruktur beachten!

                  [MOD: verschoben]
                  [COLOR="#F5F5FF"]--[/COLOR]
                  [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                  [COLOR="#F5F5FF"]
                  --[/COLOR]

                  Kommentar


                  • #10
                    Danke... und sorry wegen der falschen Kategorie.

                    Arne wie bekomm ich dann das hin das die li bzw img tags verlinkt sind?

                    Andere Frage...
                    ich habe es nun geschaft alle img tags zu verlinken:
                    PHP-Code:
                    $(function(){
                        $(
                    "li").each(function(){
                         $(
                    this).find("img").wrap("<a target='_parent' href='#page3'></a>");   
                        });   
                    }); 
                    und der link wird auch angezeigt wenn ich mit der Maus über die thumbnails gehe. Nur passiert ncihts wenn ich drauf klicke... es kommt nicht mal der anker #page3 zur url dazu.. liegt sowas auch am iframe?

                    Kommentar


                    • #11
                      Kann ich ehrlich gesagt nicht zu 100% sagen, aber in Bezug auf iframe habe ich auch keine Ambitionen, Dir weiterzuhelfen.
                      Die machen selten Sinn und in Deinem Fall gar keinen!

                      Und btw., das was Du da bastelst, können tausend andere Gallery-Plugins per Standard, bspw.: bxSlider.

                      Wenn Du es unbedingt selbst machen willst, dann schau zumindest, wie die das machen und setze es für Dich um...
                      Competence-Center -> Enjoy the Informatrix
                      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                      Kommentar


                      • #12
                        @arne..
                        Ich hab das gefühl dass du zulange in diesem board bist...

                        ..und nein das was ich bastle ist nicht mit diesen plugins per standart möglich auch nicht mit bxslider.
                        Kann es nicht verstehen wieso man nicht einfach aktzeptieren kann dass es nicht ohne diesen iframes geht... nicht wegen der Technik sondern wegen dem nötigen Zeitaufwand für eine umprogrammierung. Urteilen ob diese Iframes bei der Programmierung bzw. bei der Website Sinn macht kannst du sowieso in keinster weise wissen ohne die Website und dessen Programmierung zu kennen.

                        Aber das ist ja nicht das erste mal hier...

                        Info: Die website wurde nicht von mir programmiert.

                        Außerdem:

                        PHP-Code:
                            <script type="text/javascript">
                          
                        window.ScrollToTop = function(){ 
                          $(
                        'html,body'window.document).animate({
                            
                        'scrollTop':   $('#page1').offset().top
                        }, 1000);
                        };  
                        </script> 
                        in der index.php und der untere schnipsel im iframe selber...

                        PHP-Code:
                          <script type="text/javascript"
                        $(function(){ 
                            $(
                        "#thumb-list li").each(function(){
                             $(
                        this).find("img").wrap("<a onclick='window.parent.ScrollToTop();' target='_parent' href='#page1'></a>");   
                            });   
                        });

                         
                        </script> 

                        Kommentar

                        Lädt...
                        X