Beiträge von ronsenbonsen

ronsenbonsen

Alles klar jetzt läufts, hab zwar nichts geändert aber es geht

ronsenbonsen

Hab ich gemacht, in den BackEnd Bereich komme ich auch und kann da auch normal navigieren aber sobald ich ins Frontend gehe und dort umher navigieren möchte, funktioniert es nicht mehr.

Mit BetterSearchReplace habe ich auch schon den normalen Domainnamen zu localhost geändert, was aber keine Besserung brachte

ronsenbonsen

Moin Moin,

hat jemand schon mal jemand eine Kopie von einer laufenden Wordpressseite + Datenbank gemacht?

Bevor ich meine Seite update wollt ich die ganzen Updates lokal mal testen, wenn ich nun aber einfach die ganzen Dateien via FTP auf meinen PC in den htdocs Ordner in Xampp lege, dann kommt folgender Fehler "Fehler beim Aufbau einer Datenbankverbindung". Woran kann das liegen? Wenn man googelt findet man immer Tipps für Umzug von Lokal zu Online.

Vielen Dank im voraus!

ronsenbonsen

würde auch denken dass dein Bild zu klein ist und deswegen auf die ganze Breite gestreckt wird.. mach das Bild größer und dann sollte es auch besser aussehen

ronsenbonsen

Alternativ kann ich dir auch Photoshop CS2 empfehlen, die Version ist sogar gänzlich kostenfrei

Dort dann auf Bild klicken, dann Bildgröße bearbeiten und dort die gewünschte Größe eingeben, fertig

ronsenbonsen

So nach langer Zeit kam ich nun wieder dazu beim portfolio weiterzumachen,

die meisten probleme konnte ich bereits lösen aber ein paar Sachen sind noch.

Weiß jmd ob es eine Möglichkeit gibt eine Lightbox zu schließen indem man einfach irgendwo außerhalb der lightbox klickt? Aktuell geht es bei mir nur wenn ich direkt auf den close button klicke

Und wie aufwendig wäre es wenn ich die lightbox per Tastatur steuern lasse? Also mit Pfeiltasten zum nächsten Bild wechseln und mit ESC die lightbox schließen?

ronsenbonsen

Was genau hast du da geändert Basti?

Wegen den Pfeilen, die Pfeile sind aber nicht mittig von den Bildern, sondern mittig von der gesamten Lightbox. Also sozusagen mittig vom Bild oben und den Bildern unten - sieht man bei deiner Seite auch ganz gut

@derneue: nö, hab mir da ne Vorlage von W3Schools und für das Portfolio eine Vorlage von Bootstrap geholt. Bin eher der Bearbeiter als der Schaffer

Falls du die Vorlagen auch nutzen willst, musst du mal weiter oben im Thread schauen hab alles verlinkt

ronsenbonsen

Bei den neuem Fiddle hauts auch nicht hin, da ist alles untereinander

Kann vielleicht noch jemand anderes mit drüber schauen? Ich komm einfach nicht drauf wo der Fehler liegt..

Aber bzgl des Programms noch ein Tipp, solange du keine serverseitigen Sprachen verwendest dann reicht auch ein x-beliebiger html editor(kann dir atom empfehlen), musst dann nur die CSS richtig verlinken und dann dein .html Datei im Browser öffnen.. musst dann allerdings immer speicher und die Seite neuladen. Alternativ gehts auch mit brackets von adobe, das ist mit live vorschau

ronsenbonsen

https://jsfiddle.net/sg8o0gso/

Im Fiddle erkennt mans aber nicht so gut, da man dort nicht runterscrollen kann und nicht sieht, dass der untere Teil der Lightbox vertikal und nicht horizontal angeordnet ist (könnt aber auch an meinen Bildschirm liegen)

ronsenbonsen

Damit wir wieder auf gleichen Stand sind... In der Zip Datei ist das gesamte Portfolio + CSS etc gespeichert.

Meine Änderungen sind da auch alle schon mit dabei

ronsenbonsen

