img umschreiben

Antworten
#1
19.12.2023 12:49
avatar  Enricos
#1 img umschreiben
En
Enricos
Mitglied

Ich habe ein Problem und weiß nicht genau, wie ich das erklären oder aussprechen kann.

Ich bin dabei für einen Freund für Weihnachten ein Script zu schreiben. Es geht darum, dass er mit dem Script die Bilder nur in den Beiträgen herunterladen kann. Es soll ein schönes Weihnachtsgeschenk sein.

Habe es getestet und es geht so weit, nur in den Beiträgen. Nur das Problem wo ich habe, ist das er die Rahmen überall im Forum anzeigt, das ist nicht das, was ich möchte, bei allen img. Was muss ich tun, dass es nicht bei allen img anzeigt nur in den Beiträgen?

Das zweite Problem ist, ich habe es mal im Portal gemacht. Da muss ich andere Werte angeben wie im Plugin.

Also das Plugin habe ich so erstellt, Admin, Plugin dann untere Leiste Header aber habe den HTML code weggelassen.

Im Portal musste ich die Werte angeben.

1
 
padding: 5px 295px 5px 25px;
 


Im Plugin habe ich diesen Wert.

1
 
padding: 5px 175px 5px 25px;
 


Das ist ganz schön viel, 125 px unterschied

Hier mal das Script.

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
145
146
147
148
149
150
151
 
<style>
 
img {
  display: inline-block;
  vertical-align: top;
}
 

.save-image-on-click:not(.downloaded) {
  border: 4px double grey;
  cursor: pointer;
}
.save-image-on-click:not(.downloaded) + .image-download-indicator {
  position: absolute;
}
.save-image-on-click:not(.downloaded) + .image-download-indicator::before {
  content: "Klicken Sie, auf das bild um dieses \aimage auf der Festplatte zu speichern!";
  position: absolute;
  white-space: pre;
  display: block;
  background: white;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-family: system-ui;
  overflow: hidden;
  max-width: 0px;
  padding: 5px 175px 5px 25px;
  border-radius: 50px 0 0 50px;
  border: 3px double grey;
  box-shadow: 0 0 0 transparent;
  transform: translatex(-100%) scale(0);
  z-index: 0;
  transition: 0.15s all ease-in-out 0s, 0s transform 0.2s;
  margin-top: 5px;
}
.save-image-on-click:not(.downloaded) + .image-download-indicator::after {
  content: "";
  background: white var(--src) no-repeat;
  background-size: cover;
  background-position: center;
  border: 3px double grey;
  border-radius: 5px;
  display: block;
  width: 64px;
  height: 64px;
  padding-bottom: 100%;
  position: absolute;
  transition: 0.25s transform cubic-bezier(0.77, -2.13, 0.84, 2.66) 0.25s;
  transform: translate(calc(-100% + 10px), 0) scale(0);
  font-size: 36px;
  line-height: 128px;
  text-indent: 40px;
  text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black, 0 0 10px grey, 0 0 10px grey, 0 0 20px white, 0 0 20px white;
}
.save-image-on-click:not(.downloaded):hover {
  filter: brightness(0.5);
}
.save-image-on-click:not(.downloaded):hover + .image-download-indicator {
  pointer-events: none;
}
.save-image-on-click:not(.downloaded):hover + .image-download-indicator::before {
  transform: translatex(-100%) scale(1);
  max-width: 150px;
  margin-left: -56px;
  box-shadow: -5px 8px 15px black;
  z-index: 0;
  transition: 0.3s all ease-in-out 0.4s, 0s transform 0.27s;
}
.save-image-on-click:not(.downloaded):hover + .image-download-indicator::after {
  transform: translate(calc(-100% + 10px), 0) scale(1);
  z-index: 100;
  transition: 0.25s transform cubic-bezier(1, 2.65, 0.62, 0.12);
}
 
.downloaded {
  border: 4px double green;
}
.downloaded + .image-download-indicator::before {
  content: "Der Download war erfolgreich";
  display: inline-block;
  position: absolute;
  z-index: 100;
  color: black;
  font-size: 12px;
  background: white;
  border-radius: 250%;
  max-width: 182px;
  max-height: 112px;
  height: 132px;
  line-height: 112px;
  text-indent: 2px;
  border: 2px solid green;
  transform: translate(-75%, -25%) scale(0.5);
  opacity: 0.6;
  box-shadow: 2px 8px 15px black;
  text-shadow: 3px 3px 6px #000c;
  transition: 0.25s all cubic-bezier(0.77, -2.13, 0.84, 2.66);
}
.downloaded:hover + .image-download-indicator::before {
  transform: translate(-120%, 10%) scale(1);
  opacity: 1;
  pointer-events: none;
  transition: 0.15s all cubic-bezier(1, 2.65, 0.62, 0.12);
}  
</style>  
 

<div class="sample">
    <img name=" Arbeiten die ich private mache" src="https://iili.io/JI6BzXf.jpg" width="300"/>
    <img src="https://iili.io/JI6BIs4.jpg" width="300" />
    <img src="https://iili.io/JI6BCen.jpg" width="300" />
    <img src="https://iili.io/JI6Bnbs.jpg" width="300" />
    
</div>
 
<script>
function saveImage(e, img = e.target) {
  let { src, name } = img,
  a = document.createElement("a");
  ext = src.replace(/.*(\.[a-z]{3,4})$/i, '$1');
  name = name == null || name == '' ? src.replace(/.*\//i, '') : name.toLowerCase().replace(/\s/g, '_') + ext;
 
  a.style = "display: none";
  fetch(src).
  then(response => response.blob()).
  then(blob => {
    console.log(blob);
    var blobUrl = window.URL.createObjectURL(blob);
    a.href = blobUrl;
    a.download = name;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(blobUrl);
    a.remove();
  }).
  then(() => img.className = "downloaded");
}
 

 
  let allImages = document.querySelectorAll('img');
  allImages.forEach(img => {
    img.classList.add('save-image-on-click');
    img.insertAdjacentHTML('afterEnd', `<span class="image-download-indicator" style="--src:url(${img.src})"></span>`);
    img.addEventListener('click', saveImage);
  });
 

 
</script>
 



Meine Frage ist was muss ich bei der img ändern, dass es nur an der gewünschten Stelle anzeigt, Ich hoffe ich habe mein Problem verständlich erklärt.


Ich bedanke mich im Voraus für die Rückantwort und die Erklärung. In der Suchfunktion habe ich nichts gefunden, ich entschuldige mich, wenn ich hier falsch bin und die Frage hier nicht hingehört.

Nette Grüße

Enricos

Ich benutze das -→>>> Template Business Template (v4) <<<←---

 Antworten

 Beitrag melden
#2
19.12.2023 13:16
avatar  Ingmar
#2 RE: img umschreiben
avatar
Ingmar
Technik

Beitragsinhalte haben die Klasse xquoteable

Das würde daher z.B. nur Bilder in Beiträgen ansprechen:

1
2
3
4
 
.xquotable img {
  display: inline-block;
  vertical-align: top;
}
 

Viele Grüße,
Ingmar
 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!