[Erledigt] Dynamische Bildvorschau ->rollover Link

befubo · 22.06.2010, 11:38

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

wolf29 · 22.06.2010, 12:24

Unter Galleries findest Du hier einige gute Beispiele:

stu nicholls dot com | javascript and CSS home page

Wolf29

befubo · 22.06.2010, 12:31

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

wolf29 · 22.06.2010, 12:36

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

lstegelitz · 22.06.2010, 12:50

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.

rudygotya · 22.06.2010, 13:29

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 : {
                x : 100,
                y : -100
            },
            loader : {
                img : '/img/ajax-loader.gif',
                loadingText : 'Bitte warten - Bild wird geladen'
            }
        },
        _init : function () {
            var self = $(this),
                o = this.options;
            if (!o || o.disabled) return;
            this.element
                .bind('focus.' +  o.uiClass + ' mouseover.' + o.uiClass + ' mouseenter.' + o.uiClass,
                    function()
                    {
                        var $this = $(this).addClass('ui-state-hover'),
                            c = $('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', null, self.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 o = self[0].options
                        }
                        var x = elem.pageX + o.offset.x,
                            y = elem.pageY + o.offset.y;
                        $('div.' + o.uiClass)
                            .css('top', y + 'px')
                            .css('left', x + 'px');
                });
        },
        _create: function() {
            var o = this.options;
            if($('div.' + o.uiClass).length > 0) return;
            var l = 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', null, this._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.

befubo · 22.06.2010, 14:15

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

rudygotya · 22.06.2010, 14:37

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

befubo · 22.06.2010, 15:52

EDIT

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Geordneter Inhalt im Link	drsoong	HTML, Usability und Barrierefreiheit	5	19.05.2010 10:59
Eine Seite mit allen GET-Variablen in Link übernehmen	snemies	PHP Tipps 2009	5	30.10.2009 15:40
link -> get variabeln auslesen	clemo	PHP Tipps 2009	10	25.09.2009 02:16
[Erledigt] gesamte Spalte in Array abspeichern	Kotbatzen	PHP Tipps 2009	23	05.09.2009 00:01
Link mit ID in Echo einbinden	Mitch26	PHP Tipps 2009	4	06.08.2009 17:02
[Erledigt] mail() mit <a herf... Link in Html Mail geht nicht!?	BettinaSyn	PHP Tipps 2009	11	16.05.2009 22:28
[Erledigt] phpmailer link im body bereich definieren	raphaelf	PHP Tipps 2009	5	14.05.2009 10:52
erst beim zweiten Login funktioniert Link	scarry_77	PHP Tipps 2009	5	14.04.2009 00:35
Klick auf Seitenobjekt (Link mit onClick Ereigniss) mit JScript simulieren	Stephan_87	JavaScript, Ajax und mehr	1	22.12.2008 21:50
Daten aus MySQL-abfrage zum Link mit id zusammensetzen	maccoder	Datenbanken	2	13.09.2005 16:49
Suche Tipps für Persormance-Steigerung (Geld für Nützliches)		Beitragsarchiv	18	16.08.2005 10:57
Über Link einen Zeile aus Tabelle löschen	Calli	PHP Tipps 2004-2	24	03.12.2004 13:35
[Erledigt] über ein Link --> Tabelleneintrag		PHP Tipps 2004	9	03.11.2004 17:09
absoluter link		PHP Tipps 2004	10	01.07.2004 23:00
PHP Link ???		PHP Tipps 2004	4	25.06.2004 17:24


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

22.06.2010, 12:24
wolf29 Erfahrener Benutzer Registriert seit: 17.03.2010 Beiträge: 1.833 PHP-Kenntnisse: Fortgeschritten	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.

22.06.2010, 12:36
wolf29 Erfahrener Benutzer Registriert seit: 17.03.2010 Beiträge: 1.833 PHP-Kenntnisse: Fortgeschritten	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.

22.06.2010, 12:50
lstegelitz Erfahrener Benutzer Registriert seit: 07.09.2009 Beiträge: 4.005 PHP-Kenntnisse: Fortgeschritten	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.

22.06.2010, 13:29
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	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 : { x : 100, y : -100 }, loader : { img : '/img/ajax-loader.gif', loadingText : 'Bitte warten - Bild wird geladen' } }, _init : function () { var self = $(this), o = this.options; if (!o \|\| o.disabled) return; this.element .bind('focus.' + o.uiClass + ' mouseover.' + o.uiClass + ' mouseenter.' + o.uiClass, function() { var $this = $(this).addClass('ui-state-hover'), c = $('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', null, self.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 o = self[0].options } var x = elem.pageX + o.offset.x, y = elem.pageY + o.offset.y; $('div.' + o.uiClass) .css('top', y + 'px') .css('left', x + 'px'); }); }, _create: function() { var o = this.options; if($('div.' + o.uiClass).length > 0) return; var l = 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', null, this._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. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

22.06.2010, 14:37
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	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 __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog