Autor Thema: (Diskussion) Miniaturansichten von Bildlinks im Chatlog  (Gelesen 130723 mal)

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
Habe mal

img.style.display = "block"; und style="display: none;" weggelassen:

function thumbcreate(text,umwandlung) {

if (umwandlung == 'yes') {

  // Bestimmung der Breite
  if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    fensterbreite = document.documentElement.offsetWidth;
  }
  else
    if (typeof document.body != 'undefined') {
    fensterbreite = document.all.body.offsetWidth;
    }
  bildbreite = fensterbreite * 0.5;

  // die eigentliche Umwandlung
  hrefsplit = text.split('<a class=\"link\" target=\"_self\" href');
  ausgabe = hrefsplit[0];
  for (j=1; j<hrefsplit.length;j++) {
    teiltext = hrefsplit[j].split(">");
    gefundeneendung="undefiniert";
   
    //sucht nach Bild-Links
    bildendungen = new Array(".jpg",".bmp",".png",".gif",".jpeg");
    for (i=0; i<bildendungen.length; i++) {
      if ((teiltext[0].substr(teiltext[0].length-5,4)==bildendungen[i]) || (teiltext[0].substr(teiltext[0].length-6,5)==bildendungen[i])) {
        gefundeneendung="bild1";
    }
    }
 
    switch (gefundeneendung) {
      case "bild1":
        ausgabe = ausgabe+'<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'"><img src'+teiltext[0]+'alt="'+teiltext[1].substr(0,teiltext[1].length-3)+'" onload="resize(this)" ></a>'+teiltext[2];
        break;  
      default:
        ausgabe = ausgabe+'<a href'+hrefsplit[j];
        break;
    }
  }
}
else {
  ausgabe = text;
}

return ausgabe;
}


//neubestimmung damit höhe max 120px und breite max 200px
function resize(img) {
  if(img.width > 200) {
    img.style.height = (img.height * 200 / img.width) + "px";
    img.style.width = "200px";
  }
  if(img.height > 120) {
    img.style.width = (img.width * 120 / img.height) + "px";
    img.style.height = "120px";
  }
}

Bei mir geht es nun, dass die Bilder nebeneinander angezeigt werden. Hoffe mal, dass es dadurch nicht andere Probleme gibt.
« Letzte Änderung: 28. Dezember 2007, 20:41:40 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



hacker676

  • Überall-Mitmischer
  • *
  • Beiträge: 174
  • Geschlecht: Männlich
    • Profil anzeigen
haben bei dir beide bilder einen link? bei mir nur das erste...
aber der umbruch is jetz weg..  ;D

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
Bei mir haben alle Bilder einen Link

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



charly89

  • Besucher
  • *
  • Beiträge: 18
    • Profil anzeigen
funktionierte erst bei mir nicht. habe dann die "BecHa.css" verändert in folgendem maße:

.link {
   width: 89%;
   font-size: 9pt;
   word-wrap: break-word;
   color: #009bd4;
   text-decoration: none;
   }

.link:visited {
   width: 89%;
   text-decoration: none;
   word-wrap: break-word;
   color: #98e6fb;
}
   
.link:hover {
   width: 89%;
   text-decoration: underline;
   word-wrap: break-word;
   color: #f9bb3b;
}

die klasse "link" habe ich zu "a" gemacht. weiterhin habe ich bei diesen klassen den wordwrap und width-eintrag gelöscht. mit der width:89% kann niemals mehr als 1 bild in einer reihe sein, denn egal wie breit der inhalt des <a> tags ist, er wird immer 89% des verfügbaren platzes verbrauchen.
der word-wrap ist ein textumfluss, den habe ich rausgelassen weil es sein könnte dass dann der text zwischen den bildern "herumfließt". habs mit word-wrap nicht getestet sondern direkt wrap und width gelöscht.

der teil im css sieht nun wie folgt aus:

a {
   font-size: 9pt;
   color: #009bd4;
   text-decoration: none;
   }

a:visited {
   text-decoration: none;
   color: #98e6fb;
}
   
a:hover {
   text-decoration: underline;
   color: #f9bb3b;
}

