Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Dynamische Bildvorschau ->rollover Link

Einklappen

Neue Werbung 2019

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

  • [Erledigt] Dynamische Bildvorschau ->rollover Link

    Hi zusammen

    Ich hätte zum folgenden Problem eine Frage:

    PHP-Code:

    <?php
    $handle
    =opendir ("uploads");
    $count "0";
    $link = array();

    while (
    $datei readdir ($handle)) {
    if (
    $datei != "." && $datei != ".." && !is_dir($datei)) {

             
    $link[$count] = ("$datei");
             echo 
    "<a href='uploads/$link[$count]'>$link[$count]</a><br>";
             
    $count++;
             }
    }

    closedir($handle);
    ?>
    Hiermit lese ich alle Dateien (In meinem Fall Bilddateien) aus einem Verzeichnis aus. Jetzt möchte ich, dass wenn ich über einen Link fahre, eine Bildvorschau (vorerst egal wo) des jeweiligen Bild erscheint. Hab da keinen Lösungsansatz...
    Dadurch, dass es dynamisch sein muss, kann ichs ja kaum im CSS machen und hab darum auf js getippt. Ich kenne diese Funktion im <head> mit dem Bild austauschen, stah aber mit dem Kopf zur Wand und komme gar nicht weiter...
    Wie könnte ich das lösen?
    thx und lg
    befubo

  • #2
    Unter Galleries findest Du hier einige gute Beispiele:

    stu nicholls dot com | javascript and CSS home page

    Wolf29
    while (!asleep()) sheep++;

    Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

    Kommentar


    • #3
      hmm
      thx erstmal, hat schöne Sachen darunter... aber iwie nicht dass was ich suche... Ich möchts wirklich ganz simpel, eine "Roh-Lösung" damit ich weiter daran arbeiten kann...

      Und vorallem wirklich nur, dass ich ein Link-Rollover habe...

      Kommentar


      • #4
        Ok, wie wäre es hiermit?

        infos24 JavaScript > JavaScript Handbuch der "klassische" roll over Effekt

        Über google finde ich ne Menge zu dem Thema rollover.

        Wolf29
        while (!asleep()) sheep++;

        Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

        Kommentar


        • #5
          Google nach javascript tooltip library und such dir eine aus.

          Ich benutze eine sehr simple Lib (wz_tooltip), leider scheint die Webseite dicht gemacht zu haben. Es gibt aber noch gefühlt 1 Millionen weitere Bibliotheken, die alle das gleiche leisten.
          Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

          Kommentar


          • #6
            Hab hier ein jqueryui plugin, das ich mal geschrieben habe.

            Hier wär der quellcode:
            PHP-Code:
            /**
             *
             * Copyright (c) 2010 Sebastian Sauer (http://www.dynpages.de)
             * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
             * and GPL (http://www.gnu.org/licenses/gpl-3.0.txt) licenses.
             *
             * Built on top of jQuery http://jquery.com
             *
             * @author Sebastian Sauer info@dynpages.de
             * @version 0.5.0
             * @since june 2009
             *
             *
             */

            (function($) {
                $.
            widget('ui.imgpreview', {
                    
            options: {
                        
            uiClass 'ui-imgpreview-preloader',
                        
            offset : {
                            
            100,
                            
            : -100
                        
            },
                        
            loader : {
                            
            img '/img/ajax-loader.gif',
                            
            loadingText 'Bitte warten - Bild wird geladen'
                        
            }
                    },
                    
            _init : function () {
                        var 
            self = $(this),
                            
            this.options;
                        if (!
            || o.disabled) return;
                        
            this.element
                            
            .bind('focus.' +  o.uiClass ' mouseover.' o.uiClass ' mouseenter.' o.uiClass,
                                function()
                                {
                                    var 
            $this = $(this).addClass('ui-state-hover'),
                                        
            = $('div.' o.uiClass).removeClass('ui-helper-hidden').fadeIn(),
                                        
            desc $this.attr("title"),
                                        
            url = $(this).attr("alt"),
                                        
            img = new Image();
                                    $(
            img)
                                        .
            load(function () {
                                            
            c
                                                
            .removeClass('loading')
                                                .
            html(this)
                                                .
            append('<p>' desc '</p>');
                                    })
                                    .
            attr('src'url);
                                    
            self._trigger('onshow'nullself.ui($this));
                                }
                            )
                            .
            bind('blur.' +  o.uiClass ' mouseout.' +  o.uiClass ' mouseleave.' +  o.uiClass,
                                function() {
                                    var 
            $this = $(this).removeClass('ui-state-hover');
                                    $(
            'div.' o.uiClass).fadeOut();
                                    
            self[0]._rebuild();
                                }
                            )
                            .
            bind(
                                
            'mousemove.imgpreview',
                                function(
            elem) {
                                    
            // bugfix for compatibility
                                    
            if(!o) {
                                        var 
            self[0].options
                                    
            }
                                    var 
            elem.pageX o.offset.x,
                                        
            elem.pageY o.offset.y;
                                    $(
            'div.' o.uiClass)
                                        .
            css('top''px')
                                        .
            css('left''px');
                            });
                    },
                    
            _create: function() {
                        var 
            this.options;
                        if($(
            'div.' o.uiClass).length 0) return;
                        var 
            o.loader,
                            
            preloading = [
                                
            '<div class="' o.uiClass ' ui-dialog ui-state-focus">',
                                    
            '<img src="' l.img '" alt="loading" />',
                                    
            '<p>' l.loadingText '</p>',
                                
            '</div>'
                            
            ];
                        $(
            'body').append(
                            
            preloading.join('')
                        );
                        $(
            'div.' o.uiClass).addClass('ui-helper-hidden');
                    },
                    
            _remove : function () {
                        $(
            'div.' this.options.uiClass).remove();
                    },
                    
            _rebuild : function () {
                        
            this._remove();
                        
            this._create();
                    },
                    
            _ui : function ($el) {
                        if(
            typeof($el) === "undefined") {
                            return 
            this.element;
                        }
                        return {
                            
            element $el,
                            
            image $el.attr('alt'),
                            
            description $el.attr('title')
                        };
                    },
                    
            destroy : function () {
                        
            this._remove();
                        
            this.element
                            
            .removeClass(this.options.uiClass ' ui-dialog ui-state-focus')
                            .
            unbind('.imgpreview');
                        
            this._trigger('destroy'nullthis._ui())
                        return 
            this;
                    }
                });
            })(
            jQuery); 
            Hier ein Beispiel im Einsatz. Einfach unten über ein Bild drüber gehen. Lädt dir die Bilder per ajax nach, zeigt dir vorher noch nen preloader.
            Hab die Bibliothek mal gezippt. Kannste hier downloaden. Setzt jquery / ui.core sowie ui.widget voraus.

            Eventuell viel Spaß damit.
            I like cooking my family and my pets.
            Use commas. Don't be a psycho.
            [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

            Kommentar


            • #7
              Also, erstmal Danke an euch...

              @wolf29
              Das hilft mir schon echt weiter, genau so sollte es sein. Ich versuchs jetzt erstmal damit...

              @rudygotya
              Danke mal für deine Mühe
              Ich werde, wie erwähnt, jetzt erstmal das ganze von Wolf29 testen, sieht vielversprechend aus. Wenn ichs nicht hinkrieg, widme ich mich mal deinem Plugin...
              Thx euch allen, ich gebe noch Rückmeldung bei Miss-/ Erfolg

              Kommentar


              • #8
                Hätte vielleicht noch nen usecase mit reinschreiben sollen.
                Du musst nicht mehr machen als jquery.js und jqueryui.js und mein plugin einbinden.
                Im Header schreibste dann
                PHP-Code:
                $(function () {
                  $(
                '.selector').imgpreview();
                }); 
                Markup schaut dann z.b. so aus:

                <elem class="selector" title="Text unter dem Bild" alt="URL zur preview" />


                fertig
                I like cooking my family and my pets.
                Use commas. Don't be a psycho.
                [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                Kommentar


                • #9
                  EDIT

                  muahaha
                  vergesst es, hat endlich geklappt. Danke vielmals für eure unterstützung!

                  Kommentar

                  Lädt...
                  X