Beiträge von Spider67

Spider67

Jetzt hat es geklappt!! Danke Dir.

Spider67

hat nichts genutzt. Soll ich vielleicht mal den Browser deinstallieren und neu installieren?

Spider67

Eine Sache ist noch etwas mysteriös: Im Opera und im Firefox funktioniert alles problemlos, im Chrome hingegen werden die ersten 4 Bilder noch immer klein angezeigt und ab dem 5. klappt es.

Im Chrome eines Bekannten wird alles ab dem ersten Bild komplett richtig angezeigt. Der Browser ist überall auf dem neuesten Stand.

Was kann hier die Ursache sein? Ich habe auch noch folgendes getestet: Wenn ich wie von Euch vorgeschlagen die URL direkt im Browser eingebe, wird mir bei den ersten 4 Bildern automatisch das kleinere Bild angezeigt und nicht das große, ab dem 5. passt es. Wenn ich dasselbe beim Laptop meiner Gattin mache erscheint auch beim ersten Bild gleich das große Bild richtig. Was passt hier nicht???

Spider67

Hallo,

gestern habe ich nochmal alles relevanten Dateien überprüft und auch am Server gecheckt. Dann alles noch mal hochgeladen und auch zweimal mit dem Support von 1und1 telefoniert. Die sagten mir, dass serverseitig kein Problem vorliegt und bei Ihnen die Bilder im Broswer korrekt angezeigt werden.

Heute habe ich es mal auf Chrome getestet und siehe da es klappt!!! Keine Ahnung was der Grund war.

Jedenfalls nochmals vielen Dank für die Geduld und die Hilfe.

Spider67

Dieser Fehler tritt jedoch nur bei dieser neu gestalteten Seite auf und ist bisher nicht aufgetreten. Ich habe bei anderen Seite auch Links von kleinen Bildern auf große Bilder eingebaut, wobei das anstandslos klappt. Ich werde also mal den hoster (1und1.de) kontaktieren.

Habe ich das richtig verstanden, dass diese Weiterleitung am Server stattfindet, also in einer htaccess Datei oder in php?

Spider67

Kann das nicht irgendwie in der Javascript Datei drinnen stehen? Wobei ich gleich dazu sage, diese habe ich nicht verändert.

Spider67

wie kann man so etwas beheben?

Spider67

Ich habe es gerade getestet, wenn man die URL vom große Bild eingibt kommt das kleine. Aber warum ist das so? Woran kann so etwas liegen?

Soll ich einmal kontrollieren, welche Dateien auf den Webspace hochgeladen wurden? Bzw. macht es Sinn, die ganzen großen Bilder nochmals zu löschen und neu abzuspeichern?

Wo soll ich da wirklich mit der Fehlersuche beginnen?

Spider67

Kann es nicht doch irgendwo an Eigenschaften vom CSS oder JS liegen, da ich ja 100% ig die beiden Bilder mit unterschiedlichen Abmessungen abgespeichert habe?. Ich werde abends mal nochmal den kompletten Code posten, vielleicht hat ja noch wer eine Idee.

Spider67

Ist es nicht möglich, dass durch eine CSS Eigenschaft oder durch das Javascript beim großen Bild beim Aktivieren der Ligtbox (beim Klick auf den Link) die Eigenschaften width und height geändert werden?

Spider67

Also mit den Kommentaren zur Seite hatte ich gerechnet, die helfen mir jedoch nicht weiter. Ich habe auch schon mehrmals geschrieben, dass ich die Seite so übernommen habe und erst dabei bin (als Laie mit einem Zeitaufwand von 2 oder 3 Stunden pro Woche) sie zu modernisieren.

Die Bilder sind definitiv unterschiedlich groß auf meiner Seite gespeichert, wie ich schon geschrieben habe: das kleine mit 250px mal 190 px und das große mit 700px mal 500px. Also wo erkennt man, dass die Bilder gleich groß sind?????

HTML

<!doctype html>
<html>
<head>
<!-- Kommentar  -->
<title>Besatz 2019</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../../css/lightbox.css">
<link rel="stylesheet" type="text/css" href="../../css/bilder uebersicht 1 _lightbox.css">
</head>
<body>
<div id="galerie">
  <a href="Besatz_2019_Bild_1_g.JPG" data-lightbox="Besatz_2019" data-title="Der Besatz 2019 beginnt"><figure><img src="Besatz_2019_Bild_1_k.JPG" alt="Container mit Fischen"/><figcaption>Der Besatz 2019 beginnt</figcaption></figure></a>
  <a href="Besatz_2019_Bild_2_g.JPG" data-lightbox="Besatz_2019" data-title="Unser Stammlieferant aus Litschau."><figure><img src="Besatz_2019_Bild_2_k.JPG" alt="Schlossfischerei Litschau"/><figcaption>Unser Stammlieferant aus Litschau.</figcaption></figure></a> 
  <a href="Besatz_2019_Bild_3_g.JPG" data-lightbox="Besatz_2019" data-title="Über die Rutsche ins Wasser."><figure><img src="Besatz_2019_Bild_3_k.JPG" alt="Karpfen auf der Rutsche"/><figcaption>Über die Rutsche ins Wasser.</figcaption></figure></a>