Die CSS hat ein so eingefügt, dass man die sehen kann.

Normalerweise hab ich die auch nur verlinkt

Hab meinen Fehler auch schon gefunden, ich habs in bootstrap.min.css gespeichert -> funktioniert nicht

Wenn ichs aber in 4-col-portfolio.css speicher dann funzt es

Also das ist die aktuelle CSS

Code

/*!
* Start Bootstrap - 4 Col Portfolio (https://startbootstrap.com/template-overviews/4-col-portfolio)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/blob/master/LICENSE)
*/

body {
padding-top: 54px;
}

@media (min-width: 992px) {
body {
padding-top: 56px;
}
}

.portfolio-item {
margin-bottom: 30px;
}

.pagination {
margin-bottom: 30px;
}
.row > .column {
padding: 0 8px;
}

.row:after {
content: "";
display: table;
clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 25%;
}

/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}

/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}

/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
display: none;
width:100%;
background:black;
}

.myslides img{
width:100%;
height:auto;
}

/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}

img.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.3s
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

Alles anzeigen

Dann habe ich noch die Breite der Slides eingestellt (pack das sobald alles funzt natürlich noch in die CSS)

Code

<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca3.jpg" style="width:100%">
</div>

Soweit sieht es nun auch schon gut aus, ABER 2 Kleinigkeiten stimmen noch nicht ganz

Zum einen werden die Vor und Zurück buttons in der Lightbox immer mittig an der Lightbox ausgerichtet. Ich möchte dass die Mittig vom aktuell angesehen Bild positioniert werden.

Und die kleinen Vorschaubilder unter dem aktuell angezeigten Bild werden momentan noch untereinander angezeigt, schöner wäre es wenn diese nebeneinander in einer Reihe angezeigt

Also im Endeffekt soll es genau so wie bei W3School aussehen

ronsenbonsen

Wobei...mir fällt auch gerade dass es im Fiddle (exakt der selbe Code) anders aussieht als ohne Fiddle.

Den ganzen Code von mir kannst du die hier anschauen: https://github.com/BlackrockDi…bootstrap-4-col-portfolio (Bootstrap Portfolio Template -> Grundvorlage) sowie den weiteren Code hier: https://www.w3schools.com/howto/howto_js_lightbox.asp

ronsenbonsen

Ne noch ist alles offline

Kannst du mal versuchen in der fiddle von mir, das anzupassen dass es wie in deiner fiddle aussieht?

ronsenbonsen

https://jsfiddle.net/20j562wo/1/

Schau mal ich hab hier mal die gesamte CSS und meinen gesamten HTML Code mit reingezogen.´

ronsenbonsen

Ne leider nicht also hab jetzt nochmal alles genau so gemacht wie du in deinem fiddle aber es kommt bei mir nicht so raus wie bei dir

Beim HTML Teil hast du als letztes 3x </div> --> wenn ich das einfüge zerhauts mir die gesamte Seite schon bevor man die Lightboxgallerie öffnet

Beim CSS hab ich auch alle Änderungen übernommen aber das hat auch nicht viel geändert, es sieht immer noch genau so aus wie auf dem Bild oben bei mir. Beim JS hast du ja nichts geändert so wie ich es gesehen hab.

Im ersten Beitrag hab ich auch noch einen Link für die kompletten Code eingefügt, falls das irgendwie behilflich ist

& ne ne das soll schon mit Lightbox geschehen, nur bisher ist es so, dass ich das Vorschaubild zwar mit Hover angepasst habe. Wenn man aber alle Bilder zum Projekt sehen muss, muss man auf das Projekt klicken, dann öffnet sich eine neue Seite und dann muss man noch auf das Bild klicken um die Lightboxgallerie zu öffnen.

ronsenbonsen

Bei mir sieht's so aus wie auf dem Bild

Es funktioniert soweit alles bis auf die Lightboxgallerie

Ich möcht damit erreichen, dass man nicht eine extra Portfolioseite öffnen um sich alle Bilder zum dazugehörigen Projekt anzuschauen sondern.

