Einfache Light Box Bildergalerie

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 � Einfache Light Box Bildergalerie

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. 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 | Einfache Light Box Bildergalerie datum

23.07.2022 20:11 (zuletzt bearbeitet: 25.06.2023 09:16)

Daishi

Informationen anzeigen

Beitr�ge:	389
Registriert seit:	08.01.2022

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

Endlich nach langem habe ich es fertig, wie gesagt strenge ich mich sehr an, es ist eine einfache Light Box Bilder-Galerie. Ich habe mir gedacht, um eine Bilder-Galerie zu haben, warum muss ich da ein Premium Forum haben.

Wolfgang hat mich seit langem, inspiriert. Ich gebe zu, ich bin nicht so gut wie Wolfgang. Bin noch Anfänger, aber ich gebe mein Bestes.

Das hier war bis jetzt die schwerste Arbeit für mich, fasziniert hat mich das durch Wolfgangs Lupenfunktion. Habe an diese Arbeit mindestens 6 Wochen gehangen immer Stück für Stück.

Dieses Script ist mit HTML und CSS aufgebaut und funktioniert auf "Eigene Seiten".

Habe dafür Bilder aus dem Internet benutzt. Ich habe selbst keine schönen Bilder, sonst hätte ich eigene Bilder dafür verwendet.

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>LightBox Bilder Galerie</title>
    <!-- Erforderliche Meta-Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">    
</head>
<body>
     <div class="container">
        <h3 class="text-center mt-5">LightBox Bilder Galerie</h3>
      <h4 class="text-center text-secondary mb-0 pb-0">Klicken Sie auf das Bild, um das Bild zu vergrößern
        <br>
          <br>
        mit Lupen funktion
        </h4>
    </div>
    <div class="container">
      <div class="main-wrapper">
        <div class="row">
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/269923/pexels-photo-269923.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/693267/pexels-photo-693267.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-fluid">
              </div>
            </div>              
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/1366929/pexels-photo-1366929.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/34199/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/288530/pexels-photo-288530.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/106344/pexels-photo-106344.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-fluid">
              </div>
            </div>
 
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img  src="https://images.pexels.com/photos/313736/pexels-photo-313736.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" class="img-fluid">
              </div>
            </div>              
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img  src="https://images.pexels.com/photos/891679/pexels-photo-891679.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapper">
              <div class="img-item text-center">
                <!-- Hier kann man das Bild einfügen -->
                <img src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" class="img-fluid">
              </div>
            </div>              
          </div>                       
        </div>
      </div>
    </div>
            
    <div class="gallary-bg">  </div>        
      
    <!-- Optional JavaScript -->
    <!-- zuerst jQuery, dann Popper.js, dann Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
 
    
    
  </body>
</html>
 
