Pro Element in der Liste Bild anzeigen

Manfred K. Als Antwort am 31 Jan. 2012 07:52

Hat's jemand schon hinbekommen? Bzw. weiss, wie das gehen könnte?

SP_Azubi Als Antwort am 7 Feb. 2012 11:57

http://sharepointjavascript.wordpress.com/2011/09/12/preview-metadata-in-list-view-on-mouseover-updated-version/
Ich habe es damit gemacht.

Geht eigentlich ziemlich einfach damit, sobald man den dreh raus hat.^^

Manfred K. Als Antwort am 7 Feb. 2012 11:59

Wow, super. Ich werde's gleich versuchen!!! Vielen Dank!!!!

Manfred K. Als Antwort am 8 Feb. 2012 10:39

Hallo SP_Azubi,

vielen Dank erstmal für Deine Rückmeldung!!!

Könntest du mich bitte beim Vorgehen begleiten, ich bekomme das irgendwie nicht hin:

Was ich gemacht habe:

1) “PreviewMetadata.js” aus  Download the code for the file “PreviewMetadata.js” from here. und zwar Version v1.1 heruntergeladen bzw. den Code  in die eigene Dokumentbibliothek kopiert.

2) Auf meiner Seite, wo ich die Liste hinzugefügt habe, CEWP eingefügt -> bearbeitet und ins HTML den folgenden Code eingefügt:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/EMSKJS/PreviewMetadata/PreviewMetadata.js"></script>
<script type="text/javascript">
config = {arrOfFieldsToShow:[],
    hideIdColumn:true,
    activeListGuids:[],
    hideCreatedAndModified:true,
    hideFormLabel:false,
    hoverDelay:100,
    hoverImg:{active:true,
       path:'/_layouts/images/chm16.gif',
       height:'12',
       width:'12',
       prependTo:'LinkTitle',
       hoverImgDescription:'Hover over this image in the list to preview the list item',
       openInDlg:true}};
       
initjLoadMe(config);
</script>

mit Referenz auf meine PreviewMetadata.js.

Und weiter? Was/wie soll ich wo evtl. anpassen/hinzufügen/...???

SP_Azubi Als Antwort am 8 Feb. 2012 10:50

Du klickst auf Seite bearbeiten, wie immer und dann beim WebPart auf WebPart bearbeiten. An der Seite öffnet sich ein feld und bei 'Verknüpfung mit Inhalt' gibst du den Link von der Datei an, aus deiner Dokumentbibliothek heraus.

SP_Azubi Als Antwort am 8 Feb. 2012 10:55

Also ich meine damit, du musst deinen Code, mit der Referenz abspeichern und in deiner bibliothek hochladen, und dann bei 'Verknüpfung mit Inhalt' den link einfügen, der zu dieser Datei führt.

Manfred K. Als Antwort am 8 Feb. 2012 11:00

Danke!

das hatte ich gemacht... Und ich habe schon einen Bildchen neben 'LinkTitle'. Sobald ich aber mit der Maus aufs Bildchen gehe, erscheint ein leeres Box! Ich vermute, ich habe irgendwo irgendwas nicht angepasst, was da im Mouseover-Box erscheinnen so (Die Eigenschaften von meinem Element)ll!!!

Aber wo und was?

SP_Azubi Als Antwort am 8 Feb. 2012 11:08

Ich habe den CEWP unter die Liste gezogen. Da ich immer Probleme habe, wenn ich den über der Liste habe. Ich weiß nicht, wie das bei dir ist.

Aber am Code muss nichts geändert werden, ich musste ja auch nichts ändern.

Manfred K. Als Antwort am 8 Feb. 2012 11:11

Alles passt!!! Ich habe den unter der Liste.

Wo wird aber definiert, was da onmouseover angezeigt soll???

SP_Azubi Als Antwort am 8 Feb. 2012 11:14

Unter Listeneinstellung -> Listentyp
Meistens ist es der Listentyp Ereignis.

Manfred K. Als Antwort am 8 Feb. 2012 11:20

Listentyp??? Wo finde ich das?

SP_Azubi Als Antwort am 8 Feb. 2012 11:26

Unter Listeneinstellungen -> Inhaltstypen (rot umrahmt)

Manfred K. Als Antwort am 8 Feb. 2012 11:54

Hilft nix!

wie fügst du da die bilder ein (im Forum meine ich)???