ACHTUNG: auch wenn andere skins als der BecHa für ieView benutzt werden kann es sein dass die .link/a-klasse das attribut width:X% hat!

/edit: bisher siehts so aus:


« Letzte Änderung: 28. Dezember 2007, 22:20:59 von charly89 »

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
Im Anhang mal die aktuelle thumbs.js. Die Bilder haben nun id="thumbs".
In der CSS-Datei kann man nun für die Bilder einen eigenen Bereich erstellen,
um dort halt Veränderungen vorzunehmen.

In der CSS kann folgendes eingefügt werden:
#thumbs {
}


mfg Nem
« Letzte Änderung: 03. September 2008, 23:38:42 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



hacker676

  • Überall-Mitmischer
  • *
  • Beiträge: 174
  • Geschlecht: Männlich
    • Profil anzeigen
bei mir siehts so aus:



bilder sind zufällig gewählt. hab nur noch mal link dazu geschrieben, aber das hat keinen einfliss drauf. bei mir bekommt nur das erste bild einen link und das zweite nicht. hatte mal zum spaß alle styles entfernt, war alles ziemlich farblos aber immernoch nur das erste bild verlinkt.
weiß jemand was da ab geht?


EDIT: das will mich verarschen... so funzts:
Zitat
ausgabe = ausgabe+'
<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'"><img id="thumbs" src'+teiltext[0]+'alt="'+teiltext[1].substr(0,teiltext[1].length-3)+'" onload="resize(this)">&nbsp;Link[/url]'+teiltext[2];


ich will nicht verstehen wie so das nach dem zeilenumbruch "
" trotzdem noch in einer zeile ist... zu müde dafür... vielleicht sollte ich auf koffeinfreien umsteigen... gn8  :-\
« Letzte Änderung: 29. Dezember 2007, 01:21:38 von hacker676 »

titro

  • Labertasche
  • *****
  • Beiträge: 126
  • Geschlecht: Männlich
  • www.mirandaproz.de.vu | Miranda ProZ
    • Profil anzeigen
    • Miranda ProZ
also erstmal: verdammt geile Arbeit von allen!!!
Bei mir funzt das aber auch mit Zeilenumbrüchen.
Wenn ich mehrere Links untereinander eingebe, dann erscheinen die pics auch untereinander. Wenn ich sie nebeneinander, getrennt durch eine Leerzeile eingebe, dann erscheinen sie auch nebeneinander.
Habe die letzte von Nem hochgeladene thumb.js und dann die modifizierte ausgabe von hacker.
lg
T!tr0

charly89

  • Besucher
  • *
  • Beiträge: 18
    • Profil anzeigen
wie siehts in deiner .css datei vom skin aus (siehe mein post)? bzw du könntest die mal anhängen?

titro

  • Labertasche
  • *****
  • Beiträge: 126
  • Geschlecht: Männlich
  • www.mirandaproz.de.vu | Miranda ProZ
    • Profil anzeigen
    • Miranda ProZ
hab die css Datei auf 0815 gelassen. Nichts verändert. Benutze aber auch nicht BecHa sondern Satin.
Hab mal deine Änderungen in der css gemacht aber bleibt trotzdem alles beim alten.
Im Anhang meine css, die thumbs.js


[gelöscht durch Administrator]
« Letzte Änderung: 30. Dezember 2007, 14:09:52 von titro »

titro

  • Labertasche
  • *****
  • Beiträge: 126
  • Geschlecht: Männlich
  • www.mirandaproz.de.vu | Miranda ProZ
    • Profil anzeigen
    • Miranda ProZ
sry für Doppelpost aber neue Dateianhänge beim Ändern dranhängen funzt nicht.
Hab noch 3 andere css drin. greenblueorange.css und greenbluepurple.css und redbluepurple.css
Hab 2 davon mal drangehangn

[gelöscht durch Administrator]

charly89

  • Besucher
  • *
  • Beiträge: 18
    • Profil anzeigen
#thumbs
{
a {
   font-size: 9pt;
   color: #009bd4;
   text-decoration: none;
   }

a:visited {
   text-decoration: none;
   color: #98e6fb;
}
   
a:hover {
   text-decoration: underline;
   color: #f9bb3b;
}
}


