Korkpinnwand mit Bildern

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Korkpinnwand mit Bildern

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Korkpinnwand mit Bildern datum

15.10.2022 13:35 (zuletzt bearbeitet: 11.04.2024 16:51)

Daishi

Informationen anzeigen

Beitr�ge:	392
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	334

Hallo Wolfgang, nach langer Arbeit und herumtesten mit der CSS habe ich es endlich hinbekommen, es war sehr viel Arbeit, eine Menge Fantasie und Inspiration und Ideen nötig.

Ich habe hier deine Idee genommen, mit der PIN

Ich hoffe, du bist mir nicht böse, dass ich die Idee mit der PIN von dir benutzt habe, um eine schöne funktionierende Korkpinnwand für die Polaroid-Bilder an die Wand anzustecken.

Dieses habe ich für dich geschrieben, da du mich immer wieder inspirierst. Du machst so tolle Arbeiten, hast wundervolle Ideen, die du umsetzt und bist immer zur Stelle, wenn man Hilfe benötigt. Du erklärst auch alles so schön, dass man das als Anfänger versteht.

Sei mir nicht böse, habe es versucht in eigenen Seiten hinzubekommen. Es wurde nichts daraus, es zeigt nur den Stapel Bilder an, aber keine Funktion. Wie gesagt, mit dem Xobor-Forum, mit dem Codieren bin ich noch nicht so warm, bin da noch sehr eingefroren.
Wie gesagt dies habe ich für dich geschrieben, ich hoffe das es dir gefällt. Es ist am Anfang ein Stapel Bilder, insgesamt 6 Stück der Zahl. Diese kannst du dann verschieden an der Wand anstecken.

Hier der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
<div class="drybn-polaroid">
  <div class="pin">
    <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
         <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/bQvmLZR/Abendessen.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Mo, 10. Oktober 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Pilze Essen!</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/FhGnPz5/meine-ausbeute-heute.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Mo, 10. Oktober 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Meine Ausbeute</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/rmRPvm0/1gro-e-marone.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Mo, 10. Oktober 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Große Marone</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/PGWgGhQ/Alma-g-hnt.jpg" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Di, 27. September 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Alma Gähnt</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        <!-- Hier kann man ein Bild einfügen für das Polaroid  -->
        <img src="https://i.ibb.co/VwgvYz7/Bildschirmfoto-vom-2022-10-15-11-12-21.png" alt="polaroid">
      </div>
      <div class="polaroid-date">
        <p>Sa, 8. Januar 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>Glückliches Mitglied</h2>
      </div>
    </div>
  </div>
</div>
 
<div class="drybn-polaroid">
  <div class="pin">
     <!-- Hier kann man ein Bild einfügen für den pin  -->
    <img src="https://i.ibb.co/bNJbGvD/pin.png" alt="pushpin">
  </div>
  <div class="drybn-polaroid__overlay">
    <div class="drybn-polaroid__content">
      <div class="polaroid-image">
        
      </div>
      <div class="polaroid-date">
        <p>Fr, 8. Juli 2022</p>
      </div>
      <div class="polaroid-caption">
        <h2>|</h2>
      </div>
    </div>
  </div>
</div>
 
<!-- Hier beginnt das Javascript  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<script id="rendered-js">
$(function () {
  $(".drybn-polaroid").draggable();
 
  $(".drybn-polaroid").on("mousedown", function (event) {
    $(event.currentTarget).find(".pin").hide();
  });
  $(".drybn-polaroid").on("mouseup", function (event) {
    $(event.currentTarget).find(".pin").show();
  });
});
//# sourceURL=pen.js
    </script>  
 

Schlie�en

Hier der CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
body {
  padding: 0;
  margin: 0;
  background: url("https://i.ibb.co/GHsJYFQ/corkboard.jpg");
}
 
.drybn-polaroid {
  width: 300px;
  height: 340px;
  background: #fff;
  padding: 1rem;
  position: absolute;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transform: rotate(-2deg);
  bottom: 0;
  left: 50%;
}
 
.drybn-polaroid:hover {
  cursor: grab;
}
 
.drybn-polaroid:nth-child(2n) {
  transform: rotate(2deg);
}
 
.drybn-polaroid:nth-child(3n) {
  transform: rotate(1deg);
}
 
.drybn-polaroid:nth-child(4n) {
  transform: rotate(0deg);
}
 
.drybn-polaroid:nth-child(5n) {
  transform: rotate(-3deg);
}
 