SP_Azubi Als Antwort am 8 Feb. 2012 12:11

Du kannst auch eine Spalte erstellen 'Hyperlink oder Bild' und die URL als Bild formatieren lassen.
Dann gehst du im Menüband auf 'Ansicht ändern' und entfernst von dort die Spalte. Dann wird dir im Hover immer ein Bild zusätzlich mit angezeigt.

SP_Azubi Als Antwort am 8 Feb. 2012 12:15

Ich hatte daran gerade nicht gedacht gehabt, dass man diese Spalte zuerst erstellen muss. Und dann kannst du im Inhaltstyp alles, bis auf die Hyperlinkspalte alles entfernen. Dann wird dir nur noch das Bild angezeigt.
Sofern du in der Listenansicht alles hast, was du wissen musst bzw. dir so einstellst, kannst du das so machen. Weil sonst siehst du beim hover und auch beim anklicken des Eintrages nur das Bild.

SP_Azubi Als Antwort am 8 Feb. 2012 12:16

[quote user="Manfred K."]

Hilft nix!

wie fügst du da die bilder ein (im Forum meine ich)???

Und wie meinst du das mit Forum?

Manfred K. Als Antwort am 8 Feb. 2012 12:17

ich wollte dir da meine screenshots anzeigen, blicke aber nicht wie ich die im forum einfüge!!!!

SP_Azubi Als Antwort am 8 Feb. 2012 12:19

[quote user="Manfred K."]

ich wollte dir da meine screenshots anzeigen, blicke aber nicht wie ich die im forum einfüge!!!!

Ich lade die Bilder zuerst über mein Profil hoch, und wähle dann aus.

Andi Fandrich Als Antwort am 8 Feb. 2012 12:21

[quote user="Manfred K."]Wo wird aber definiert, was da onmouseover angezeigt soll???[/quote]