da hast du was missverstanden. du kannst mit der "a"-klasse die links im allgemeinen bearbeiten, dabei musst du die eigenschaften "width:" und "word-wrap" aus der skineigenen css löschen (aber nur in der "a"-klasse).

die #thumbs hingegen enthält nur den style für die bilder. in meinem falle wollte ich einen grünen rahmen passend zu meinem skin haben. das sieht im css so aus:

#thumbs {
border: 1px solid #95cc00;
}

und die links stehen einzeln

a {
   font-size: 9pt;
   color: #009bd4;
   text-decoration: none;
   }

a:visited {
   text-decoration: none;
   color: #98e6fb;
}
   
a:hover {
   text-decoration: underline;
   color: #f9bb3b;
}

mach aus deiner css die #thumbs-konstruktion raus und ersetz sie mal durch meine

titro

  • Labertasche
  • *****
  • Beiträge: 126
  • Geschlecht: Männlich
  • www.mirandaproz.de.vu | Miranda ProZ
    • Profil anzeigen
    • Miranda ProZ
jo danke funzt.
Aber wieso du den Umbruch hast ist imme noch nicht geklärt oder?

charly89

  • Besucher
  • *
  • Beiträge: 18
    • Profil anzeigen
probier mal diese thumbs.js mit dieser ausgabe.js. die benutze ich und da gibts keine umbrüche drin

[gelöscht durch Administrator]

titro

  • Labertasche
  • *****
  • Beiträge: 126
  • Geschlecht: Männlich
  • www.mirandaproz.de.vu | Miranda ProZ
    • Profil anzeigen
    • Miranda ProZ
ja so intelligent bin ich auch^^.
Ne hab die anderen css aber erst später gesehen und wollte noch welche hinzufügen. aber da ja sowieso nur 2 Dateien angehängt werden können...
@ charly
jop funzt. merci

AImXOo0o

  • Überall-Mitmischer
  • *
  • Beiträge: 209
  • Geschlecht: Männlich
  • Hmmm
    • Profil anzeigen
Ich wollte jetzt keinen neuen Thread aufmachen, aber irgendwie passt es hier grad.

Kann man sich auch youtube video im Nachrichtenfenster anschauen? Ich brauch's zwar nicht, aber interessieren tut mich das schon. Html sollte ja möglich sein, aber wie viel arbeit das ist, weiß ich nicht.

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
@Hacker
Zitat
ausgabe = ausgabe+'
<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'"><img id="thumbs" src'+teiltext[0]+'alt="'+teiltext[1].substr(0,teiltext[1].length-3)+'" onload="resize(this)">&nbsp;Link[/url]'+teiltext[2];
Ich darf bei mir das
 nicht machen, bei mir wird dann ein Umbruch vollzogen.



Ich habe mich auch noch nicht damit befasst. Ich denke mal, dass geht so wie mit den tZer.
Man muss versuchen halt die Videos in ein <objekt> einzubinden. Wie das nun genau aussieht, keine
Ahnung.
Ein neuer Thread könnte man dann aufmachen, wenn einige Videos als Erweiterung haben wollen.

EDIT:
Habe gerade auf der Seite nachgeschaut. Da gibt es den Quellcode, den man benutzen kann, um vereinzelt Videos einzubinden.
Hier mal ein Beispiel:
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/ZvWi2Ey3VTQ&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/ZvWi2Ey3VTQ&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
Das könnte man doch direkt benutzen, nur für jedes neue Video müsste dann der Link - per Variable - angepasst werden.
Im Code steht "http://www.youtube.com/v/ZvWi2Ey3VTQ&rel=1", dieses müsste man dann halt ersetzen.
« Letzte Änderung: 02. Januar 2008, 21:52:53 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



Freez

  • Überall-Mitmischer
  • *
  • Beiträge: 210
  • Geschlecht: Männlich
  • Offtopic Putze
    • Profil anzeigen
    • Its me!
gibt es auch eine Möglichkeit bilder, die mit den tags umschlossen sind, zu verkleinern?