.drybn-polaroid::after {
  content: "";
  background-color: white;
  height: 100%;
  width: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
 
.drybn-polaroid::before {
  content: "";
  background-color: white;
  height: 100%;
  width: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
 
.polaroid-image {
  width: 100%;
  height: calc(300px - 2rem);
  background: #2a2a2a;
  margin: 0 auto;
  position: relative;
}
 
.polaroid-image img {
  width: 300px;
  height: calc(300px - 2rem);
  object-fit: cover;
  box-sizing: border-box;
  border: 1px solid #aaa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) inset;
  filter: sepia(50%);
}
 
.polaroid-date p {
  font-family: "Wallpoet", cursive;
  color: #3d0400;
  letter-spacing: 3px;
  background-color: white;
  height: 1rem;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
 
.polaroid-caption {
  text-align: center;
  font-size: 1rem;
  position: relative;
}
 
.polaroid-caption h2 {
  font-family: "Gloria Hallelujah", cursive;
  margin: 0.5rem;
  transform: rotate(-2deg);
}
 
.pin img {
  width: 48px;
  position: absolute;
  top: -1.75rem;
  left: 50%;
  transform: translate(-50%);
}  
 

Schlie�en

Ich hoffe das ich dir damit eine Freude gemacht habe.
Ich es für dich als Dankeschön geschrieben, für alles, für deine Hilfe und dass du immer zur Seite stehst, zu jeder Uhrzeit.

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | RE: Korkpinnwand mit Bildern - Position speichern datum

31.10.2022 10:03 (zuletzt bearbeitet: 31.10.2022 10:04)

Korkpinnwand mit Bildern - Position speichern

Hallo Daishi,
Deine Korkpinnwand ist eine super Idee für besondere und persönliche Bilder, sieht auch echt gut aus!

Was noch fehlt:

Was fehlt um die Pinnwand wirklich nützlicher machen würde, wäre ein Speichern der Bildpositionen!!!
Dann könnte man sich aus dem Berg von Bildern die Favoriten aussuchen, positionieren und mit einem Klick auf die Pinnwand immer seine Lieblingsfotos sehen!
Wäre etwas besonderes!

Habe schon einiges zum Speichern ausprobiert, aber noch nicht hinbekommen!
Hier hast Du ein Speichern in der "ToDo-Liste" bereits eingebaut!

Zur ToDo-Liste: To-Do-Liste

Pinnwand Online!
es gibt viele Adressen, auch mit vielen Möglichkeiten, von ganz einfach bis kompliziert und auch umständlich!

Padlet: https://de.padlet.com/
Ermöglicht das gemeinsame Erstellen und Bearbeiten einer virtuellen Pinnwand in Echtzeit.

Mindmeister: https://www.mindmeister.com/de
In der kostenlosen Version können drei Mindmaps erstellt und mit anderen Nutzenden gemeinsam bearbeitet werden.

Coggle.it: https://coggle.it/
Mit Coggle können gemeinsame Mindmaps erstellt werden. In der kostenlosen Version können eine unveröffentlichte, sowie unbegrenzt viele öffentliche MindMaps erstellt werden.

CMap Tools: http://cmap.ihmc.us/
Programm zur individuellen Erstellung von Concept Maps, welches auf dem eigenen Endgerät installiert werden muss.

Die virtuelle Pinnwand: www.pinnwand4u.de
Einfach und schlicht!

Schließen

Spoiler mit einem Klick öffnen und schließen!

Habe mich mal probeweise bei www.pinnwand4u.de angemeldet!

Einfache Pinnwand mit Verlinkung zur Homepage. Bilder werden übereinander platziert. Das aktuelle Bild ist immer oben! Hinterher keine Korrekturmöglichkeit!

Zu: Meine virtuelle Pinnwand vom Treffpunkt

Bis dann
Wolfgang

Antworten

Webseitenbesuche zählen - Besucherzähler � � Link unten entfernen - Linkänderung in der Fußleiste

�hnliche Themen

Antworten

Letzter Beitrag

Rotierende Animation von Bildern - Würfel Animation
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.12.2024 15:19
von

Wolfgang • Zugriffe: 681

Bild überlappt im Hintergrund - Fotoecken füe Bilder
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

19.11.2023 20:27
von

Wolfgang • Zugriffe: 480

Auswahlmenü Bild-Einstellungen und Bilder verlinken optisch anpassen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

28.05.2023 12:56
von

Wolfgang • Zugriffe: 594

Bilder aus "Datei anhängen" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang

06.11.2025 17:51
von

Dankeschön • Zugriffe: 3115

Bilder vergrößern mit variabler Lupenfunktion!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.06.2023 14:42
von

Kipper-Spedition • Zugriffe: 33815

Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

29.05.2024 10:24
von

Wolfgang • Zugriffe: 2874

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20831

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 5175

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Korkpinnwand mit Bildern

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

93%