<script id="rendered-js">
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
 
  /*Lupe herstellen:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
 
  /*Lupe einsetzen:*/
  img.parentElement.insertBefore(glass, img);
 
  /*Legen Sie die Hintergrundeigenschaften für das Lupenglas fest:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = img.width * zoom + "px " + img.height * zoom + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
 
  /*eine Funktion ausführen, wenn jemand die Lupe über das Bild bewegt:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
 
  /*und auch für Touchscreens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*Verhindern Sie andere Aktionen, die beim Bewegen über das Bild auftreten können*/
    e.preventDefault();
    /*Holen Sie sich die x- und y-Positionen des Cursors:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*verhindern, dass das Lupenglas außerhalb des Bildes positioniert wird:*/
    if (x > img.width - w / zoom) {x = img.width - w / zoom;}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - h / zoom) {y = img.height - h / zoom;}
    if (y < h / zoom) {y = h / zoom;}
    /*Stellen Sie die Position des Lupenglases ein:*/
    glass.style.left = x - w + "px";
    glass.style.top = y - h + "px";
    /*zeigen, was die Lupe "sieht":*/
    glass.style.backgroundPosition = "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px";
  }
 
  function getCursorPos(e) {
    var a,x = 0,y = 0;
    e = e || window.event;
    /*Holen Sie sich die x- und y-Positionen des Bildes:*/
    a = img.getBoundingClientRect();
    /*Berechnen Sie die x- und y-Koordinaten des Cursors relativ zum Bild:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*Betrachten Sie das Scrollen einer Seite:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return { x: x, y: y };
  }
}
 

$("img").click(function () {
  const imgClone = $(this).parent();
  $(".gallary-bg").addClass("gallary-bg-block");
  $(".gallary-bg").append(imgClone.clone());
  $(".gallary-bg .img-item img").addClass("animated fadeIn");
  $(".gallary-bg").removeClass("animated fadeOut");
  $('.gallary-bg .img-item img').attr('id', 'myimage');
 
  magnify("myimage", 2);
 
});
 
$(".gallary-bg").click(function () {
  $(this).addClass("animated fadeOut");
  $(this).children().children().addClass("fadeLeft");
  $(this).children().remove();
  var rmBg = $(this);
  setTimeout(() => {
    rmBg.removeClass("gallary-bg-block");
  }, 400);
});
//# 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
 
 .main-wrapper{
          padding: 50px 0; 
        }
 
        img{        
          cursor: pointer;  
        }
 
        .img-wrapper{
          margin: 10px 0;
          transition: left 1s linear;
        }
 
        .gallary-bg {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #000000c7;
            display: none;    
            cursor: pointer;  
        }
 
        .gallary-bg-block {
          display: block;
        }
 
        .gallary-bg-block .img-item {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
 
        .gallary-bg .img-item > img {
          transition: all ease-in 0.5s;
          transform: scale(0);
        }
 
        .gallary-bg-block .img-item > img {            
          transform: scale(1);
          padding: 5px;
          border: 2px solid #ffffff;
          border-radius: 2px;
        }
 
        .img-magnifier-glass {
          position: absolute;
          border: 3px solid #000;
          border-radius: 50%;
          cursor: none;
          /*Stellen Sie die Größe des Lupenglases ein:*/
          width: 200px;
          height: 200px;
          z-index: 999999;
        }
     
 

Schlie�en

Zur Demo
Einfache LightBox Bilder Galerie!

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Beitrag wurde gelesen, ist in Arbeit!

Antworten

#2 | Einfache Light Box Bildergalerie mit Lupe - beliebig platziert - Teil 1+2 datum

24.06.2023 23:55 (zuletzt bearbeitet: 25.06.2023 09:15)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3453
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1317

Einfache Light Box Bildergalerie mit Lupe - beliebig platziert - Teil 1

Hallo Daishi,
schön dass Du wieder da bist!

Wie Du weist, suche ich gerne nach Fehler und Lösungen. Wenn es dann gar nicht funktionieren will und auch nicht am nächsten Tag, nächste Woche oder ...., dann muss etwas anderes her!
Im ersten Teil wollte ich die reine HTML-Version einsetzen, im zweiten Teil sollte die Möglichkeit bestehen die kleine Light Box sogar in Forum-Beiträgen zu nutzen!

Habe da noch eine weitere Möglichkeit gefunden!
Das neue Skript kommt jetzt ohne zusätzliche Java-Bibliotheken und ohne CSS-Dateien aus!
Kann für kleine Bildansichten auch im Portal genutzt werden!
Funktioniert in allen Templates & Mobil!

Was kann die Light Box?

Die Lightbox zeigt sortiert ein Anzahl von Bildern an, die Anzahl der Bilder wird nicht begrenzt (Premium-Tarif)!
Mit einem Klick auf das Bild, wird die Ansicht in den Modal-Modus umgeschaltet!
Das Bild kann jetzt auch mit einer Lupe betrachtet werden!
Die Lupe wird erst eingeblendet, wenn der Mauszeiger auf das Bild zeigt!
Ein weiterer Klick führt wieder zurück!
Die max. Anzahl der Bilder in einer Reihe und die max. Größe der Light Box kann bestimmt werden!
Die Light Box kann an einen beliebigen Platz in z.B. Kopf- oder Fußzeile, in der Forum Übersicht - Footer oder auch in einer Portalbox platziert werden!
Das Skript funktioniert in allen Templates, auch im neuen V6 und Mobil !!!

Was hat sich geändert?

Habe das Skript von externen Bibliotheken unabhängig gemacht!
Zwei zusätzliche CSS-Dateien und drei zusätzliche JavaScript-Dateien sind weggefallen!!!
Habe auch Classes und ID's namentlich geändert, damit sie nicht andere Skripte beeinflussen!
Die Bilder werden jetzt modal sauber angezeigt, sodass der gesamte Hintergrund eingegraut wird!