habe mal in die thumbs.js
".jpg[/img]",".bmp[/img]",".png[/img]",".gif[/img]",".jpeg[/img]" hinzugefügt, aber das bringt leider nichts.

wenn du ein kleines bild haben willst macht es ja garkeinen Sinn mehr diese normalen "Tags" zu benutzen... schick den bildlink dann doch einfach ohne Tag und schon ist das bild klein!
(oder hab ich dein anliegen irgendwie falsch verstanden?)

mfg freez
Der Computer ist die logische Weiterentwicklung des Menschen: Intelligenz ohne Moral.
- John James Osborne - Schauspieler, Bühnenautor, Journalist, Dramatiker (England, 1929 - 1994)

--
Strong Tools=>

...i hope

titro

  • Labertasche
  • *****
  • Beiträge: 126
  • Geschlecht: Männlich
  • www.mirandaproz.de.vu | Miranda ProZ
    • Profil anzeigen
    • Miranda ProZ
Wie sähe der Code denn dann aus, wenn man auch die Videos einbinden möchte. Müsste das ja irgendwie zusammenbringen mit dem bisherigen.

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
Wer die Thumbs von Bildern sehen möchte, ohne die tZers zu benutzen sollte folgendes beachten:

1. Datei thumbs.js muss im gleichen Verzeichnis wie die .ivt-Datei liegen

2. <script src="thumbs.js"></script> im HEAD unterhalb von <base href="%base%">

3. In der ivt-Datei ersetzt man die %text% durch
<script>thumbcreate('%\text%', 'yes');</script> bzw.
<script>thumbcreate('%\text%', 'no');</script> ersetzen,
anstatt mit diesem
<script>TzersOutput('tzers','center','yes','get','%\text%','%\name%','yes');</script>

4. In der thumbs.js muss man
return ausgabe;
durch
document.write(ausgabe);
ersetzen.

PS: yes bzw. no dient als Schalter, ob eine Umwandlung erfolgen soll oder nicht.

mfg Nem
« Letzte Änderung: 07. Januar 2008, 18:23:57 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



Hannibalector

  • Tastaturschoner
  • **
  • Beiträge: 45
    • Profil anzeigen
Hallo,
ich bin am verzweifeln. Ich versuche seit Stunden diese Funktion zum Anzeigen von Bildern und tZers einzubauen. Die tZers haben bereits geklappt, auch die Bilderlinks, aber nun klappt wieder nichts, und ich bekomme andauernd die Skriptwarnungen vom Internet Explorer.
Ich verwende ein eigenes IEView-Template.
Fehlermeldungen wie "document.all.body.offsetWidth ist Null oder kein Objekt" oder "Objekt erwartet".
Könnte jemand nocheinmal die aktuellen Dateien posten, bitte?

progandy

  • Plugin-Autor
  • Akkordschreiber
  • ***
  • Beiträge: 626
    • progandy@hot-chilli.net"
    • http://progandy.miranda-vi.org"
    • Profil anzeigen
    • ProgAndy
Habe mal

img.style.display = "block"; und style="display: none;" weggelassen:

Bei mir geht es nun, dass die Bilder nebeneinander angezeigt werden. Hoffe mal, dass es dadurch nicht andere Probleme gibt.
Der Umbruch kam dadurch zustande: img.style.display = "block";
Für ohne Umbruch schreibt man: img.style.display = "inline";
Weglassen sollte man es nicht, da sonst während dem Laden das Bild in voller Auflösung erscheint und Scrollbalken erscheinen
Jetzt wo ich weiss wie es funktioniert versteh ich auch die Gebrauchsanleitung
[Status: Jabber]

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
Jetzt fehlt nur noch, dass man einen Hinweistext, z.B. "Bild ladet ...", bekommt, solange das Bild noch nicht geladen wurde.