Das steht alles auf der Seite, die SP_Azubi verlinkt hatte (http://sharepointjavascript.wordpress.com/2011/09/12/preview-metadata-in-list-view-on-mouseover-updated-version/). Wenn für den parameter arrOfFieldsToShow nichts angegeben wird, werden alle verfügbaren Felder angezeigt.

Manfred K. Als Antwort am 8 Feb. 2012 13:16

habe schon alles ausprobiert:

so:         arrOfFieldsToShow:['EndDate','Title','test11'],

und so: arrOfFieldsToShow:['EndDate#','Title#','test11#'],

Trotzdem nix!!!

Manfred K. Als Antwort am 8 Feb. 2012 14:00

Das Problem ist, bei mir wird gar nichts angezeigt, nicht mal wenn ich arrOfFieldsToShow:[] leer lasse!!!

Was ich rausgefunden habe: Wenn ich aber auf das kleine Bildchen CLICKE, dann öffnet sich die DispForm.aspx! Aber onmouseover wird nix angezeigt, außer Rahmen vom Fensterchen ->  'border':'2px silver ridge'

???

Manfred K. Als Antwort am 8 Feb. 2012 14:11

OK, hat sich erledigt!!!! Auf einMal gings!!!

Danke an Alle!!!! Vielen Dank!!!!

Franz Dirnecker Als Antwort am 31 Jan. 2012 18:22

Wenn du mit einer Personenspalte arbeitest, kannst du diese so konfigurieren, dass automatisch auch das Profilbild des Benutzer mit angezeigt wird.

Wenn du mit einem richtigen Mouseover-Effekt arbeiten willst, würde ich dies mit Javascript lösen. Hier reagierst du auf den Mouseover, indem die z.B. mit der Javascript Client API (SP 2010) die entsprechenden Bildchen z.B. aus einer SP-Bibliothek lädst. Du brauchst natürlich ein entsprechendes Matching-Kriterium, damit du jeweils das Bild lädst, dass dem entsprechenden Listeneintrag zugeordnet ist. 

Um mit SP 2007 per Javascript die Bilder aus SP-Bibliotheken zu laden kannst du z.B. das jQuery-SharePoint-Framework SPServices nutzen.

Wenn die Bilder außerhalb des SharePoints liegen, kannst du dir natürlich die Zugriff auf SharePoint-Inhalte per Javascript sparen...

Manfred K. Als Antwort am 2 Feb. 2012 16:04

Hallo Franz, vielen Dank für deine Rückmeldung!

Ich möchte schon mit dem richtigen mouseover arbeiten.

Nun  habe ich die bilder in die Bildbibliothek geladen. Weiter??? Matching-Kriterium???

Könntest du mir bitte evtl. Schritt für Schritt erklären, wie ich da vorgehen soll???

Danke!

Franz Dirnecker Als Antwort am 2 Feb. 2012 17:47

Mit Matching-Kriterium meine ich, dass das Script ja wissen muss, welches Bild angezeigt werden soll, wenn man mit der Maus über das Element xyz fährt.

Ich beschreibe nun pseudomäßig mit Hilfe von SPService (Javascript Client API sollte aber wie gesagt genauso funktionieren), wie man dies umsetzt.

• Binde SPService und jQuery ein. Wenn du den Mouseovereffekt nur auf der Liste bzw. Ansicht benötigst, kannst du sämtlichen Javascript-Code in einem Content-Editor-WP platzieren 
• Sorge mit jQuery dafür, dass das Script bei Mouseover über eine bestimmte Spalte oder über die ganze Zeile reagiert
  http://api.jquery.com/mouseover/ --> musst schauen, welchen Selector sich dafür eignet 
• In dem Beispiel auf der jQuery-Seite wird ein Text bei Mouseover verändert. Du willst aber, dass ein PopUp o.ä. erscheint. Also suchst du dir ein jQuery-PopUp-Plugin deiner Wahl, das bei Mouseover ein PopUp öffnen lässt 
• Nun muss in dem PopUp aber das richtige Bild erscheinen. Stellt sich nun die Frage, welches Bild angezeigt werden soll und wie ich an die Bild-URL komme 
• Jetzt kommt SPServices ins Spiel. Mit GetListItems kannst du SharePoint Listenelemente und deren Eigenschaften aus beliebigen Listen mit Javascript abfragen --> http://spservices.codeplex.com/wikipage?title=GetListItems&referringTitle=Lists
   
• Bei dieser Funktion muss die diverse Parameter angeben, z.B. Name der abzufragenden Liste (oder noch besser deren List-ID), die CAML-View-Fields usw. und ganz wichtig die CAMLQuery. Mit der CAML-Query schränkst du die Ergebnisse ein, die du bei der Abfrage zurückbekommst. In unserem Fall willst du ja nur ein konkretes Element bzw. Bild. Also lautet die CAMLQuery so oder so ähnlich
  <Query><Where><Eq><FieldRef Name='Name' /><Value Type='Text'>Platzhalter</Value></Eq></Where></Query>
   
• Jetzt kommt die Matching-Geschichte. Du musst ja den Platzhalter-Wert übergeben. Du musst anhand des Elements, bei dem die gerade mit der Maus darauf bist wissen welchen Wert du übergeben musst, damit du genau das richtige Bild angezeigt bekommst. Hier sehe ich zwei Möglichkeiten

1. Eine Spalte in der Ausgangsliste hat den gleichen Wert wie die Namensspalte in deiner PictureLib. Dann kannst du dir mit jQuery beim Mouseover-Event den Wert holen, diesen übergeben und bekommst dann die URL des gewünschten Bildes zurück
2. Sinnvoller ist wahrscheinlich dies: Die pflegst in der PictureLib eine zusätzliche Spalte, die das Matchingkriterium enthält. Dann kannst du dir mit jQuery bei Mouseover-Event einen Wert aus einer bestehenden Spalte holen, anhand der du bestimmen kannst welches Bild angezeigt wird. Mit diesem Wert führst du GetListItems aus. Damit bekommst du dann als Ergebnis das Bild, das in der Matchingspalte den entsprechenden Wert hat

• Wie auch immer, schlussendlich bekommt du über GetListItems ein Ergebnis, in dem auch der Name des Bildes ist (z.B. example.jpg). Im PopUp kannst du dann einen <img src="path/to/your/piclib/example.jpg">Tag platzieren, der dann dynamisch bei Mouseover den src-Pfad setzt und damit das Bild anzeigt.

Zusammenfassung:

• Du musst Javascript und hier jQuery und SPService beherrschen
• Bei Mouseover wird ein PopUp-Fenster geöffnet, dass ein <img>-Tag enthält dass dynamisch jeweils den Bildnamen inkl. Endung bekommt
• Diesen Bildnamen bekommst du, indem du mit SPService die PicLib abfragst und dabei den entsprechenden Wert übergibst.

Hört sich nach viel an, ist aber gar nicht so wild.