Alles anzeigen

Hier ist der Anfang des Html und die Bilder sind definitiv unterschiedlich groß im Ordner abgespeichert.

Spider67

Die Wahrscheinlichkeit, dass Du über meine Seite lästerst, wenn ich den Link poste liegt nicht bei 100% sonder bei 1000% aber bitte sehr:

Ich möchte Hilfe haben, vielleicht klappt das ja.

http://www.fischereivereinkleinmeiseldorf.at/.

Hier findet man die Datei im Menüpunkt Bilder/Besatz 2019.

Vielleicht schaffen wir es ja, hier die erwünschte Hilfestellung zu bekommen.

Danke vorab.

Spider67

Hallo,

eine Frage noch zu der Galerie. Ich habe jetzt alles fertig veröffentlicht und es passt auch soweit alles. Die kleinen Vorschaubilder sind positioniert und werden richtig angezeigt. Auch die lightbox funktioniert. Die kleinen Bilder sind mit 250px mal 190 px gespeichert, die großen mit 700px mal 500px.

Beim Anklicken der lightbox wird die Funktion korrekt aufgerufen, jedoch werden die großen Bilder auch nur mit 250px mal 190px angezeigt und nicht größer.

Ich komme partout nicht darauf, wo und wie ich die Angaben für width und height im CSS ändern muss, damit die Bilder in der gewünschten Größe angezeigt werden.

hier nochmals das komplette CSS aus der lightbox:

Code

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 700px;
  height: 500px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-image: url("../bilder/2011_hintergrund_1.png");
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url("images/loading.gif") no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url("images/prev.png") left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url("images/next.png") right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: center;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 1.5rem;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url("images/close.png") top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Alles anzeigen

Ich habe auch schon versucht, die Seite zu untersuchen , und bei der Klasse .lb-outerContainer habe ich width und height auf 700px mal 500px eingestellt, jedoch ohne Erfolg.

Ich bitte um Hilfe, wo ich die Angaben für width und height ändern muss, damit die Bilder in der richtigen Größe angezeigt werden.

Danke vielmals.

Spider67

Ist mir jetzt klar, dass bei dem kleinen Container, eine Positionsänderung nichts bewirkt.

Die Sache mit dem figcaption habe ich auch schon hinbekommen.

Spider67

wahrscheinlich wirst du es nicht glauben, aber das versteh ich nicht

Spider67

Definieren width und height nicht die Größe des Containers der das Kreuz umgibt?

Bezüglich Text muss ich also jedes img mit einem figure umschließen und dort dann figurecaption mit dem gewünschten Text einfügen, passt das so?

Spider67

Wieso wird das Kreuz nicht durch das CSS positioniert? es wird doch als Hintergrundbild eingebunden und im umgebenden Container mit top und right platziert.

Wie und wo muss ich den Text im Vorschaubild deklarieren, damit er zentriert unter dem kleinen Bild erscheint?

Spider67

Abgesehen davon, dass Du wahrscheinlich recht hast, dass das nicht besonders aussieht (wenn man es vornehmer ausdrückt), aber wird nicht die Position des Kreuzes durch dieses CSS bestimmt:

Code

background: url("images/close.png")top right no-repeat;

Oder liege ich da falsch?

Weiters wollte ich noch fragen, ob es auch möglich ist, beim Vorschaubild den selben Text wie beim großen Bild unter dem Bild anzuzeigen.

Spider67

Danke habe ich hinbekommen und die Schriftgröße sowie die Ausrichtung auf die von mir gewünschten Werte korrigiert.

Eines habe ich noch nicht hinbekommen:

Code

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url("images/close.png")top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

Alles anzeigen

Mit diesem CSS wird das x zum schließen des Bildes positioniert. Wie kann ich die Position dieses X ebenfalls zentrieren? Das schaffe ich bisher nicht.

Spider67

Könnt Ihr mich vielleicht auch noch helfen, wie man den Text im "data-title" attribut formatieren - also unter dem großen Bild zentrieren und auch vergrößern kann?

Danke für die Hilfe.

Dass im a Element und Img Element anscheinend gar keine Klassen zugewiesen werden müssen erscheint mir derzeit schon klar. Wobei ich noch immer nicht weiß, wofür die diversen Klassen in der css Datei dann gut sind.

Beiträge von Spider67

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2

Bildergalerie 2