@hacker676
Hatte es nun auch, dass ich 2 Bilder bekommen habe, aber nur das 1. war verlinkt. Das kommt dadurch zustande, dass zwischen den beiden Bildern kein Platz war (z.B.: blabla.gifhttp://blabla). Es kann auch passieren, dass stattdessen gar keine Ausgabe erfolgt.

mfg nem
« Letzte Änderung: 09. Januar 2008, 01:42:19 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



AMoK

  • Überall-Mitmischer
  • *
  • Beiträge: 245
    • Profil anzeigen
wäre es nicht vielleicht möglich, ne art button einzubauen ? also das statt dem bild ein button kommt, auf den man dann klickt und erst dann wird das bild geladen. zumindest als option fände ich sowas nicht schlecht, da man sich vielleicht auch nicht jedes bild als thumb anzeigen lassen möchte.

Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
So wäre doch dann der Sinn der Erweiterung nicht mehr gegeben. Der Sinn besteht halt darin, dass die Vorschau kommt und nicht der Link bzw. bei Dir dann der Button. Wenn Du einen Button haben willst, dann kannst Du ja versuchen die Thumb-Erweiterung zu verändern. Mußt ja "nur" quasi folgende Zeile ändern:

ausgabe = ausgabe+'<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'"><img id="thumbs" src'+teiltext[0]+'alt="'+teiltext[1].substr(0,teiltext[1].length-3)+'" onload="resize(this)" style="display: none;"></a>'+teiltext[2]+' ';



Falls Du das nicht direkt als Button haben willst, sondern Dir der Bildname als Textausgabe reicht:
ausgabe = ausgabe+'<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'">['+teiltext[1].substr(0,teiltext[1].length-3).split('/')[teiltext[1].substr(0,teiltext[1].length-3).split('/').length-1]+']</a>'+teiltext[2]+'<br>';


PS: Man kann auch beides untereinander schreiben, dann hat man das Bild und den Bildnamen:
ausgabe = ausgabe+'<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'"><img id="thumbs" src'+teiltext[0]+'alt="'+teiltext[1].substr(0,teiltext[1].length-3)+'" onload="resize(this)" style="display: none;"></a>'+teiltext[2]+'<br>';
ausgabe = ausgabe+'<a href="'+teiltext[1].substr(0,teiltext[1].length-3)+'">['+teiltext[1].substr(0,teiltext[1].length-3).split('/')[teiltext[1].substr(0,teiltext[1].length-3).split('/').length-1]+']</a>'+teiltext[2]+'<br>';

mfg Nem
« Letzte Änderung: 11. Januar 2008, 20:24:43 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/



Nem

  • Forenfetischist
  • ****
  • Beiträge: 888
  • Geschlecht: Männlich
    • Profil anzeigen
NEUE Erweiterung, sie zeigt Thumbnails von Bilder an, die man per Miranda als File verschickt oder bekommt.
Diese Erweiterung benötigt nicht die tZer-Erweiterung.

Einrichten:
1. Die Datei showdata.js dort hinkopieren, wo die ivt-Datei liegt.
2. <script src="showdata.js"></script> im Head unterhalb von <base> der ivt-Datei
3. Im <!--File-->Bereich %Text% durch <script>getandsentdata('%\text%','%\name%','%base%');</script> ersetzen

PS: In den Einstellungen muss man für eingehende Messages [LWBuchstabe]:\miranda\Erhaltene Dateien\%nick%\ gesetzt sein oder halt das Skript anpassen.

mfg Nem


Weitere Files - hier für Videodateien - können so eingebungen werden:

Videoendungen = new Array(".MPG",".mpg",".AVI",".avi",".WMV",".wmv");
for (j=0; j<Videoendungen.length; j++) {
  if (eingangsmeldung.search(Videoendungen[j]) != -1 ) {
    emeldung = eingangsmeldung.split(':');
    if (emeldung[1]) {
      // Veränderung der Message für gesendete Dateien
    }
    else {
      // Veränderung der Message für erhaltene Dateien
    }
    typgefunden = true;
  }
}


EDIT: Arg, habe in der showdata.js ein kleinen Fehler drin, habe nur = anstatt == geschrieben. Richtig so:
if (typgefunden == false) {
  document.write(eingangsmeldung);
}
« Letzte Änderung: 03. September 2008, 23:39:12 von Nem »

Übersicht über die Java-Skripte: http://mirandanem.mi.funpic.de/