Installation für alle Templates & Mobil

Einfach, zum Ausprobieren:

Das folgende Skript wird für die Template (v1-4) in die Kopf- oder Fußzeile kopiert.
Für das neue Xobor V6 und Mobil nach Eigenes Javascript.

Oder als Plugin für die Template (v1-4), Xobor (v6) & Mobil:

Zum Positionieren das komplette Skript als PIugin in z.B. "Forum Übersicht - Footer " kopieren!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, z.B. Business - Template (144) & Mobil - Template (177), Auswahl mit Mausklick oder Strg + Mausklick!

Oder in die Portalbox, am besten "Hauptbereich Mitte"!

Die max. Breite und damit die Größe der Light Box kann in Zeile 63 eingestellt werden!
Die Anzahl der max. Bilder in einer Reihe kann in Zeile 75-77 bestimmt werden, ist auch abhängig von der Größe der Light Box - (6 Bilder 13%, 5 Bilder 15%, 4 Bilder 20%, 3 Bilder 25%, 2 Bilder 35%)
Die Größe der Lupe kann in Zeile 53+54 geändert werden!
Die Bilder können in Zeile 94, 103, 112, ... ausgetauscht werden!
Benötigt man mehr Bilder, braucht nur der Div-Container Zeile 90-97 gedoppelt werden!

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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
 
<style>
.main-wrapp {
  padding: 50px 0; 
}
.main-wrapp img {
  cursor: pointer;  
}
.img-wrapp{
  margin: 10px 0;
  transition: all 1s linear;
}
.img-gal {
  max-width: 100% !important;
  height: auto;
}
.galerie-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000c7;
  display: none;    
  cursor: pointer;  
}
.galerie-bg-block {
  z-index:99999;
  display: block;
}
.galerie-bg-block .img-pos {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.galerie-bg .img-pos > img {
  transition: all ease-in 0.5s;
  transform: scale(0);
}
.galerie-bg-block .img-pos > img {        
  transform: scale(1);
  padding: 5px;
  border: 2px solid #ffffff;
  border-radius: 2px;
}
.img-lupe {
  position: absolute;
  border: 3px solid #555555;
  border-radius: 50%;
  cursor: none;
  
  /* Größe der Lupe */
  width: 200px;
  height: 200px;
  z-index: 999999;
  visibility:hidden;
}
.galerie-bg-block .img-pos:hover .img-lupe {
  visibility: visible;
}
.cont {
  width: 100%;
  max-width:1000px;
  padding: 0 15px;
  margin: 0 auto;
}
.main-wrapp .row {    
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.main-wrapp .col-md-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding: 0 15px;
}
</style>
 

    <div class="cont">
      <div class="main-wrapp">
        <div class="row">
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/269923/pexels-photo-269923.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-gal">
              </div>
            </div>
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/693267/pexels-photo-693267.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-gal">
              </div>
            </div>              
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/1366929/pexels-photo-1366929.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-gal">
              </div>
            </div>
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/34199/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-gal">
              </div>
            </div>
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/288530/pexels-photo-288530.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-gal">
              </div>
            </div>
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/106344/pexels-photo-106344.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="" class="img-gal">
              </div>
            </div>
 
          </div>
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img  src="https://images.pexels.com/photos/313736/pexels-photo-313736.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" class="img-gal">
              </div>
            </div>              
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img  src="https://images.pexels.com/photos/891679/pexels-photo-891679.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" class="img-gal">
              </div>
            </div>
          </div>
 
          <div class="col-md-3 align-self-center">
            <div class="img-wrapp">
              <div class="img-pos text-center">
                <!-- Bild einfügen -->
                <img src="https://images.pexels.com/photos/297755/pexels-photo-297755.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" class="img-gal">
              </div>
            </div>              
          </div> 
                      
        </div>
      </div>
    </div>         
    <div class="galerie-bg"></div>  
 

<script>
window.addEventListener('load', function(){
  
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
 
  /* Lupe herstellen */
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-lupe");
 
  /* Lupe einsetzen */
  img.parentElement.insertBefore(glass, img);
 
  /* Hintergrundeigenschaften für das Lupenglas */
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = img.width * zoom + "px " + img.height * zoom + "px";
  bw = 4;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
 
  /* Funktion ausführen, wenn die Lupe bewegt wird */
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
 
  /* Auch für Touchscreens */
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /* Verhindert andere Aktionen, die beim Bewegen über das Bild auftreten können */
    e.preventDefault();
    /* x- und y-Positionen des Cursors */
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /* Verhindert, dass das Lupenglas außerhalb des Bildes positioniert wird */
    if (x > img.width - w / zoom) {x = img.width - w / zoom;}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - h / zoom) {y = img.height - h / zoom;}
    if (y < h / zoom) {y = h / zoom;}
    /* Position des Lupenglases */
    glass.style.left = x - w + "px";
    glass.style.top = y - h + "px";
    /* Zeigen, was die Lupe sieht */
    glass.style.backgroundPosition = "-" + (x * zoom - w + bw) + "px -" + (y * zoom - h + bw) + "px";
  }
 
  function getCursorPos(e) {
    var a,x = 0,y = 0;
    e = e || window.event;
    /* x- und y-Positionen des Bildes */
    a = img.getBoundingClientRect();
    /* Berechnung der x- und y-Koordinaten des Cursors relativ zum Bild */
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /* Scrollen einer Seite */
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return { x: x, y: y };
  }
}
 