Welche divs meinst du? Hab mal geschaut aber immer wenn ich ein div(wo ich dachte dass es offen ist) geschlossen habe hats die komplette Seite zerhauen

html-seminar.de/woltlab/attachment/1362/

ronsenbonsen

ok zu früh gefreut... irgendwie funzt das nicht bei mir

Ich hab den geänderten code mal blau gefärbt, kann mir vielleicht jemand sagen warum es bei mir nicht so wie bei W3 Schools aussieht? Bei denen wird das Bild in einer vernünftigen Größe angezeigt, die Pfeile (nächstes/vorheriges Bild) sind an der richtigen Position etc.

Bei mir ist das Bild viel zu groß, so dass man nur ca. 60-70% des Bildes sieht (scrollen geht in Lightbox nicht) und die Pfeile sind unter dem Bild und auch ohne hover Effekte o.ä.

Code

<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
<div class="card h-100">
<a href="#"><img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/tillmann-verpackungen-referenz-esd-tray-luft-raumfahrt.jpg" onmouseover="this.src='http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca3.jpg'" onmouseout="this.src='http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/tillmann-verpackungen-referenz-esd-tray-luft-raumfahrt.jpg'" class="card-img-top" onclick="openModal();currentSlide(1)"></a>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">

<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/700x400" style="width:60%;">
</div>

<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca1.jpg" style="width:60%">
</div>

<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca6.jpg" style="width:60%">
</div>

<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca5.jpg" style="width:60%">
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

<div class="caption-container">
<p id="caption"></p>
</div>


<div class="column">
<img class="demo cursor" src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca3.jpg" style="width:60%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca1.jpg" style="width:60%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca5.jpg" style="width:60%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca5.jpg" style="width:60%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>


<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}

function closeModal() {
document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}


.row > .column {
  padding: 0 8px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}
img.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}
img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

Alles anzeigen

ronsenbonsen

Ok hat sich schon erledigt, der Hinweis dass es mit CSS sehr komplex wird hat schon gereicht dass ich bei google nach JS Lösungen schaue und siehe da der erste Link war's schon

Falls es jemanden interessiert nachfolgend noch die Lösung:

https://www.w3schools.com/howto/howto_js_lightbox.asp

Den folgenden Code musst ich noch entfernen damit man nur 1 statt alle 4 Bilder sieht

Code

<div class="column">
<img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>

ronsenbonsen

Das sieht auf dem ersten Blick nicht so aus wie ich mir das vorstelle, kann ich damit denn umsetzen dass man lediglich 1 Bild sieht was man anklicken kann und nach Klick auf dem Bild dann mehrere Bilder als Slideshow oder Gallerie dargestellt werden.

Also bei Highslide wäre das "with gallery" nur dass man nicht vorab die gesamte gallery sehen kann, weist du was ich meine?

ronsenbonsen

Hallöchen,

mal ne Frage, gibt's ne Möglichkeit wie ich bei Klick aus einem Bild eine Gallerie in einer Lightbox darstellen kann?

Also bspw hat man auf einer Seite 3 Bilder. 1 Bild von Katzen, 1 von Hunden und 1 von Hühnern.

Bisher passiert folgendes wenn ich auf das Bild der Katze klicke: Das Bild wird vergrößert in einer Lightbox dargestellt.

Das soll passieren: Das Bild sowie weitere Katzenbilder sollen als Art Gallerie (oder Slideshow) in der Lightbox dargestellt werden. Ich hoffe Ihr wisst was ich meine

Kann ich das irgendwie ohne JS umsetzen?

https://github.com/BlackrockDigit…4-col-portfolio

Falls benötigt kann man sich hier den gesamten Code anschauen -> nutze ein Bootstraptemplate dafür

Beiträge von ronsenbonsen

Lokaler Server Wordpress

Lokaler Server Wordpress

Lokaler Server Wordpress

Grafik randlos einfügen

Viele verschiedene Bildgrößen auf eine einheitliche Größe bringen?

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery

Lightbox gallery