$(".main-wrapp img").click(function () {
  const imgClone = $(this).parent();
  $(".galerie-bg").addClass("galerie-bg-block");
  $(".galerie-bg").append(imgClone.clone());
  $(".galerie-bg .img-pos img").addClass("animated fadeIn");
  $(".galerie-bg").removeClass("animated fadeOut");
  $('.galerie-bg .img-pos img').attr('id', 'myBild');
 
  magnify("myBild", 2);
});
 
$(".galerie-bg").click(function () {
  $(this).addClass("animated fadeOut");
  $(this).children().children().addClass("fadeLeft");
  $(this).children().remove();
  var rmBg = $(this);
  setTimeout(() => {
    rmBg.removeClass("galerie-bg-block");
  }, 400);
});
//# sourceURL=pen.js
    
});
</script>
 
 

Schlie�en

Bis dann und vielen Dank an Daishi für das interessante Skript

Wolfgang

Antworten

#3 | Einfache Light Box Bildergalerie mit Lupe - In Beiträgen - Teil 2 datum

25.06.2023 07:26 (zuletzt bearbeitet: 25.06.2023 09:16)

Einfache Light Box Bildergalerie mit Lupe - In Beiträgen - Teil 2

Achtung Baustelle!

Der Beitrag wird bald zur Verf�gung stehen.

Antworten

Xobor-Plugin "Bannerwechsel" - Zähler für Bannerklicks � � Forum Design

�hnliche Themen

Antworten

Letzter Beitrag

Neuer Bildeffekt mit Laufschatten - Im Portal und in der Bildergalerie
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Daishi

07.03.2024 00:46
von

Wolfgang • Zugriffe: 800

GIF-Dateien in der Bildergalerie
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von bienchen 5 22.06.2023 15:35
bienchen • Zugriffe: 381
Bilder drehen - In der Bildergalerie & In Beiträgen - Teil 1-5
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 17 05.06.2022 11:39
844er • Zugriffe: 6675
Alben der Bildergalerie zugeklappt anzeigen!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 28.05.2020 20:56
Wolfgang • Zugriffe: 754
Drucker-Button in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 01.01.2020 11:02
Wolfgang • Zugriffe: 891
Kleine Iconbar in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 0 30.01.2017 16:18
Wolfgang • Zugriffe: 1382
Neu! Weitere Diashow in der Bildergalerie!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 1 04.02.2020 19:19
Wolfgang • Zugriffe: 1915
Punktesystem in der Bildergalerie
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 0 08.09.2016 11:37
Wolfgang • Zugriffe: 875
Bildergalerie für Mitglieder freigegeben!
Erstellt im Forum Ank�ndigungen & Termine, wichtige News! von Wolfgang 0 24.05.2015 03:00
Wolfgang • Zugriffe: 852

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 €

36%